Question 1

Divi Image Accordion Module

Accepted Answer

Let's you display all of your images on your Divi website with a stunning hover/click animation and effects. Add as many items as you need providing them with icons, images, titles, descriptions, buttons, and links easily and quickly. It ensures the perfect image quality and combines them beautifully with amazing accordion effects.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/BbJQFpk7nt/Image%20Accordion-min.gif (Image Accordion-min.gif)

Content Options

Q: Icons Rendering conflict with other Plugins

Plugins such as Divi Icons Pro , Divi Upload Icons or Divi Font Awesome does not work well with 3rd party Divi modules. You should contact the author of the icon plugin if they are willing to support Divi Supreme. They do not support 3rd party modules and that is why you’re seeing icons not rendering properly on Divi Supreme Modules. There is nothing we can do unless the plugin you using supports 3rd party divi modules. This applies to all 3rd party plugins out there. We are also looking to add Icon Extension in the near future. So stay tuned for that!

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/WGFsRyv2NN/image%20accordion%20content%20options.png (image accordion content options.png)

Click on + Add new Item to add your first Image Accordion Item. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Image Accordion.

See below for individual Image Accordion Item settings.

After you add your first Accordion Item, you will see a gray bar appear with the title of your Image Hotspot shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Image Accordion in the Main Content tab.

Accordion Settings

Accordion Type

Here you can choose whether to open the Image Accordion by Hover or Click.

Accordion Content Animation

Choose any animation from 5 different animations for Content entrance.

Use Sequenced Animation

Enabling this option will add animation separately to all Elements in the Accordion such as Title, Description, Button, Icon etc.

Accordion Direction

You can change the accordion direction to either Horizontal or Vertical.

Accordion Height

Change Accordion height from here.

Design Options

Overlay

Overlay Color

You can add Accordion to each Accordion from here, just change the color to any RGBA Value and it will be applied over your Image. This could be helpful to read your text clearly.

Icon

Icon Color

Change Icon color from her, If you've added in the Accordion.

Use Icon Font Size

Enable this option If you want to change the size of the Icon, you'll then see a handle to control the size of the Icon.

Icon Image

If you've replaced your Icon with an Image then you can manage It's styling from here, you can add Border, Corner radius and Box Shadow.

Title

Title Heading Level

Change the Heading level of the Title from H1 to H6.

And else you can play around with other settings to style the Title text.

Description

Here you can play around with the styling of the Description text the same way you style the paragraph in Default Text Module.

Button

This is where you can style the Button If you've added in Accordion. Enable the switch "Use Custom Styles for Button" and then you'll see options to style the button the same way you design Default Divi Buttons.

Advanced Options

Use the advanced options to give your Image Accordion module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.

Image Accordion Item Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/E7ulEQRwOA/item%20content%20options.png (item content options.png)

Make Item Expanded

As the name suggests, enable this option If you want the Item to be expanded by default.

Image

Add the Main Image for the Accordion here.

Use Icon

Enable this option If you want to add an Icon to the Accordion Content, then disable the switch If you want to use Image instead of icon.

Title

Your Main Title goes here.

Description

Your Description content goes here.

Show Button

Enable this switch If you want to use Button in your Accordion, then It will ask you for the Button Text & URL.

Horizontal Align

Here you can align the Accordion Content Horizontally to Left, Right & Center.

Vertical Align

Here you can align the Accordion Content Vertically to To, Bottom & Center.

Image Accordion Item Design Option

Overlay

Overlay Color

You can add Accordion to each Accordion from here, just change the color to any RGBA Value and it will be applied over your Image. This could be helpful to read your text clearly. Enable Hover option to add a Hover Overlay effect ~ Best for Item settings.

Title

Title Heading Level

Change the Heading level of the Title from H1 to H6.

And else you can play around with other settings to style the Title text.

Description

Here you can play around with the styling of the Description text the same way you style the paragraph in Default Text Module.

Button

This is where you can style the Button If you've added in Accordion. Enable the switch "Use Custom Styles for Button" and then you'll see options to style the button the same way you design Default Divi Buttons.

Sizing

Content Width

Change the Content width from here.

Image Accordion Item Advanced Options

Use the advanced options to give your Image Accordion Item module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.

Question 2

Icons Rendering conflict with other Plugins

Accepted Answer

Plugins such as Divi Icons Pro, Divi Upload Icons or Divi Font Awesome does not work well with 3rd party Divi modules. You should contact the author of the icon plugin if they are willing to support Divi Supreme. They do not support 3rd party modules and that is why you’re seeing icons not rendering properly on Divi Supreme Modules. There is nothing we can do unless the plugin you using supports 3rd party divi modules. This applies to all 3rd party plugins out there.

We are also looking to add Icon Extension in the near future. So stay tuned for that!

Question 3

How to Solve common issues caused by Cache.

Accepted Answer

If you're facing any issue that you think shouldn't happen or the Plugin isn't behaving properly? Then you might wanna do the Following:

Clear your browser cache.
Clear/purge any cache plugin.
Clear/purge if you're on CDN.
Re save Permalink.
Might be a Plugin.

Clear your browser cache

Most of the time any unusual plugin behavior or any kind of new is caused by the Browser Cache. Clearing your Browser Cache might help here. You can also try Incognito Mode in such situations. Here's an article to clear browser cache on any Browser: elegantthemes.com/blog/wordpress/how-to-clear-all-browser-caches

Clear/purge any cache Plugin

If you've installed any Caching plugin like WP Super Cache, W3 Total Cache or similar Caching Plugins, then you must try to clear your Cache using the Plugin. Almost every plugin provide an option in admin bar to Clear/Purge Cache. Take a look 👀

Clear/purge if you're on CDN

Your CDN might be a culprit, so you must clear your CDN Cache as well. Login to your CDN Provider Dashboard and find an option to clear your CDN Cache.

Re save Permalink

Resaving you permalink might be helpful sometimes. Here's how to resave it:

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/G2VfMYu1NZ/Screen%20Recording%202020-12-18%20at%2012.23.59%20PM.gif (Screen Recording 2020-12-18 at 12.23.59 PM.gif)

Might be a Plugin.

Try to deactivate all the plugins installed on your site to see If there's any conflict caused by any plugin you've installed on your site. If you found out that your issue was caused by this specific plugin, you might need to report them about the conflict.

Question 4

Divi Caldera Forms Module

Accepted Answer

Now with Divi Supreme Caldera Forms module, you can select your contact form from the dropdown list without having to go back and forth switching between Visual Builder and Caldera Forms setting page to copy the shortcode and adding it to the Divi Code Module. Style your Title, Body, Horizontal Ruler (HR Tag), Labels, Field Description, Input, Textarea, Select, Placeholder, Radio, Checkbox, Basic File, Error Messages, Success Message, Submit Button, Advanced File Button and more coming your way.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/F9zi2IKWn5/showcase-1024x638.jpg (showcase-1024x638.jpg)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/MswjMwJv3u/dsm-caldera-forms-content-options.png (dsm-caldera-forms-content-options.png)

That "Note" at the top means that you'll need to disable the Default Caldera Forms styling by going to Caldera Forms and click "General Settings" at the Top and disable all the switches from here.

Caldera Forms

Caldera Form

Select a form from the dropdown all of your forms that you’ve created using the Caldera form plugin will appear in the Dropdown menu. If you haven’t created a form already Hover over to Caldera Form > Forms and click on the New Form button at the top.

Show Error & Validation Messages

This will show the error and validation messages on the Visual Builder for styling purposes.

Admin Label

This will change the label of the module in the builder for easy identification. When using the WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Design Options

Header Text

Here you can play around with the header text you may have added to the Form while creating the Form.

Body Text

Here you can play around with the body/description text you may have added to the Form while creating the Form.

Horizontal Ruler (HR Tag)

Color

Here you can change the color of the Divider line in the Form.

Gap

You can add spacing to the top and bottom of the Divider line in the form.

Label

Bottom Spacing

Add some spacing to the bottom of the Label.

Required Asterisk Color

Change the color of the (*) with the showing with the label which indicates that this field is Important to be filed.

And else you can change the color, size, font and more of the Label text.

Field Description

If you’ve added a description to the field(Shows down of the field) then you can style it here. You change the background color and size, font, weight and more of the description text.

Input, Textarea and Select

All the changes you’ll make here will be applied to all the form fields including Name, Email, Message box and to the Drodpwn select field as well.

Margin Bottom

Add some spacing at the bottom of all the fields.

Background Color

Change the Background color of the form Fields and Select box.

You can change the input Font, Size, color and more of the text will be entered in the Field.

Field Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Form Field. Enable the link icon to control all four corners at once, or disable to define custom values for each. You can play around with adding borders and Box Shadow to the Form Field.

Input, Textarea and Select Focus

When you’ll try to write something in the form and wanted to add some attention to the field then use this option to change the size, weight, and more of the text Input.

Placeholder

If you are using a placeholder on your Contact Form, this is where you can style the placeholder such as font, size and more.

Radio & Checkbox

If you are using a Radio & Checkbox on your Contact Form, this is where you can style the Radio & Checkbox such as font, size and more.

Custom Radio/Checkbox Styles
You can switch this option to add custom styles to the Radio/Checkbox.
Checked Color
You can change the color of the circle icon when checked here.
Checked Background Color
You can change the color of the background when checked here.
Background Color
You can change the color of the background for the Radio/Checkbox here.

Basic File

If you’ve added a Basic file uploader to the form then it can style here. You can add Padding, Change the background color, font, size, weight and more.

Error Messages

Here you can change the error message background color, font, size and more. You can also add drop shadow, Rounded corners and Borders to the Error message.

Success Messages

Here you can change the Success message background color, font, size and more. You can also add drop shadow, Rounded corners and Borders to the Success message.

Submit Button

Button Alignment

Change the alignment of the button to Left, Center or Right.

Margin Top

Add some top margin to the button here.

Use Custom styles for the button

You can switch this option to style the Submit button the same way you style the Divi Button or any button in Divi Builder.

Advanced File Button(1.0)

Use Custom styles for the Advanced File Button(1.0)

Advanced Options

Use the advanced options to give your Caldera Forms module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 5

Do i need to uninstall Lite version if i have the Pro version?

Accepted Answer

You can Uninstall the lite version if you want to. However, we recommend keeping. It's a fallback method. We have decided that all pro users must install the lite version as well. The reason because in some cases or in the future, let's say you decided not to use the pro version or something happen to the pro version. You always have the lite version to support and backup you, so that your site won't mess up showing a butch of shortcode and etc on frontend.

We care about your sites and that is why we added a fallback method for our pro users.

Also, we've enhanced and make sure when both the free and pro version installed and activated together, only the pro version functions, script and files will be loaded. There won't be any extra files or functions loaded when both are activated.

Let us know If you've any question or need any help: http://divisupreme.com/contact

Question 6

Divi Library Widget Extension

Accepted Answer

At times, you wish to add Divi modules right inside Sidebar Widget and with this extension, you can add any Divi Library Layout to Your Widget Area – Sidebars, Footer or any that you’ve created.

Before Using

Make sure to activate the extension by going to Divi Supreme -> "Enable Divi Library Widget" and enable it.

Usage

To use the Divi Library Widget extension, go to Appearance -> Widgets and there you'll find a new widget "Divi Library Widget". Just drag it and drop it to the place where you want to show It can be Sidebar, Footer etc.

Cheers!

Question 7

I didn't find my License key because I purchased from Elegant Themes - Divi Marketplace

Accepted Answer

The version at Elegant Themes - Divi Marketplace does not required a license key to use. The differences between our own version and the version on Divi Marketplace is just the license key. If you see the notice in your dashboard asking for License key then you can simply Dismiss it because you'll get updates automatically.

Hope that solves the mystery!

Question 8

How to show a Popup Globally

Accepted Answer

If you want to show a Popup Globally on your site then you must follow this guide. We'll see how to show the Popup you've created Globally on your site. It could be a Sale Notice Popup, Important Notice or anything.

We can use the Divi's Theme Builder to show the Popup globally. Just Edit your Global Header or Footer as both shows on your whole site so will the Popup. Let's Edit the Global Footer.

Once you've opened the Module settings, you can go to Advanced tab -> Visibility -> Use Popup and set up the Popup the way you like.

Hope you'll found it useful, Let us know If you need any help. Have a great day!

Question 9

Divi Lottie Module

Accepted Answer

Lottie is an iOS, macOS, Android, and React Native library that renders After Effects animations in any native app. And we’re bringing it to Divi with a Custom Module that’ll let you add beautiful animations with ease.

Click here to see live demo.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/efKqxhL969/content%20options.PNG (content options.PNG)

Lottie JSON File

Here you’ll need to upload the .JSON File that you’ll download from LottieFiles and you don’t have to worry about uploading a .JSON File because Divi Supreme already did it for you.

Loop

If you want to keep running/Looping enable this option.

Number of Times

Here you can specify the number of times the Animation will Loop. If you enter 2 the animation will loop 2 times and then it will stop.

Direction

Here you can change the direction of the animation it maybe either Normal or Reverse.

Speed (More is Faster)

Here you can change the speed of the animation the more value you’ll enter here the more speed of the animation will be.

Trigger

Enable this option to trigger the animation on Hover or Click.

Trigger Method

Play Animation on Hover/Mouse over - This option will let you play the Lottie Animation when you hover the mouse on the Animation.
Play Animation on Click - This option will let you play the Animation on click. So when you'll click the Animation it will play.
Play Animation on Scroll - (A great addition) This will let you animate the Animation on Scroll. Create something extraordinary.

Relative To

Entire Page - You can relate the animation Scroll to Entire Page, more option will be added in upcoming Updates!

On Mouseout action

This option will show if you select the Animation Trigger method as "Hover". And it will let you do different things with Animation like Stop, Pause or Reverse the Animation when you move the mouse away from the Module.

Animate in Viewport

Here you can play around with animation to play at a specific viewport.

Design Options

Because It’s an animation you don’t need to do any design settings here. But if you want then you can add a Box Shadow, Corner Radius and Play around with other settings here.

Advanced Options

Use the advanced options to give your Lottie Module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 10

Divi Flipbox Module

Accepted Answer

With over 15 effects to choose from, you can now create stunning interactive content that converts.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/IbfuY8lsfa/showcase.gif (showcase.gif)

Content Options

+ Flipbox Item

This is where you add content, images and icon to your Flipbox Module. Just like a Blurb Module but with Front and Back Animation to show the front and back of an element when you hover. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new Flipbox. See below for individual Flipbox settings.

After you add your first image, you will see a gray bar appear with the title of your Flipbox shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the image.

Note: Create only two items because one is identify as Front and the other as Back.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/3Z6sx0WARQ/flipbox-1-693x1024.png (flipbox-1-693x1024.png)

Design Options

Sizing

--Height

By default, the flipbox is set at 200px. You can set to other height to suit the content of your flipbox. This is one of the most important part when using flipbox. If you content is too long and doesn’t look right. Adjust your height.

Animation

This is where you can change the flipbox animation effect.

Trigger Animation On

Choose a trigger animation for the Flipbox here. You can either select "Hover" or "Click". When you'll select Click the Flipbox will flip on Click instead of on hover.

Click On

This option will appear once you'll select the Trigger method as "Click". And from here you can choose If you want to flip the Flipbox on Whole Flipbox click or Button click.

Flipbox Type

There are 5 types of Flipbox Effect to choose from.

Flip
Slide
Zoom In
Zoom Out
Fade
See Flipbox Demo here.

Flip Animation

There are 4 types of Flip Effect to choose from. "Flip Left" "Flip Right" "Flip Up" "Flip Down"

3D Effect

This option will only show up when you choose Flipbox Effect as Flip And this will create a 3D effect to your Flipbox.

Slide Animation

This option will only show up when you choose Flipbox Effect as Slide

There are 4 types of Slide Effect to choose from. "Slide Left", "Slide Right", "Slide Up" and "Slide Down".

Zoom In Animation

This will have a zoom in animation on your flipbox.

Zoom Out Animation

This option will only show up when you choose Flipbox Effect as Zoom Out

There are 5 types of Zoom Out Effect to choose from. Zoom Out Zoom Out Up Zoom Out Down Zoom Out Left * Zoom Out Right

Animation Speed (in s)

This will control the speed animation of the flipbox.

Advanced Options

Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Flipbox Item Content

Title

Give a title to your Flipbox that will appear above the body text of the Flipbox in a bold text style.

Sub Title

If you would like to use a sub title, add it here. Your sub title will appear below your title in a small font.

Content

This field is where you can enter the body content of your Flipbox. Flipbox Text will also span the full width of your column.

Use Icon

When using Flipbox, you can choose to either use an Icon or and Image with your text. If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customize your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead.

Icon

If you chose “yes” for the “Use Icon” setting, then this option will appear. This options presents you with a list of available icons that you can use with your Perky Animate text. Simply click on the con that you would like to use and it will appear in your Flipbox.

Image

If you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. However, your image will never scale larger than its original upload size. The height of the Flipbox image is determined by the aspect ratio of your original image, so making all of your Flipbox images the same height is a good idea if you are placing them side by side.

Button

Button Text

Input your desired button text.

Button URL

Input the destination URL for your button.

URL Opens

Here you can choose whether or not your link opens in a new window.

Flipbox Item Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Image & Icon

Icon Color

If you chose “yes” for the “Use Icon” setting, then this option will appear. This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color.

Circle Icon

If you chose “yes” for the “Use Icon” setting, then this option will appear. This options allows you to place your icon within a colored circle. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border.

Circle Color

If you chose “yes” for the “Circle Icon” setting, then this option will appear. Here you can pick a color to use for your circle. This color is independent from your Icon color selected earlier. You icon, in it’s color, will appear inside this a circle with the color you select here.

Show Circle Border

If you chose “yes” for the “Circle Icon” setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color.

Circle Border Color

If you chose “yes” for the “Show Circle Border” setting, then this option will appear. Here you can adjust the color of the circle border.

Use Icon Font Size

If enabled, you can input a custom size for the icon that is displayed.

Sizing

Here you can change the width of the image.

Width

Applying a max width value here will limit the width of the Flipbox image. This only affects Flipbox that are not in icon mode.

Spacing

Custom Padding

Padding is the space added inside of your flipbox item, between the edge of the file and its internal elements. You can add custom padding values to any of the flipbox item’s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.

Flipbox Item Advanced Options

Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.