Question 1

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 2

Divi Blob Shape Image Module

Accepted Answer

Fan of Blob Shaped Images? We got your back! Using Divi Supreme Blob Shape Image Module you can easily create Blob Images in Divi without any hassle. Add Blob Shapes from 13 Different styles, add overlay content, solid color & gradient overlay, and much more. ![blob shape image demo image.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/pYkPTQ33pR/blob%20shape%20image%20demo%20image.png) # Content Options blob shape image moduel - content options.png

blob shape image moduel - content options.png

**Image** Insert your Image here. **Blob Shapes** Choose any Blob Shape from 13 different Shapes. ### Overlay Content If you want to show content on the Image as an Overlay, then you can do so here. **Title** Add your Title here for the Overlay Content. **Description** Your description for the Overlay Content goes here. **Show Content on Hover** Enable this option If you like to show the Overlay Content on Hover. # Design Options blob shape image module - Design options .png

blob shape image module - Design options .png

### Blob Image Settings Blob Image is placed as a Background so you can change the Size & Position of the Image easily from here and make some other changes. **Size** Change the Size of the Image from here to "Cover" or "Initial". **Position** Change the position of the Image from here the way you like. **Blob Image Height** Change the Height of the Image from here If you need to. And else you can add Border, Border Radius and Box Shadow to the Image If you like. ### Overlay You can also add Overlay Color or Gradient to the Image from here. **Use Overlay** Enable this Option If you'd like to add an overlay to the Image. And It will ask you to change the Color of the Overlay. **Use Gradient Overlay** Enable this option If you'd like to have a Gradient Overlay. Once enabled it will show different settings to change the Angle and Offset of the Gradient Color and you'll be able to have a Gradient Overlay as you desire. ### Overlay Text Here you'll be able to change the Styling of the Overlay Title, Description and add Spacing to the Overlay Content. Open the tab you'd like to change the styling of and make the changes you like. In the Spacing tab you'll be able to add Spacing around the Content. # Advanced Options Use the advanced options to give your Blob Shape Image module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Question 3

Divi Post Carousel Module

Accepted Answer

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

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

**Post Type**

Choose Post type for the Carousel here. For the Blog you can use the [Blog Carousel Module](https://divisupreme.com/features/divi-blog-carousel-module/).

**Post Count**

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

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

**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 Settings
	
**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 Post 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 4

Divi Dual Heading Module

Accepted Answer

Are you looking for adding Attractive and Modern Headings to your Divi Site then welcome the Supreme Dual Heading Module to Divi Builder. Using this you can easily create beautiful Heading that attracts visitors.

# Content Options

In the Content tab, you’ll find three Text Input options (Before, Middle and After) and you can have separate designs for each. ## Dual Heading Text **Before Text** Here you can put the Before Text. **Middle Text** Here you can put the Middle Text. Make sure to add spacing before and after the text in the text you’ll write. **After Text** Here you can put the After Text. # Design Options Every one of the text you’ll enter in Before, After and Middle Text field can be designed separately in the Design Options.

## Heading Settings **Heading HTML Tag** You can change the Heading tag of all the texts (Before, Middle and After) from H1 to H6 ## Main Text In this Design Option, you can change the font, color, weight and size, etc of all the texts (Before, Middle and After) ### Before, Middle and After Text You can easily style the Before, Middle and After text in the same way you style text in the Text Module(came with Divi Builder). And we’ll only discuss those options which are added by Dual Heading Module to style the text’s background, padding and stuff. **Background Color**: Here you can add color to the Background of the Before, Middle and After text. **Margin and Spacing**: Add some Margin and Spacing to the Before, Middle and After text, if you want to add some spacing on both sides of Before, Middle and After Text. **Display**: You can change the display property of the text to Inline Block and Block. **Inline Block** displays the text in the same line as other texts. **Block Displays** the text by making it a block means other texts will not be displayed in the same line. And you can play around with Before, Middle and After text by adding different colors, text-shadows, border, border-radius and more to each text. # Advanced Options Use the advanced options to give your Dual Heading module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 5

Divi Icon Divider Module

Accepted Answer

Create an organized and unique Icon Divider with Supreme Icon Divider Module. With many border styles to choose from. You can put an icon in-between the Dividers or align them to suit your design.

# Content Options **Use Icon** When using Icon Divider, you can choose to either use an Icon or and Image with your text. If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customize your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead. **Icon** If you chose “yes” for the “Use Icon” setting, then this option will appear. This options presents you with a list of available icons that you can use with your Perky Animate text. Simply click on the con that you would like to use and it will appear in your Icon Divider. **Image** If you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. However, your image will never scale larger than its original upload size. The height of the Icon Divider image is determined by the aspect ratio of your original image, so making all of your Icon Divider images the same height is a good idea if you are placing them side by side. ## Background **Background Color** Here you can choose a background color for your module. **Background Image** Here you can choose a background image for your module. ## Admin Label By default, your Supreme Icon Divider text module will appear with a label that reads ‘Supreme Icon Divider’ in the builder. The Admin Label allows you to change this label for easy identification. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

## Image & Icon **Icon Color** If you chose “yes” for the “Use Icon” setting, then this option will appear. This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color. **Circle Icon** If you chose “yes” for the “Use Icon” setting, then this option will appear. This options allows you to place your icon within a colored circle. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border. **CIRCLE COLOR** If you chose “yes” for the “Circle Icon” setting, then this option will appear. Here you can pick a color to use for your circle. This color is independent from your Icon color selected earlier. You icon, in it’s color, will appear inside this a circle with the color you select here. **Show Circle Border** If you chose “yes” for the “Circle Icon” setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color. **CIRCLE BORDER COLOR** If you chose “yes” for the “Show Circle Border” setting, then this option will appear. Here you can adjust the color of the circle border. **Use Icon Font Size** If enabled, you can input a custom size for the icon that is displayed. ## Alignment This controls the divider alignment of the Icon Divider. ## Color You can choose your desired color from the color picker for the divider color. This will be apply a color to the divider only. ## Styles Here’s where you can style the divider appearance. **Divider Style** Here you can choose your divider style such as solid, dotted, dashed and etc. **Divider Position** This controls the vertical alignment of the Icon Divider. ## Sizing Here’s where you can style the Text Divider appearance. **Divider Weight** You can input a custom weight for the Divider which also refers to the thickness of the line. **Icon Gap** The Gap space between the icon and the divider. # 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 6

Divi Tilt Image Module

Accepted Answer

The Supreme Tilt Image allows you to create a unique and cool images. An interactive parallax tilt effect that responds to mouse move. Apply an Overlay Icon or Text to the image for better visibility.

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

**Disable on Mobile** This will disable the Image Tilt feature for Mobile Devices. **Perspective** Transform perspective, the lower the more extreme the tilt gets. **Scale** Scale on hover. 2 = 200%, 1.5 = 150%. **Max Rotation** The Max Tilt Rotation. The lower the less rotation the tilt gets. **Speed** The Speed of the enter/exit transition. **Use Glare** If enabled, it will have a “glare” effect on hover. **GLARE** The glare opacity. **Reverse** This will reverse the tilt direction. **Use 3D Pop Out Effect** This will create a pop out effect between the image and the overlay. **OVERLAY 3D POP OUT** The distance between the image and the overlay. ## 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. ## Overlay Here you can have overlay text/icon on top of the image. **Use Icon** If enabled, an overlay icon will be displayed over the image. **Overlay Title** Enter the title for the overlay. **Overlay Content** Enter the Content for the overlay. **Show on Hover** If enabled, overlay text will only show up on hover. ## 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 **Overlay Icon Color** Here you can define a custom color for the overlay icon **Overlay Color** Here you can define a custom color for the overlay. **Use Icon Font Size** If enabled, you can input a custom size for the icon that is displayed. # 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. ## Overlay Text Here you can style of overlay title and content such as fonts, colors and the alignment. **Text Vertical Alignment** You can change the vertical alignment of the Overlay text here. # 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 7

Divi Text Divider Module

Accepted Answer

Create an organized and beautiful to read headlines with Supreme Text Divider Module. With many border styles to choose from. You can also put a text in-between the Dividers or align them to suit your design.

# Content Options **Divider 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 **Background Color** Here you can choose a background color for your module. **Background Image** Here you can choose a background image for your module. ## Admin Label By default, your Supreme Text Divider text module will appear with a label that reads ‘Supreme Text Divider in the builder. The Admin Label allows you to change this label for easy identification. # 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.

## Color You can choose your desired color from the color picker for the divider color. This will be apply a color to the divider only. ## Styles Here’s where you can style the divider appearance. **Divider Style** Here you can choose your divider style such as solid, dotted, dashed and etc. **Divider Position** This controls the vertical alignment of the Text Divider. ## Text **Text Alignment** This controls the text alignment of the Text Divider. ## Divider Text You can change the Heading level of the Divider text here. And then you can style it the same way you style text in Divi. ## Sizing Here’s where you can style the Text Divider appearance. **Divider Weight** You can input a custom weight for the Divider which also refers to the thickness of the line. **Text Gap** The Gap space between the main text and the divider. **Height** Define how much vertical space you would like your text divider module to create (in pixels). # 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 8

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 9

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 10

Divi Star Rating Module

Accepted Answer

A must for all Divi sites and website owners. An important feature for many in order to get trust from your visitors. The star rating module is built with Google Schema in mind, and it’s fully customizable!

# Content Options

**Rating Scale** Default at 0 – 5. Choose a scale from 0 to 5 or 0 to 10 **Rating** Here you can assign the rating based on the scale chosen. **Title** Enter the title for the rating. **Title Inline Position** From here you'll be able to position the Title to "left" or "right" of the Stars, If in any case you need to. **Display Type** Here you can choose whether you want your Title to be stacked or to be displayed as inline. **Show Rating Number** This will show the rating number text after the star icons. # 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. ## Stars **Size** Change the size of the stars **Gap** Control the gap between each star. **Color** Choose the color of the star icons. ## Title **Gap** Here you can control the space between the title and the star icons. And else you can play around with the Title text by changing Font, Size, Weight and more of it. ## Rating Number Text Here you can play around with the Rating Number text by changing Font, Size, Weight and more of it. This is the text that's shown after the Rating Stars only when the "Show Rating Number" is enabled in the Content tab. # 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 Text Badges Module

Accepted Answer

This will show a badge before or after the text. A great way to show highlighted/important text badge.

# Content Options **Main 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. **Badges Text** This field is where you can enter the badge of your text. **Badges Placement** Here you can define whether the badge should be before or after the main text.

## Background **Background Color** Here you can choose a background color for your module. **Background Image** Here you can choose a background image for your module. ## Admin Label By default, your Supreme Text Badges text module will appear with a label that reads ‘Supreme Text Badges’ 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. ## Main Text You can style the Main text here. You can play around with changing the font, size, color, weight and more of the Main text. ## Badges Text Here’s where you can style the badges appearance. **Background Color** You can choose your desired color from the color picker for the badge background color. This will be apply a background color to the badge only. **Gap** The Gap space between the main text and the badge. # 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

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 13

Divi Animated Gradient Text Module

Accepted Answer

Create a beautiful and stunning animated gradient text on your Divi website.

# Content Options

## Content **Animated Gradient Text** Put your text here which will have an animated gradient. ### Animated Gradient Settings **Gradient Direction** Change the direction of the gradient by entering values or sliding the slider. **Animation speed (s)** Change the Speed of animation here. # Design Options ## Heading Settings **Heading HTML Tag** Change the tag of the heading from H1 to H6. ## Animated Gradient Text Here you’ll find 4 options for choosing colors which means you can have a really cool Animated Gradient Text with so many colors. But If you want to have two colors then put the same color in #1 Gradient Color and #2 Gradient Color and repeat it for the other two as well. And you can play with color Gradient Text size, weight, Font, etc. # Advanced Options Use the advanced options to give your Gradient 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 14

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 15

Divi Text Notation Module

Accepted Answer

To grab the attention of your visitors, you need something more appealing. Put the focus on the important part of your text with an animated hand-drawn look and feel. 7 types of styles to choose from.

## Content Options text notation Module conent options.PNG

**Before Text** Here you can specify anything you want to show Before the Notation Text. **Notation Text** Add the Notation text here, the Animation effects will be added to this Text. **After Text** Here you can specify anything you want to show After the Notation Text. ### Notation Settings **Type** Choose the Type of the Animation around the Text here from 7 different Animation effects. * Underline * Box * Circle * Hightlight * Strike Through * Crossed Off * Bracket **Color** Choose the Color of the Notation Animation here. **Stroke Width** Change the width of the annotation Stroke here. **Iterations** By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations. **Animate in Viewport** Here you can set a custom value for the Animation to play at a specific Viewport. **Delay** Add a delay to the Notation Effect to start after the time you'll set. # Design Options ### Heading Settings **Heading HTML Tag** Here you can change the Heading HTML Tag of the Notation text and Before/After Text. ## Main Text You can play around with the text Design settings here. The changes you’ll make here will be applied to all the texts i.e Notation Text and Before/After Text. ## Before, Notation and After Text You can easily style the Before, Notation and After text in the same way you style text in the Text Module(came with Divi Builder). And we’ll only discuss those options which are added by Notation Text Module to style the text’s background, padding and stuff. **Background Color**: Here you can add color to the Background of the Before, Notation and After text. **Margin and Spacing**: Add some Margin and Spacing to the Before, Notation and After text, if you want to add some spacing on both sides of Before, Notation and After Text. **Display**: You can change the display property of the text to Inline Block and Block. * **Inline Block** displays the text in the same line as other texts. * **Inline** is very similar to Inline Block but it helps your text to remain on the same line when added Padding to the Before, Notation and After Text. Margin will not work with this Display Property. * **Block Displays** the text by making it a block means other texts will not be displayed in the same line. And you can play around with Before, Notation and After text by adding different colors, text-shadows, border, border-radius and more to each text. # Notation Text Module Advanced Options Use the advanced options to give your Notation Text 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 Requirement

Accepted Answer

**Minimum Requirements**

* WordPress 4.5 or greater
* PHP version 7.0 or greater
* MySQL version 5.0 or greater

**We recommend your host supports**

* PHP version 7.0 or greater
* MySQL version 5.6 or greater
* WP Memory limit of 64 MB or greater (128 MB or higher is preferred)

Divi Supreme recommend and required the following:

* Divi Theme >= version 4.1
* Extra Theme >= version 3.1
* Divi Builder >= version 3.1
* PHP version >= 7.0

Question 17

License Key Activation Issue

Accepted Answer

This happens when you move to a new hosting or deleted the Plugin without deactivating License. To solve this, simply login to your Divi Supreme Account > Orders > License Manage and deactivate that domain you're having problem with currently.

Then go to your WordPress Admin Dashboard -> Divi Supreme -> License and activate the license again.

That's it. Good luck.

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

General Info - Divi Extensions

Accepted Answer

Divi Supreme features a huge collection of custom creative modules and extensions that can be used in the Divi Theme, Extra Theme and the Divi Builder. We will keep on adding and enhance Divi Supreme Pro where you can find extra features for Divi to help you build better websites.

Currently, the available extensions are listed below:

* Divi Popup
* Divi Scheduled Element
* Divi Easy Theme Builder
* Divi Responsive Viewer
* Read More
* Divi Library Shortcodes

# Enable Extensions
To enable Divi Supreme Extensions, login to your WordPress admin panel, then on your admin menu, look for Divi Supreme Pro here you can then choose which extension you'd like to use just enable it to start using it.
<img alt="Divi Supreme's Extensions.png" src="https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Bz6IBRbZ3i/Divi%20Supreme%27s%20Extensions.png" align="center">

Question 20

Divi Supreme Pro Plugin Update

Accepted Answer

# Updating Plugin
<img alt="auto-update.png" src="https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/WYPQbzUo2T/auto-update.png" align="center">
If you activate your license key, you will receive an auto update via your WordPress. You can also FTP to your Divi Supreme folder and replace the previous files with new files you extracted on your remote server. For those do not have auto update via WordPress, either you did not activate your license or your license has expired.

Divi Supreme

Need Help?