Question 1

Divi Embed Google Map Module

Accepted Answer

If you just need a simple Google Map, then this Embed Google Map Module will do the job nicely. This will embed into your Divi’s site easily without having to worry about anything else. The Maps JavaScript API v2 is deprecated and will has turned off on May 26, 2021. As a result, all site's v2 embed maps will stop working, and will return JavaScript errors. Google Embed now required a API key even for embed map. [https://developers.google.com/maps/documentation/embed/get-started](https://developers.google.com/maps/documentation/embed/get-started) However, old method using copy/paste method does work for now, however we cannot confirm this method is stable or will be deprecated in the future as well(Google is known to change things): **Obtain a Google embed code** * Go to Google Maps * Enter the business address in the search bar, then click the search button * Click on the Share icon * Choose "Embed map" * Select the size of the map from the drop down * Select and copy the HTML iframe embed code Even thought having API for embed is free and has unlimited usage(https://developers.google.com/maps/documentation/embed/usage-and-billing). You can read more on how to create the free API for the embed google map: [https://developers.google.com/maps/documentation/embed/get-api-key](https://developers.google.com/maps/documentation/embed/get-api-key) Make sure Maps Embed API in the Library is enabled as well. ![Maps Embed API.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/2HnJ7wvEJq/Maps%20Embed%20API.png)

# Content Options

**Google Map API Key** The module uses the Google Maps Embed API and requires a valid Google API Key to function. Before using the module, please make sure you have added your API key inside the Divi Theme Options panel. **Address** Enter an address for the map, and the address will be geocoded and displayed on the map. You can simply type in an address in a standard format, such as “1235 Sunny Road, Some City, State, 88343.” **Zoom** The Zoom level of the map. ## 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 2

Divi Scheduled Element Extension

Accepted Answer

Using this extension you can easily schedule the visibility of any Element like Section/Row/Module in Divi. **Awesome Features:** * You can choose who to show or hide based on the user’s logged-in status. Apply condition to show it for All Users, Logged In Users or Visitors. * Select any user roles which is available to you from your WordPress site. You can choose to show or hide for author or all user roles. * Select days of the week. Monday to Friday or even weekend with your preferred opening & closing time. * And More... This will extend the **Visibility Option** in all the Module settings that will allow you to use the Scheduled Element Extension. This feature is only available for Pro Users. Currently, the available supported modules are listed below: * All Divi Default Modules * All Divi Supreme Pro Modules(Pro Version). ### Before Using Scheduled Content Element Extension: Before you start using the Scheduled Content Element Extension you first make sure that’s active or Enabled from the Divi Supreme Settings. Go to Divi Supreme > Divi Supreme Pro and Enable the use of Scheduled Element Extension

## Usage To use Scheduled Element Extension, go to any of the supported module’s (listed above) settings and navigate to the** Advanced Tab** Scroll to **Visibility** and look for **Use Scheduled Element** Switch.

**Use Scheduled Element** Enable this option if you want to use this extension for any module. **Show or Hide Module** * **Show Option** - This option is very important. If you’ll select Show Option from the dropdown and will set the date and time then the module will be hidden till then but when the time arrives the Module appears which means you’ll not have to worry about the module visibility at a particular time If you don’t get time to change its visibility. * **Hide Option** - The same things go for the Hide Option. But your module will be visible till that time but when the time arrives the module will disappear. **Schedule a Date/Time** Enter your Desired date and time for the Module visibility to show or hide when the time arrives that you set here. **Use Between Date/Time** When you'll enable this option you'll see another Date/Time picker so you can show/hide an element between that date/time. * **Schedule a Date/Time** is the time of start. * **Use Between Date/Time** is the time of end. **Use Business Hour/Time** Enable this option if you want to show a Module only then when your business is open. **Select Day** Select your desired days here. **Opening Time** Add the Opening time of your business here so the module will be shown on your given time. **Closing Time** Add the Closing time of your business here so the module will be gone on your given time. The time format here will be 24 hours. **Apply To** From here you can control the visibility of the module for specific roles. * **All Users** - Choose this option if you want to show the module to everyone e.g Logged-In Users and Visitors and all others. * **Logged In Users** - Choose this option if you want to show this module to only logged in users only, you’ll also get the options to select specific roles or select all for everyone who’s logged In on your site. * **Visitor Users** - Choose this option if you want to show this module to only visitors, which means this module will not be visible to Logged in Members it will be only visible to those users who they’re logged out from your site. **Disable On** This will disable the Module on selected Devices.

Question 3

Divi Facebook Feed Module

Accepted Answer

Add Your Facebook Page Feed easily without having to embed them again.

# 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. **Facebook Page URL** The URL of the Facebook Page **Tabs** Using this option you can add more tabs to the Facebook Feed Module. You can add these tabs: * Timeline * Events * Messages You can even uncheck any of them if you don't want to display them. **Hide Cover Photo** Hide cover photo in the header **Use Small Header** Use the small header instead **Show Face Pile** Show profile photos when friends like this ## 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. ## Alignment Here you can choose to have your facebook feed aligned to the left, right or center. ## Sizing **Height** Adjust the height of your Facebook Feed. The pixel height of the plugin. Min. is 70. # 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. # Setup Facebook App ID You will need your own Facebook account in order to create the Facebook App ID so ensure that you have created a free account by going to http://www.facebook.com first before starting this guide. Step 1: Login to Facebook and go to developers site Ensure you are logged into your Facebook account and go http://www.facebook.com/developers Step 2: Create Facebook Application To create your App ID, head to the Facebook Developers site. As long as you’re logged into your regular Facebook account, you should see the button to Add a New App:

### Step 3: Give it a name, like “Divi Supreme” and click Create App ID:

### Step 4: Navigate to Settings > Basic

Fill up the forms required such as Domain(Make sure it’s your domain), Privacy Policy URL, Terms of Service URL and etc. Then Click Save Changes ### Step 5: Obtain Facebook APP ID

Before copying the APP ID, make sure you also change the status to LIVE. That’s all!

Question 4

How to Download Divi Supreme Pro

Accepted Answer

You can access the latest version of our products at any time provided you’re still in the license term by logging into [Divi Supreme account](https://divisupreme.com/login/).

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

Once logged in, navigate to downloads and you will see a section containing all of the available downloads for your account along with the details of your past orders:

These links will always point towards the latest version of the product.

If you have any troubles accessing your account, try [resetting your password](https://divisupreme.com/my-account/lost-password/), and if that fails please [contact us](https://divisupreme.com/contact/).

Question 5

Divi Before After Image Slider Module

Accepted Answer

The Divi before after image slider module allows you to display the before and after versions of an image by simply sliding over them. Users will be able to move a slider to easily compare the two images.

# Content Options

**Note**: Make sure that the images that you’ll place in before and after image section should be the same size, or it will make it look bad. ## Images The Image you’ll add in the first section will be the Before Image and the second one will be the After image. When you’ll add images you’ll see these options for before and after images: **Before/After Image Alternative text** This defines the HTML ALT text. A short description of your image can be placed here. **Before/After Image Title Text** This defines the HTML Title text. ## Labels **Before Label text** Here you can define a custom Label text for the Before label text. **After Label text** Here you can define a custom Label text for the After label text. **Show Labels on Hover** Enable this option If you'd like to show labels on Hover only. Disable to always show the labels. ## Settings **Default Offset Percentage** Here you control the position of the handle (that you use to see before and after) when the page loads. For example, If you set the offset to 0 the handle will be on the very left, and if it’s 0.5 the handle will be in the center. **Orientation** Here you can control the orientation for the handle to either Horizontal or Vertical. **No Overlay** When you hover to the Before After Image module you see an Overlay, enabling this option will remove the overlay when you hover. **Move Slider on Hover** If enabled, when you’ll hover over to the image the handle will move as the mouse moves. **Move Slider with Handle** Allow a user to swipe anywhere on the image to control the handle movement. **Click to Move slider** Allow a user to click (or tap) anywhere on the image to move the handle to that location. # Design Options ## Before and After Label This is where you can design the Before and After Label, you can add a custom background color, you can change the label font, size, color, and more. ## Overlay Here you can define a custom color for the overlay that shows when you hover over the image. ## Handle Slider Here you can design the Handle that is used to see before and after image. **Handle Border Color** You can change the color of the Handle border to your custom one. **Handle Border Radius** You can add some Corner radius to the Icon that you see in the center of the slider. **Handle Background Color** This is where you can change the background color of the handle icon. **Handle Arrow Color** This is where you can change the color of the handle icon. And even you can add Some box-shadow, corner radius and Border to the module in the design settings the same way you do with other Divi modules. # Advanced Options Use the advanced options to give your Before After Image 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

Divi Card Module

Accepted Answer

A creative Divi module to display a beautiful combination of texts, links, badge and image. With Image Hover Zoom animation, you can now impress your visitors even more.

# Content Options

## Text **Title** Enter your title text here. You can take out the text if you don’t want the Title text. **Subtitle** Enter your subtitle text here. You can take out the text if you don’t want the subtitle text. **Content** Enter your description text here. You can take out the text if you don’t want the description text. ## Image & Badge Manage your Image and Badge text here. **Image** Add an image from your Library here. **Use Image as background** Enable this option to use the image as the background so you can play around with the position and Height of the image and even add hover animation to the image. **Image Height** Change the height of the image by sliding the slider. **Background Image animation** Add animation to the image from 4 different animations and to even add more in upcoming updates. **Animation Speed (in ms)** Change the Hover Background Image Speed from here in ms. **Badge Text** Add text to the Badge here. You can take out the text if you don't want the badge text. You can also add a link to the badge under the link panel. ## Icon If you want to add an Icon to the Card you can do so here. **Use Icon** Enable this switch to enable the Use of Icon for the Card Module. Once you'll enable this you'll see so many Icons to choose from. ## Button **Button text** Add text to the button here you can always remove the text of the element which you don’t want. **Button URL** Add a URL to the button here. # Design Options ## Layout & Alignment **Layout** Change the type of layout to Stacked or Inline. * **Stacked** will place the image on top and content on the bottom. * **Inline** will place the content Inline which means Image and content both in the same line. * Layout type Inline Settings - If you’ll select this layout type you will be able to see these options: 1. **Width**: Change the width of the image 2.** Order Alignment**: Change the alignment of the image to Left(Places the image on the left side of the content) or Right (Places the image on the right side of the content). 3. **Horizontal Content Alignment** - This option will let you align the content to Top, Center or Bottom, most helpful while using the inline layout type. ## Image Make changes to the image here. **Image Overlay** Enable this switch if you want to add overlay color or icon or both to the image. **Overlay Color** Change the color of the overlay on the image to your own one. **Use Icon** You can enable this option if you want to show an icon in the overlay. And then can choose any icon from the Divi Icon Library and Change it’s color as well. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. 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 Image. ## Badge Change badge’s position color, background color and more here. **Position** Change the position of the badge anywhere on the Image. **Use Custom Position** Enabling this switch will let you position the badge on your own custom position on the image. **Background Color** Change the background color of the badge to your desired one. **Padding** Add padding to the badge here to expand it more. And you can play with the badge text by changing its font, size, color and weight and even add shadow to the badge text. **Add Rounded Corners, Border and Box Shadow to Badge** Here you can control the corner radius of the Image. 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 Image. ## Other Titles, Subtitle, and Body Texts And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels. ## Button Enable **Use Custom Styles for button** to add custom stylings to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button. # Advanced Options Use the advanced options to give your Card module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 7

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](https://divisupreme.com/features/divi-lottie-module/) to see live demo.

# Content Options
![content options.PNG](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/efKqxhL969/content%20options.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 8

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 9

Divi Icon List Module

Accepted Answer

Icon List module is like the Divi Blurb Module but more enhanced and well-aligned. If you want to create a list with icons then this module is helpful. # Content Options

**Adding Icon List** Click on + Add new Item to add your first Icon List . Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Icon List. See below for individual Icon List Item settings. After you add your first Icon List, you will see a gray bar appear with the title of your Icon List shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Icon List. # Design Options ## Text **Text Indent** Here you can add padding between the text and icon. And you can play with the text by changing its font, size, color and weight and even add shadow to the text. ## Icon **Icon Color** Here can define a custom color for the icon. **Icon Background** Here you can define a custom background color for the icon. **Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Icon Font Size** Here you can change the actual size of the Icon by increasing or decreasing the Icon font size. **Icon Rounded Corners** Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each. **Border** Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well. ## Image **Background** Here you can define a custom background color for the Image. **Image Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Image Width** Adjust the width of the image by sliding the slider or enter your own value to change the size of the image. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. 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 Image ## List Items **Alignment** Change the alignment of the Icon List Item to Right, Center or Left. **Vertical Alignment** The List can be placed either above, below or in the center of the module. **Direction** Here you can choose the direction of the Icon, if you'll select **Left to Right** the icon will be on Left and the text on Right. And same goes for the **Right to Left** option, text on left and icon on right. **Space Between** Add some Space between Icon List Items. **Background Color** Add a Background color to all Icon List Items here. **Padding** Here you can define custom padding for the icon list item. **List Item Rounded Corners, Border and Box Shadow** Here you can add Corner Radius, Border and Box Shadow to the List Item. # Advanced Options Use the advanced options to give your Icon List module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # Icon List Item Content Options

## Content **Text** Add text to the icon list here. **Use Icon** You can enable this switch to use Icon and browse from hundreds of Icon from Divi Icon Library. Disabling this switch will show (+) button to add an image to the list rather than Icon. ## Tooltip **Use Tooltip** Enable this switch to enable the Use of Tooltip and show a tooltip when Hover to Icon List item. **Content** After enabling the use of Tooltip, you'll see a field to enter the Content you want to show when Hover to Icon list item. # Icon List Item Content Options ## Icon **Icon Color** Here can define a custom color for the icon. **Icon Background** Here you can define a custom background color for the icon. **Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Icon Font Size** Here you can change the actual size of the Icon by increasing or decreasing the Icon font size. **Icon Rounded Corners** Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each. **Border** Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well. ## Image **Background** Here you can define a custom background color for the Image. **Image Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Image Width** Adjust the width of the image by sliding the slider or enter your own value to change the size of the image. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. 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 Image ## Tooltip **Placement** Here you can change the Placement of the Tooltip to: * Top * Right * Bottom * Left **Background Color** Here you can change the Color of the Tooltip. **Tooltip Padding** You can define a custom padding inside of the Tooltip content here. **Tooltip Max width** To increase the width of the Tooltip change the **max width** of the Tooltip here. And else you can play around with Tooltip text's font, size, color, weight and more. ## Text And you can play with the text by changing its font, size, color and weight and even add shadow to the text. # List Item Advanced Options Use the advanced options to give your Icon List Item 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 Floating Multi Images Module

Accepted Answer

A better and unique way to showcase multiple images to your visitors by using Floating Multi Images module. You can also change the animation either up/down or left/right.

# Content Options **+ Image Item** This is where you add image to your Floating Multi Images Module. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new image. See below for individual image settings. After you add your first image, you will see a gray bar appear with the title of your pin shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the image.

## Animation This is where you can change the floating animation effect.

**Floating Effect** There are two types of Floating Animation Effect. * Up Down * Left Right * See [Floating Multi Images here](https://divisupreme.com/features/floating-multi-images-module/). The left column with Up Down animation and the right column with Left Right animation. **Image animation delay interval (in ms)** You can add a delay for the Animation to start in ms here. **Animation Speed** Here you can change the speed of the Floating Images Animation. ## Image Item **Image** Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image. ### Link **Open in Lightbox** Enable this switch to open the Image in Lightbox/Overlay. # 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. ## Sizing Here you can change the placement and the width of the image. **Horizontal Align** Here you can change the horizontal alignment(left/right) of the image in percentage. **Vertical Align** Here you can change the vertical alignment(up/down) of the image in percentage. **Width** You can adjust the width of image. # 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 11

Divi Breadcrumbs Module

Accepted Answer

Display a hierarchical representation of navigation links and make your site’s navigation easier to follow, add breadcrumbs to your site to improve the user’s experience, and yeah It's good for SEO too.
![dsm-breadcrumbs-demo.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/S2ifBw5hVv/dsm-breadcrumbs-demo.png)

# Content Options
![dsm-breadcrumbs-content-option.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/kAzqTvHJT7/dsm-breadcrumbs-content-option.png)

### BreadCrumbs
**Show Custom Home**

Enable this option If you want to show a Custom Text for the Home Link.

**Show Home Icon**

Enable this option If you want to show an Icon along with the Text of Home link. You'll see an Icon Picker where you can choose any icon from Divi Icon Library for your Home Link.

**Custom Separator Icon**

Enable this option If you want to set a Custom Icon for the Separator. You'll see an Icon Picker where you can choose any icon from Divi Icon Library for your Separator.

# Design Options
### Alignment
Here you can change the Alignment of the Breadcrumbs, enable the responsive option to set a different alignment for Mobile Devices.
### Items
Here you can design the Items/Links in the Breadcrumbs, you can add Background Color, Padding, Border Radius, Box Shadow and more.

**Item Background Color**

Here you can define a custom Color for the Links/Items in the Breadcrumb.

**Bottome Gap**

Add a gap between Breadcrumbs Items/Links if the structure of the Breadcrumbs is longer than the space given to it.

**Items Padding**

Set a padding around the Item/Link from here, useful If you've added a Background color to the Item.

You can design the Item/Link color, font size and more.

**Rounded Corners and Borders**

Add Rounded Corners or Borders to the Item/Link here.

**Box Shadow**

Set a custom Shadow to show for the Links/Items in the Breadcrumbs. Enable Hover option to show shadow on Hover.

### Home Icon
Here you'll be able to design the Home Icon If you've enabled it.

**Icon Color**

Here you can change the Color of the Home Icon. If you've enabled the option (Show Home Icon) in the Content tab.

**Icon Size**

Here can define a custom size for the Home Icon.

### Separators
Here you'll be able to design the Separator in the Breadcrumbs.

**Separators Background Color**

Here you can define a custom Color for the Separator in the Breadcrumb.

**Bottome Gap**

Add a gap to Separator if you feel there is a need of it.

**Items Padding**

Set a padding around the Separator from here, useful If you've added a Background color to the Separator.

You can design the Item/Link color, font size and more.

**Rounded Corners and Borders**

Add Rounded Corners or Borders to the Separator here.

**Box Shadow**

Set a custom Shadow to show for the Separators in the Breadcrumbs.

### Current
Here you'll be able to set custom design values for the Current Item in the breadcrumbs.

**Item Background Color**

Here you can define a custom Color for the Current Links/Items in the Breadcrumb.

**Bottome Gap**

Add a gap between Breadcrumbs Current Items/Links if the structure of the Breadcrumbs is longer than the space given to it.

**Items Padding**

Set a padding around the Current Item/Link from here, useful If you've added a Background color to the Item.

You can also design the Current Item/Link color, font size and more.

**Rounded Corners and Borders**

Add Rounded Corners or Borders to the Current Item/Link here.

**Box Shadow**

Set a custom Shadow to show for the Current Links/Items in the Breadcrumbs. Enable Hover option to show shadow on Hover.

# Advanced Options
Use the advanced options to give your Breadcrumbs 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

SCRIPT_DEBUG and et_load_unminified_scripts issue

Accepted Answer

If you're getting this error Notice after Installing Divi Supreme than this guide will help you to solve this issue. This is a bug in Divi and we're hoping that it will be solved very soon.

> Error Message: Divi uses uncombined and unminified javascript files because "SCRIPT_DEBUG" constant on wp-config.php has been set to "true". Other plugin can enforce Divi to use uncombined and unminified javascript files by filtering "et_load_unminified_scripts" filter as well.

To Solve:
1. Deactivate Divi Supreme Plugin, If you've installed both Pro/Free than deactivate both.
2. Go to Divi -> Theme Options -> and Turn On "Minify And Combine Javascript Files" and Save the Changes.
3. Now Reactivate Divi Supreme Pro/Lite and you'll not face this issue.

Have a great day!

Question 13

Divi Image Module

Accepted Answer

The Supreme Image allows you to transform the image using 3D transformation. Rotate it like the way you always wanted without coding.

# Content Options **Image** Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image. ## Link **Open in Lightbox** Here you can choose whether or not your image will open in a Lightbox when clicked. If enabled, then your image will “zoom in” to their full size when clicked inside a modal window. This is a great feature for portfolios. **Link URL** Place a valid web URL in this field to turn your Image into a link. Leaving this field blank will simply leave your image as a static element. **Use as Video Popup** Enable this option if you want to show a video in overlay when user clicks on the Image. You'll then prompted to enter the URL of the Video you want to show in the overlay ## Transform & Rotation

**Perspective** The perspective CSS property gives an element a 3D-space. The strength of the effect is determined by the value. **Rotate Y** Defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. **Rotate X** Defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. **Rotate Z** Defines a transformation that rotates an element around the z-axis without deforming it. ## 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. ## Overlay **Image Overlay** If enabled, an overlay color and icon will be displayed when a visitors hovers over the image. **Overlay Color** Here define a color for the Overlay. **Use Icon** Enable this option if you also want to show an icon in the overlay of image when hover. **Overlay Icon Color** Here you can define a custom color for the overlay icon **Icon Picker** Select an Icon from Divi Icon library here. **Show overlay on Hover** Enabling this option will only show the Overlay when hover to image. You can disbale this option if you want to always show the Overlay. **Overlay Rounded Corners and Border** You can then add Corner Radius and Border to the overlay if you like ## Alignment **Image Alignment** Here you choose which direction your image floats within the column. You can float the image left, right or keep it centered. **Always Center Image On Mobile** Often times small images are more pleasing to the eye on mobile devices when they are centered. As columns break down, images that were aligned the left or right in smaller columns become orphaned when the columns break down and become 100% width. Enabling this column with force images to align to the center of the column on mobile without affecting the image alignment on desktop computers. # 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 14

Divi Supreme Button Module

Accepted Answer

Allow you to have two buttons with a separator text in between. 10 types of hover animation to choose from, image/video lightbox that supports: YouTube, Vimeo and Dailymotion! Not only that, we added URL link type that supports: URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp and Telegram! # Content Options Within the content tab, you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

## Text **Button #1 Text** Input your desired button #1 text. **Button #2 Text** Input your desired button #2 text. ## Links #### Link Type for Button #1 Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram) **Email** This option will show up only when using Email Type. Enter the Email Address for Button #1. **Download File** Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library. **CC** Enter the carbon copy email address for Button #1. **BCC** Enter the blind carbon copy email address for Button #1. **SUBJECT** Enter the default subject of the email for Button #1. **MESSAGE** Enter the default body message of the email for Button #1. **Phone Number** Enter the phone number to call for Button #1 (This will usually work on mobile phones) **SMS** Enter the phone number to SMS for Button #1 (This will usually work on mobile phones) **Facebook Messenger** ---**USERNAME** This option will show up only when using Facebook Messenger. Enter a person, page, or bot username. **Skype** ---**USERNAME** This option will show up only when using Skype. Enter the Skype username for Button #1. **ACTION TYPE** Choose the action type for Skype. You can choose to chat or call. **WhatsApp** ---**NUMBER** This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #1. **ACTION TYPE** Enter the default body message of the WhatsApp for Button #1. **Telegram** ---**TELEGRAM USERNAME** This option will show up only when using Telegram. Enter the Telegram Username. **MESSAGE** Enter the default body message of the Telegram for Button #1. **Button #1 URL** Input the destination URLfor your button #1. **Open as Image Lightbox** Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, URL options below will be ignored. **Open as Video Lightbox** Put the Video link on the Button #1 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. **Use Tooltip** This will show a tooltip on your Button #1 **TOOLTIP CONTENT** Input your desired tooltip content for button #1. **SHOW ARROW** If enabled, then an arrow will be added to the tooltip. **SIZE** The size of the tooltip from Small to Large. **PLACEMENT** Here you can choose the placement of the tooltip. Top, Right, Bottom and Left. **ANIMATION** Here you can choose different types of animation for your tooltip. **URL Opens** Here you can choose whether or not your link opens in a new window. #### Link Type for Button #2 Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram) **Email** This option will show up only when using Email Type. Enter the Email Address for Button #2. **Download File** Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library. **CC** Enter the carbon copy email address for Button #2. **BCC** Enter the blind carbon copy email address for Button #2. **SUBJECT** Enter the default subject of the email for Button #2. **MESSAGE** Enter the default body message of the email for Button #2. **Phone Number** Enter the phone number to call for Button #2 (This will usually work on mobile phones) **SMS** Enter the phone number to SMS for Button #2 (This will usually work on mobile phones) **Facebook Messenger** ---**USERNAME** This option will show up only when using Facebook Messenger. Enter a person, page, or bot username. **Skype** ---**USERNAME** This option will show up only when using Skype. Enter the Skype username for Button #2. **ACTION TYPE** Choose the action type for Skype. You can choose to chat or call. **WhatsApp** ---**NUMBER** This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #2. **ACTION TYPE** Enter the default body message of the WhatsApp for Button #2. **Telegram** ---TELEGRAM USERNAME This option will show up only when using Telegram. Enter the Telegram Username. **MESSAGE** Enter the default body message of the Telegram for Button #2. **Button #2 URL** Input the destination URL for your button #2. **Open as Image Lightbox** Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, URL options below will be ignored. **Open as Video Lightbox** Put the Video link on the Button #2 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. **Use Tooltip** This will show a tooltip on your Button #2 **TOOLTIP CONTENT** Input your desired tooltip content for button #2. **SHOW ARROW** If enabled, then an arrow will be added to the tooltip. **SIZE** The size of the tooltip from Small to Large. **PLACEMENT** Here you can choose the placement of the tooltip. Top, Right, Bottom and Left. **ANIMATION** Here you can choose different types of animation for your tooltip. **URL Opens** Here you can choose whether or not your link opens in a new window. ## Separator **Separator Text** Input your desired separator text, or leave blank for no separator text in between the both buttons. **Make Separator Text Fullwidth On Mobile** This will make the Separator Text as fullwidth instead of inline-block on mobile devices. **Remove Separator Text On Mobile** This will remove the Separator Text on mobile devices. ## 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. ## Alignment Here you can choose to have your Button Wrapper aligned to the left, right or center. ## Lightbox If you've added an Image/Video Overlay to the button, then here you can change the settings of the Overlay. **Overlay color** Choose any color for the Overlay **Max Width** Here you can choose the Maximum width of the Overlay. ## Separator Text Here you can style the Spearator text's font, size, color and more. ## Tooltip Text If you've added Tooltip to the buttons you can easily style it here. You can have different styling for each button by going to each tab. You can style the Tooltip text's font size, color, and much more. ## Sizing **Separator Gap Text** The gap spacing between both buttons. ## Button One This is where you can style your Button #1 the same way you style other button in Divi. ## Button Two This is where you can style your Button #2 the same way you style other button in Divi. ## Animation

**Button Hover #1 Animation** Here you can select one hover animation from the dropdown list for Button #1. You can select any from over 29 Animations. The Lite version of Divi Supreme will have only few of them. **Button Hover #2 Animation** Here you can select one hover animation from the dropdown list for Button #2. You can select any from over 29 Animations. The Lite version of Divi Supreme will have only few of them. **Button Icon Hover #1 Animation** If you've added Icon to the Button #1 and disable the switch called "**Only Show Icon on Hover for Button One**" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations. **Button Icon Hover #2 Animation** If you've added Icon to the Button #2 and disable the switch called "**Only Show Icon on Hover for Button Two**" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations.

Button Icon hover animation - Divi Supreme.png

# 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 visibility on certain devices.

Question 15

Divi Responsive Viewer Extension

Accepted Answer

Introducing Responsive Viewer Extension for Divi. Want to create even more responsive websites with Divi then this extension is made for you. ## Breakpoint Presets Preview Save your precious time and preview all your responsive design in different breakpoint with just a few clicks. ## Custom Breakpoint Preview Besides choosing from the presents, You can also set your own custom responsive sizes right in the Divi Builder. ## Perfect Responsive It’s time to make your mobile Divi sites even better. Preview your beautiful design for iPhone, iPad, Android devices or even the biggest or smallest mobile devices.

## Before you start using Make sure that the extension is enabled from Divi Supreme’s Settings page for it to work.

## How it Works? After enabling the extension you’ll now be able to see more responsive sizes when you’re editing your page using Visual Builder, Backend Divi Builder, and Theme Builder. When you’ll go to Mobile view you’ll now see some more screen sizes and a field where you can set your own custom size.

The size of the Mobile view by default in Divi was 479px but using this extension you can change them to 375px, 320px or even small or large, Helping you to create even more Responsive sites with Divi. If you want to add a custom value like 350px just put it in the Field and Press Enter. Make sure you only put the value not px.

So there you go that’s how easy it is to use this extension, Saving your time to go to the Browser Inspect tool every time you’re creating your page. We hope that you’ll found it useful for your next project. ## Backend Builder Preview Here’s a quick look at how it Looks like in the Backend Divi Builder. If you love to use the Divi Backend builder that don’t worry this extension also work perfectly there.

## Theme Builder Preview This extension also works with the Divi’s Theme Builder helping you to create more responsive Header, Footer, Archive pages and more. Here’s a quick look

Question 16

How to Create Facebook APP ID

Accepted Answer

## Setup Facebook App ID You will need your own Facebook account in order to create the Facebook App ID so ensure that you have created a free account by going to [Facebook](http://www.facebook.com) first before starting this guide. ### Step 1: Login to Facebook and go to developers site Ensure you are logged into your Facebook account and go http://www.facebook.com/developers ### Step 2: Create Facebook Application To create your App ID, [head to the Facebook Developers site](https://developers.facebook.com/apps/). As long as you’re logged into your regular Facebook account, you should see the button to Add a New App.

### Step 3: Give it a name, like “Divi Supreme” and click Create App ID:

### Step 4: Navigate to Settings -> Basic

Fill up the forms required such as Domain(Make sure it’s your domain), Privacy Policy URL, Terms of Service URL and etc. Then Click Save Changes ### Step 4: Obtain Facebook APP ID

Before copying the APP ID, make sure you also change the status to LIVE. That’s all!

Question 17

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.
	
**-Read More Link Target**
	
From here you'll be able to change the Link Target to open in the Same Tab or in a New Window.
	
**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

**Carousel Direction**

You can change the Carousel Content Direction from here, It can be either "Left to Right" or "Right to Left".

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

**Align Button Vertically**

Enable this option, If you'd like to vertically align the button. This option will be shown If you've enabled the "Equal Height" option in the Carousel Settings Panel. You can align the button to Top, Center or Bottom from here.
# 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 18

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 19

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 20

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!

Divi Supreme

Need Help?