Question 1

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.
![enable extension.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/PaKwUUkkmr/enable%20extension.png)
### 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.
![usage-min.gif](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/sKs1zIItSI/usage-min.gif)
So that's it, that's how easily you can use any Library layout in your sidebar.

Cheers!

Question 2

Divi Business Hours Module

Accepted Answer

Want to add Business hours to Divi? And you are looking for some Plugin in the WordPress Repository? Divi Supreme got a new Module Called Business Hours, with this Module for Divi you can easily add business hours to Divi Builder without installing any sort of plugin. The setup is very simple and you can easily make attractive Business hours Section in Divi.

# Content Options

**Business Hours** You can make Business hours of your choice just click on +Add New Item and then Choose Days and Time of your Business. You can add as many items you want by clicking on the +Add New Item button. # Design Options Every Divi module has a long list of design settings that you can use to change just about anything. In the Design Option, you can style your module in different ways that came by default with Divi but some options that are added by Divi Supreme plugin are these: ## Day Text: This is where you can style the Day text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Day Text looks. ## Time Text This is where you can style the Time text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Time Text looks. ## Separator You can add a separator line between Day and time from 8 different selections. **Weight**: You can change the weight of the line i.e 2px **Color**: You can change the color of the line **Gap Spacing**: You can change the gap spacing between the Day and Time Text. ## Divider You can add a Divider underneath every Business hours item. ## Spacing Item Spacing: This is where you will choose how much spacing should be added to business hours. Padding is the space added inside of your business hours items. # Advanced Options Use the advanced options to give your business hours module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # Business Hours Item Content ## Text **Time** Here put the time period you want to set for your business. **Day** Here put the Day name. ## Business Hours Design Options In the Design option, you can change font, colors and many more of a particular item. ## Day Text: This is where you can style Day text. As mentioned before. ## Time Text This is where you can style the Time text. As mentioned before. ## Business Hours Item Advanced Options Use the advanced options to give your Business Hours Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling.

Question 3

Divi Glitch Text Module

Accepted Answer

The glitch effect can bring some very unique style to your site, but can be also very distracting if you overuse it. So Glitch responsibly!

# Content Options **Glitch Text** This field is where you can enter the content of your text. Text content spans the full width of the column that it is in. ## Glitch Effect This is where you can choose different types of animation for the glitch effect.

## Background **Background Color** Here you can choose a background color for your text module. **Background Image** Here you can choose a background image for your text module. ## Admin Label By default, your glitch text module will appear with a label that reads ‘Glitch Text’ in the builder. The Admin Label allows you to change this label for easy identification. # Design Options Here you can style and/or position your text just how you want it by choosing the text color, orientation, font, font size, font spacing, and line height. You can also designate a border style, set a max width for your module, and add custom margin and padding. # 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.

Question 4

Popup styling issue on Frontend

Accepted Answer

If you're facing such issue then here's a quick solution. All you've to do is to make sure that the Layout type in Library is set to "Layout". This is a bug with Divi so that's the only solution for now.
![layout type.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/3Jn6Ar8xly/layout%20type.png)

So that's it, now the Popup on Front end will load without any styling issue, Cheer!

Question 5

Divi Facebook Like Button Module

Accepted Answer

Add a Facebook Like Button in your posts, so your visitors are encouraged to Like/Recommend or even share your content on Facebook. A single click on the Like button will ‘like’ pieces of content on the web and share them on Facebook. You can also display a Share button next to the Like button to let people add a personal message and customize who they share with.

# Content Options

**Facebook APP ID** The Facebook Like Button module uses the Facebook APP ID and requires a Facebook APP ID to function. Before using all Facebook module, please make sure you have added your Facebook APP ID inside the Divi Supreme Plugin Page. You can go to Facebook Developer and click on Create New App to get one. You can also see this guide for more help here. **URL** Here enter the URL of your Facebook Page **Layout** Change the type of Layout from 4 Different Layouts: * **Standard** - Will show the like button and number of likes separated. * **Button Count** - Will show the Like button and Like counts in the same box. * **Button **- Will only show the like button. * **Box Count** - Wil show the Like button and count on top and bottom separated. * **Color Scheme** - Change the Color Scheme of the Like Button to Light or Dark. **Show Faces** Choose whether to show faces or not(Only Standard Layout). **Action** The verb to display on the button. It can be either like or recommend. **Show Share Button** Specifies whether to include a share button beside the Like button. **Size** Change the Size of the button to either small or Large. # Design Options There’s no option for this module in the Design Options. But you can still add Border, Corner Radius, Box Shadow and more… # Advanced Options Use the advanced options to give your Facebook Like Button Module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 6

How to translate Divi Supreme Plugin

Accepted Answer

You can also use Poedit locally when translating. This is an open source tool for all major OSs. The free Poedit default version supports manual scanning of all source code with Gettext functions. A pro version of it also features one-click scanning for WordPress plugins. After generating the PO file you can rename the file to POT. If a MO was generated then you can delete that file as it is not needed. If you don’t have the pro version you can easily get the Blank POT and use that as the base of your POT file. Once you have placed the blank POT in the languages folder you can click “Update” in Poedit to update the POT file with your strings.

After creating your .PO and .MO files.

Make sure the following filename is named as "dsm-supreme-modules-pro-for-divi-fr_FR.mo" or "dsm-supreme-modules-pro-for-divi-fr_FR.po" and placed them under the plugin /languages/ folder.

Example above is for French using "fr_FR". You might need to change to your own prefix.

More information can be found here [https://developer.wordpress.org/plugins/internationalization/localization/](https://developer.wordpress.org/plugins/internationalization/localization/)

![divi_supreme_languages.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/yQky8fmDQr/divi_supreme_languages.png)

Question 7

Divi Blog Carousel Module

Accepted Answer

Surprise your Visitors by showing your Posts in a new & creative way using Divi Supreme Blog Carousel Module. Add some special post Carousels to your site and take Blogging with Divi to the next level.
![Blog Carousel Demo-min.gif](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/pGgR38pTtU/Blog%20Carousel%20Demo-min.gif)

# Content Options
<img alt="blog-carousel-content-1.png" src="https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/rHI8G12zbg/blog-carousel-content-1.png" width="40%">

**Post Count**

Enter how many posts you want to show in the Carousel here.

**Included Categories**

Choose Which post categories you want to show, you can select a particular category or choosee "All Category" to show all category posts.

**Date Format**

Change the Date format from here the way you like.

### Elements

**Show Featured Image**

Enable or Disable this switch to show or hide Post's Featured Images.

**Show Title**

You can choose whether to display the Post Title or not, Disable it to hide the Post Title.

**Show Excerpt**

Enable to Disable this switch to show or hide the Post Excerpt.

**Excerpt Text**

Change the length of the Excerpt text here, enter value in numbers.

**Show Date**

You can choose whether to display the Post Publish Date or not, Disable it to hide the Date.

**Show Category**

Enable this switch If you want to show Post Categories in the Carousel for each post.

**Meta Separator**

Here you add a custom Meta Separator.

**Author**

You can choose whether to display the Post Author or not, Disable it to hide the Author Info from the Carousel.

**Readmore Button**

Enable this switch If you want to show the Readmore button for each Post card in the Carousel.

**-Readmore Text**

Add a custom Text for Readmore button here.
	
**Show Bottom Meta Elements**

This is something really cool, you can enable this option to show a nice looking Author Image and Name and Post Publish date for each Post card.

**-Bottom Date**

You can disable this switch If you don't want to show Date in this Meta Element.
	
  **-Bottom Author**
	
	You can also hide post Author Name by disabling this switch.
	
**Carousel Effect**

Choose a Carousel effect from 4 Different Effects and more to add soon.

* Slide
* Coverflow
* Flip
* Cube

**Columns**

Enter how many columns you want to show in the Carousel.

**Use Multiple Row**

You can enable this option If you want to show multiple rows of Posts, lets say you enter 2 in the "Row Per Slide" field and then you'll see two Rows of Posts, a new one below the first one and It will work the same way. You can change the "Row Per Slide" value to whatever you like.

**Centered Mode**

If enabled, then active slide will be centered, not always on the left side.

**Spacing**

Add some spacing between carousel Items.

**Transition Duration**

Change the duration when sliding the Carousel using the arrows here.

**Infinite Looping**

Enabling this option causes the carousel to loop. Means when you’ll click on the arrow to go to next slide it will then keep looping and shows all the item from first to end. Disabling this will show only the number of Posts and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow.

**Autoplay**

You can enable this option to slide Carousel Items automatically according to the time you'll set.

**-Autoplay Speed**

Change the time interval for the slides to change after that time.

**-Pause on Hover**

Enable this option, If you want to pause the carousel autoplay when the mouse is on the Carousel Module.

**Pagination**

Enable or Disable this option to show or hide the pagination dots.

**Navigation**

Enable or Disable this option to show or hide the arrows.

**Use Equal Height**

Equalize the carousel Items height. Carousel Card Items will be 100% in Height.

# Design Options

### Post Item
Changes you'll make here will be applied to the Post Items/Cards in the carousel.

**Post Item Padding**

Add padding around the Post Item here.

**Background Color**

Add a background color for each post Card in the Carousel here.

And else you can play around with adding Corner Radius, Border and Box Shadow to Post Items/Cards in the Carousel.

### Post Thumbnail

**Thumbnail Height**

You can change the height of the Featured Image here. A really helpful option.

And else you can play around with adding Corner Radius, Border, Box Shadow and Filters to Post Thumbnails in the Carousel.

### Post Entry Title
Here you can change the Title styling, you can change the Heading Level, font, size, weight and much more for the Title.

### Post Entry Summary
Here you can style the Description/Excerpt text the way you like.

### Post Entry Meta
This is where you'll be able to style the Meta text, such as Date, Category, and Author font.

**Alignment**

Here you can change the alignment of the Meta text to Left, Right or Center.

And below you'll find options to style you Author, Date and Category Text's Font, Weight, Color and much more. You can give different styling to all of them.

# Readmore
This is where you can style the Readmore button. Enable the switch "Use Custom Styles for Readmore" and then you'll see options to style the Readmore button the same way you design Default Divi Buttons.

# Navigation
This is where you can style the Navigation/Arrows of the Carousel.

**Navi Vertical Position**

You can change the vertical position of the Arrows/Navigation here.

**Left Navigation Position**

From here you can horizontally change the position of the Left/Prev Arrow.

**Right Navigation Position**

From here you can horizontally change the position of the Right/Next Arrow.

**Navi Arrow Icon Size**

Here you can change the Size of the arrows.

**Custom Prev Arrow Icon**

Enable this option If you want to set a custom Icon for the Prev Arrow, enabling this option will show the Divi Icon Library to choose an icon.

**Custom Next Arrow Icon**

Same goes here, enable this option If you want to set a custom Icon for the Next Arrow, enabling this option will show the Divi Icon Library to choose an icon.

**Arrow Color**

Here you can change the Arrow Color.

**Arrow Background Color**

Change the Arrow Background color from here.

And below you'll find options to add Rounded Corners, Border and Box Shadow to the Arrow Icons.

# Pagination
This is where you can style the Pagination/Dots.

**Pagination Position**

Change Vertical position of the Pagination here.

**Pagination Color**

Change the color of the Pagination here.

**Pagination Active Color**

Change the Active Pagination color from here.

**Pagination Button Style**

Here you can change the Pagination style, you've got 3 different styles to choose from.
* Default
* Dynamic
* Progress Bar

### Bottom Meta Items
Here you can play around with Bottom Meta Items styling.

**Image Width**

Change the Author Image width from here.

And else you can play around with the Author Name and Date Text styling. And add Rounded Corners, Border and Box Shadow to the Author Image.

### Overlay

Enable this switch If you want to show an Overlay when hover on Thumbnail. When you'll enable this option It will open some settings and ask you to pick an Icon from Divi Icon Library.

**Overlay Icon Color**

Change the Icon Color here.

**Overlay Icon Size**

Change the Size of the Icon from here.

**Overlay Background Color**

Change the Overlay Background Color here.

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

Question 8

Divi Facebook Embed Module

Accepted Answer

With Divi Facebook Embed Module, you can easily embed a post or video to any Divi post or page. Just copy and paste any Facebook post or video into the link input field and you're good to go. Stop wasting time on enqueuing scripts and worry that it might not work. We’ve done that for you.

# Content Options

**Facebook APP ID** The Facebook Embed module uses the Facebook APP ID and requires a Facebook APP ID to function. Before using all Facebook module, please make sure you have added your Facebook APP ID inside the Divi Supreme Plugin Page. You can go to Facebook Developer and click on Create New App to get one. You can also see this guide for more help here. ## Type Choose the type of Embed you like. Such as Post or Video. **Type as Post** If you’ll select the post type as Post you will see these options: * **Post URL** - Enter the URL of the actual post from Facebook here. * **Show Text** - Applied to photo/video posts. Set to Show to include the text from the Facebook post or video, if any. **Type as Video** If you’ll select the post type as Post you will see these options: * **Video URL** - Enter the URL of the actual Video from Facebook here. * **Show Text** - Applied to photo/video posts. Set to Show to include the text from the Facebook post or video, if any. * **Allow Video Fullscreen** - Let the video to be played in the Fullscreen. You can Allow or Disallow. * **Video Autoplay** -Automatically start playing the video when the page loads. The video will be played without sound (muted). People can turn on sound via the video player controls. This setting does not apply to mobile devices. * **Show Video Captions** -Set to show to show captions (if available) by default. Captions are only available on desktop. # Design Options There’s no option for this module in the Design Options. But you can still add Border, Corner Radius, Box Shadow and more… # Advanced Options Use the advanced options to give your Facebook Embed Module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 9

Divi Gradient Text Module

Accepted Answer

By using Divi’s built-in background gradient tool, this module allow you to have gradient text without coding.

<img alt="showcase-12-1024x449.png" src="https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/RLJReiMvwo/showcase-12-1024x449.png" align="center">
# Content Options
**Gradient Text**
This field is where you can enter the content of your text. Text content spans the full width of the column that it is in.

### Background
With Divi’s built-in background gradient tool, you can style the gradient of the text.

# Design Options
Here you can style and/or position your text or header text just how you want it by choosing the text color, orientation, font, font size, font spacing, and line height.

You can also designate a border style, set a max width for your module, and add custom margin and padding.

# 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.

Question 10

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.

# Content Options

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) You can switch this option to style the Advanced File Button(1.0) the same way you style the Divi Button or any button in Divi Builder. # 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 11

Divi Facebook Comments Module

Accepted Answer

Add Facebook Comments to the anywhere to allow your readers to easily comment using their Facebook account.

# Content Options

**APP ID** Enter the Facebook App ID here. You can go to https://developers.facebook.com/ and click on Create New App to get one. It is a must to provide a Facebook App ID which required to use this module. **Page URL** Get the Comments of the Current Page, or for a Custom URL. This can be other page URL but it’s best to use it on your current page URL to keep track of the Facebook comments related to your page. **Number of Posts** The number of comments to show by default. The minimum value is 1. **Color Scheme** The color scheme used by the comments plugin. Can be “light” or “dark”. **Order by** The order to use when displaying comments. Can be “social”, “reverse_time”, or “time”. The different order types are explained in the FAQ **Social** – This is also known as “Top”. The comments plugin uses social signals to surface the highest quality comments. Comments are ordered so that the most relevant comments from friends and friends of friends are shown first, as well as the most-liked or active discussion threads. Comments marked as spam are hidden from view. **Time** – Comments are shown in the order that they were posted, with the oldest comments at the top and the newest at the bottom. **Reverse Time** Comments are shown in the opposite order that they were posted, with the newest comments at the top and the oldest at the bottom. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # 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. # 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.

Question 12

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](http://divisupreme.com/contact)

Question 13

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](https://www.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:

![Screen Recording 2020-12-18 at 12.23.59 PM.gif](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)

## 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 14

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 15

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. ![Image Accordion-min.gif](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/BbJQFpk7nt/Image%20Accordion-min.gif) # Content Options 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 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 16

Divi Supreme Content Toggle Module

Accepted Answer

> The Layout might not show properly in the Divi Builder, Only on the front end It will be 100% accurate. This is something elegant themes will be improving in the near future for rendering divi library layout in visual builder. Using the Divi Supreme Content Toggle Module you can easily create a Toggle to switch between two content Layouts. Use it to create stunning Pricing Tables, Food Menus and much more you can think of. ![content toggle demo-min.gif](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/7aUT1SfzRW/content%20toggle%20demo-min.gif) # Content Options

### Content One **Heading** Your heading for the Content one switch goes here. **Content Type** Here you can choose the Type of Content, If you'll choose "**Custom Content**", you'll be able to add custom content such text, Images and stuff. And If you'll choose type as "**Library**" then you'll be prompted to choose a Divi Library Layout. And for the third content type **Shortcode**, If you'll select it you'll be able to add shortcode of the content you want to show in the Toggle One. ### Content Two **Heading** Your heading for the Content one switch goes here. **Content Type** Here you can choose the Type of Content, If you'll choose "**Custom Content**", you'll be able to add custom content such text, Images and stuff. And If you'll choose type as "**Library**" then you'll be prompted to choose a Divi Library Layout. And for the third content type **Shortcode**, If you'll select it you'll be able to add shortcode of the content you want to show in the Toggle Two. # Design Options

### Switcher **Switcher Size** Here you can change the size of the Toggle Switch. **Alignment** Change the alignment of the toggle switch here to Center, Left or Right. **Switcher Primary Background Color** Here you can change the switcher primary background color. Which is the default state of the Switch. **Switcher Secondary Background Color** Here you can change the background color of the switch when you'll click to Switch the Content, the background color of the switcher will be changed to what you've added here. **Switcher Inner Color** Here you can change the color of the Switcher that indicates on which Switch you're currently on. ### Heading One **Heading Level** Change the heading level from H1 to H6. Here you can play with the Heading One by changing its font, size, color and weight and even add shadow to the text. ### Heading Two **Heading Level** Change the heading level from H1 to H6. Here you can play with the Heading Two by changing its font, size, color and weight and even add shadow to the text. ### Content One **Content Background** Here you can change the background color of the Content One. **Content Padding** Add some padding inside the Content here, helpful If you've added Background, Border and Box shadow. **Content Spacing Top** Add some top spacing for the content one here If required. **Make this Layout Fullwidth** Enable this option to fullwidth the Layout. And else you can play around with changing Text Font, Weight, Size and much more. ### Content Two **Content Background** Here you can change the background color of the Content Two. **Content Padding** Add some padding inside the Content here, helpful If you've added Background, Border and Box shadow. **Content Spacing Top** Add some top spacing for the content two here If required. **Make this Layout Fullwidth** Enable this option to fullwidth the Layout. And else you can play around with changing Text Font, Weight, Size and much more for content two. # 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.

Question 17

Divi Image Carousel Module

Accepted Answer

The easy way to create a beautiful image carousel using Divi Supreme Image Carousel Module. The image carousel module is perfect for showcasing a set of images, your portfolio pieces, client logos and much more.

# Content Options

## Image Carousel **+Add Gallery Images** Choose multiple images from your Media Library here. **Order by** You can change the order of the images to default(show images the way you selected) or Random(Shows images randomly) **Image Size** Change the size of all the images here. ## Carousel Settings **Carousel Effect** Here you can change Carousel Slide Effect from 4 different effects. * Slide * Coverflow * Flip * Cube **Coverflow Effect settings** If you'll select Carousel Effect as Coverflow you'll see these options: * **Show Shadow** - Adds a shadow to next Carousel Images. * **Coverflow rotate** - Set the Rotate amount of the next images in the slide. * **Coverflow Depth **- Increase to show more items in the carousel with coverflow effect. **Centered Mode** This mode will show the next image in the carousel centered means half of the image will be appearing which tells there are more items to see. **Slides to Show** Here you can change the number of images to show in one slide. **Slides to Scroll** Here you can change the number of slides to scroll when click on the arrow button to see the next items. **Slider Speed** Here you can change the speed for sliding the slider. **Use Multiple Row** You can enable this option If you want to show multiple rows of Images, lets say you enter 2 in the "Row Per Slide" field and then you'll see two Rows of Images, a new one below the first one and It will work the same way. You can change the "Row Per Slide" value to whatever you like. **Autoplay** You can enable this option to slide images automatically. **Autoplay Change interval** Change the time interval for the slides to change after that time. **Spacing** Add some spacing between carousel images. **Infinite Looping** Enabling this option causes the carousel to loop. Means when you’ll click on the arrow to go to next slide it will then keep looping and shows all the item from first to end. Disabling this will show only the number of images and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow. **Show Arrow** Enable or Disable this option to show or hide the arrows. **Show Pagination** Enable or Disable this option to show or hide the pagination dots. **Disable Touch/Dragging** Use this option to disable touch/drag to slide the Carousel. **Use Grab Cursor** Enable or Disable this option to make the mouse icon to grab cursor icon. ### Lightbox **Open Image in Lightbox** Enable or Disable this option to open the images in the lightbox when click on a single image. Enabling this option will reveal some more options too. **Image Size** Here you can change the Size of the Image when opened in Lightbox. **Lightbox in Gallery Mode** Enable this option If you want a gallery in lightbox, this will show next & prev arrow in the Lightbox to switch to another Image in carousel. **Display Caption** Enable this option If you want to show Image Caption in lightbox. You can set Image caption by opening the Image in Media Library. # Design Options ## Layout **Horizontal Alignment** Change the horizontal alignment of the images. If you have small and big size images in the carousel then this option would be helpful. ## Element **Arrow Position** Change the arrow position to inside or outside of the carousel. **Mobile Arrow Position** Change the arrow position to inside or outside of the carousel for Mobile Devices only. **Arrow Size** Change the font size of the arrow. **Arrow Color** Change the color of the arrow. **Arrow Background Color** Change the background color of the arrow. **Pagination Placement** Here you can change the Position of the Pagination dots vertically. **Pagination Active Color** Change the color of the Active dot in the Pagination **Pagination In-Active Color** Change the color of the In-Active pagination dots here ## Image This is the place where you can add corner radius, borders, box shadow and more stuff to the carousel images. # Advanced Options Use the advanced options to give your Price List module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # How to add URL to each Carousel Image **Adding a URL to the Image** If you want to add a URL to each Carousel Image you can do that easily. All you've to do is open up that Image in the Media Library and add the Custom URL to it there. So when a user will click on the Image they’ll be taken to that URL that you added to Image. It will only work within Divi Supreme Modules.

**Adding Download link to the Image** If you want to let your users download a file when they click on the image you can simply enter the URL of that download file and check the option “Download as File”.

That's it!

Divi Supreme

Need Help?