Question 1

Divi Supreme Masonry Gallery Module

Accepted Answer

With Divi Supreme’s Masonry Gallery Module you can easily showcase your Images in an interesting way. Showcase your Portfolio in style whether you’re Web Designer, Photographer, etc this Module is made for you.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/NO90dSfCVX/dsm-masonry-gallery-content-options.png (dsm-masonry-gallery-content-options.png)Gallery

Add Images from Media Library to show in the Gallery.

Settings

Use Overlay

This will enable the Overlay on each image Hover and will use the "Title" and "Description" option from Media Library. You'll need to add Title and Description to each image in Media Library to show the Overlay.

Use Lightbox

Enable this option If you want to open each Image in Lightbox/Popup and then you'll be able to switch the Image by clicking on Arrows in the Lightbox.

Use Horizontal Order

Enable this option if you want to change the Images to Horizontal Order.

Use Zoom on Hover

Enable this option to add a cool Zoom effect on Hover on each image in Gallery.

Design Options

Grid Layout

Here you'll be able to style the Images in the Gallery.

Columns

Here you can change the number columns you want to show for the Masonry Images. You can enable the Responsive Option to set column number for Mobile Devices.

Columns Gaps

Increase or decrease the Value to change the Column Gap.

Grid Items

Grid Item Rounded Corners and Border

Here you can add Rounded Corners and Border to each Image in the Gallery.

Grid Item Box Shadow

Set a custom Box shadow for each Image in the Gallery.

Overlay

You can Design the Overlay text here.

Show Image Overlay Title

Disable this option If you don't want to show the Image Overlay Title.

Show Image Overlay Description

Same goes here, disable it If you don't want to show Overlay Description.

Overlay Color

You can change the color of the Overlay here.

And further you can style the Title/Description text, You can change Font, Size, Weight and much more of Title and Description text.

How to change the Overlay's title and description?

You can edit the image title and description via the WordPress Media Library. Simply just put in your custom Title and Description text into the input field. This will shows up in the Overlay.

You can also set a custom URL to each image by inserting a custom URL in the "LINK URL" input field under "Divi Supreme Modules Only".

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Te5CaSuPBf/masonry%20galleryimg-min.png (masonry galleryimg-min.png)

Advanced Options

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

Question 2

Divi Block Reveal Text Module

Accepted Answer

Create engaging and fresh interactions using Divi Block Reveal Text Module. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers text underneath. 4 types of animation to choose from.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/p5EeVuPp4z/showcase-block-reveal-text-module.gif (showcase-block-reveal-text-module.gif)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/cGC7i2lcIF/block-reveal-text-module-content-options.png (block-reveal-text-module-content-options.png)

Block Reveal Text

Here you can enter the text which will be revealed with a nice animation.

Block Reveal Animation

Block Reveal Animation style

Here you can set Animation Direction. You can select where it will start from and where it will be ending. You Have Four Options to choose from:

Left to Right
Right to Left
Top to Bottom
Bottom to Top

Block Reveal Color

Here you can change the color of the Block which will be shown first with an animation.

Delay

Adjust the Delay of the Block Reveal Animation here.

Animate in Viewport

The Text Animation will only be shows at a specific Viewport.

Design Options

Text

This is where you can style the text which you’ve entered in the content tab. You can design it the same way you design every text module in Divi.

Heading HTML Tag

Here you can change the HTML Tag of the Text from H1 to H6.

Advanced Options

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

Question 3

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.

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

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

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/UjKuUuhh7F/dsm-tilt-image-458x1024.png (dsm-tilt-image-458x1024.png)

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 4

Fixing Common Issues while using Divi Supreme

Accepted Answer

This guide contains solutions for some of the most common design issues raised to us by our customers.

1. Divi Supreme Dynamic Assets

If you're noticing that the design of your website isn't displaying as it should be, don't worry! We've included a handy "Compatibility" option in Divi Supreme -> Misc to help resolve any issues you may be facing with Dynamic Assets. Simply enable the option and you should see your content properly displayed on the frontend.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Kk98TJjf05/2023-05-27%20at%2020.40.08.png (2023-05-27 at 20.40.08)

You may also try to disable both the options and see If your issue is fixed.

2. Caching Plugins

If your design doesn't appear correctly, chances are the Caching/Performance plugins you are using are the cause. Go ahead and disable any caching plugins you have installed in order to check if this solves the issue. After that, look for the setting which is likely causing it to appear incorrectly - disable it if possible. If you cannot find it, it may be best to reach out to the plugin's support team for help.

For Siteground Users, one option which can often cause issues is the "Defer JS" option in Plugin Settings -> Frontend -> JS. You can try to disable this and see if that fixes the problem.

3. Not Using the Latest Version

It is always best to ensure that you are using the latest version of Divi Theme and Divi Supreme Pro. To view the current version of the Divi theme, head to Dashboard > Appearance. To view the version of Divi Supreme Pro, simply go to Dashboard > Plugins, where the version number will be listed.

For both Divi and Divi Supreme, view the changelogs and ensure you have the latest version installed.

Divi Changelog: https://www.elegantthemes.com/api/changelog/divi.txt

Divi Supreme Pro Changelog: https://divisupreme.com/divi-supreme-pro-changelog/

Hope this helps to solve any issue you may facing.

Question 5

Divi Business Hours Module

Accepted Answer

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

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/N7sgAnVHGu/Showcase.png (Showcase.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/DTuF0iZTkT/dsm_bussiness_hours_module.png (dsm_bussiness_hours_module.png)

Business Hours

You can make Business hours of your choice just click on +Add New Item and then Choose Days and Time of your Business. You can add as many items you want by clicking on the +Add New Item button.

Design Options

Every Divi module has a long list of design settings that you can use to change just about anything.

In the Design Option, you can style your module in different ways that came by default with Divi but some options that are added by Divi Supreme plugin are these:

Day Text:

This is where you can style the Day text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Day Text looks.

Time Text

This is where you can style the Time text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Time Text looks.

Separator

You can add a separator line between Day and time from 8 different selections.

Weight: You can change the weight of the line i.e 2px

Color: You can change the color of the line

Gap Spacing: You can change the gap spacing between the Day and Time Text.

Divider

You can add a Divider underneath every Business hours item.

Spacing

Item Spacing: This is where you will choose how much spacing should be added to business hours. Padding is the space added inside of your business hours items.

Advanced Options

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

Business Hours Item Content

Text

Time

Here put the time period you want to set for your business.

Day

Here put the Day name.

Business Hours Design Options

In the Design option, you can change font, colors and many more of a particular item.

Day Text:

This is where you can style Day text. As mentioned before.

Time Text

This is where you can style the Time text. As mentioned before.

Business Hours Item Advanced Options

Use the advanced options to give your Business Hours Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling.

Question 6

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 7

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.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/PCIZhhEfzY/showcase-9-1024x605.png (showcase-9-1024x605.png)

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 8

Divi Facebook Comments Module

Accepted Answer

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

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/hPsP6Du64r/dsm-facebook-comments-659x1024.png (dsm-facebook-comments-659x1024.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/hPsP6Du64r/dsm-facebook-comments-659x1024.png (dsm-facebook-comments-659x1024.png)

APP ID

Enter the Facebook App ID here. You can go to https://developers.facebook.com/ and click on Create New App to get one. It is a must to provide a Facebook App ID which required to use this module.

Page URL

Get the Comments of the Current Page, or for a Custom URL. This can be other page URL but it’s best to use it on your current page URL to keep track of the Facebook comments related to your page.

Number of Posts

The number of comments to show by default. The minimum value is 1.

Color Scheme

The color scheme used by the comments plugin. Can be “light” or “dark”.

Order by

The order to use when displaying comments. Can be “social”, “reverse_time”, or “time”. The different order types are explained in the FAQ

Social – This is also known as “Top”. The comments plugin uses social signals to surface the highest quality comments. Comments are ordered so that the most relevant comments from friends and friends of friends are shown first, as well as the most-liked or active discussion threads. Comments marked as spam are hidden from view.Time – Comments are shown in the order that they were posted, with the oldest comments at the top and the newest at the bottom.Reverse Time Comments are shown in the opposite order that they were posted, with the newest comments at the top and the oldest at the bottom.

Admin Label

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

Design Options

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

Advanced Options

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

Question 9

Divi Facebook Feed Module

Accepted Answer

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

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/c3dV3Y5e7F/showcase-3-768x1017.png (showcase-3-768x1017.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/MXvfmIP55F/dsm-facebook-feed-653x1024.png (dsm-facebook-feed-653x1024.png)

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

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

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

Step 2: Create Facebook Application

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

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/bzA0MebVJB/dsm-facebook-app-name-1024x468.png (dsm-facebook-app-name-1024x468.png)

Step 4: Navigate to Settings > Basic

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/4GnFERpfic/dsm-facebook-app-basic-1024x626.png (dsm-facebook-app-basic-1024x626.png)

Step 5: Obtain Facebook APP ID

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Wxuu6Zqwwq/dsm-facebook-app-id-1024x277.png (dsm-facebook-app-id-1024x277.png)

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

Question 10

Divi Text Path Module

Accepted Answer

Adding text to a shape is a great way to add interest and intrigue to your pages. But until now, doing that has been difficult and time consuming. Not anymore! With the Divi Supreme Text Path Module, you can attach your text to any shape in just a few clicks. Choose from a predefined list of shapes, or upload your own, and get creative with your text placement.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/SCZ7tY9ZFk/2022-05-24%20at%2019.10.51.png (2022-05-24 at 19.10.51)

General

Text

Here you can add your Text to show in the Path.

Path Type

Here you can choose your Path type from 6 different types and you can also select "Custom" to show Custom Path. You'll have the ability to add your Custom SVG Code.

Text Direction

If you'd like to change the Direction of the Text, you can do so here.

Show Path

Enable this option If you'd like to show the Path as well.

Design Options

Alignment

Here you can change the aligment of the Module.

Text Path

Here you can style & adjust your Path the way you like.

Path Color

If you've enabled "Show Path" in Content Options, then you can change the color of the path from here.

Path Width

You can change Path width from here, If "Show Path" option is enabled.

Size

Change the Size of the Text Path from here, enable responsive option to change for mobile devices.

Rotate

If you want to rotate your Text Path, this is the place for that.

Word Spacing

Want to add Spacing between words, you can adjust that here.

Starting Point

Here you can adjust the Starting Point to where it looks good to you.

Title Text

Here you can change the font, color, weight and size, etc of the Text in the Path.

Advanced Options

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

Question 11

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

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/2B6t9qixbg/showcase-10-1024x583.png (showcase-10-1024x583.png)

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 12

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.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/YsZdQLMR6S/dsm-text-badges-711x1024.png (dsm-text-badges-711x1024.png)

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

Gap

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 13

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

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/einuPIZNLD/icon-list-content-options.png (icon-list-content-options.png)

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

Layout

Here you'll be able to change the Layout of the Icon List to either Vertical or Horizontal.

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

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/7pB7Zvimc4/Icon-List-Item-Content-Options.png (Icon-List-Item-Content-Options.png)

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

Divi Supreme Random Image Module

Accepted Answer

Important: For Random Images to work optimally, you'll need to turn off caching on the page that the module is implemented on.

The Divi Supreme Random Image module streamlines the display of a random image on your website. Upload images to the module, and it will automatically select and display a random image. This feature offers an effortless way to showcase a variety of images without the need for manual selection.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/rNNyLS25P6/2023-05-28%20at%2015.57.30.gif (2023-05-28 at 15.57.30)

Content Options

Images

Here you can upload your Images that you want to ranomly show on your page.

Image Size

Choose the Size of the Image here or leave it to "Full Size".

Link

Use Image Link URL

Enable this option If you'd like to enable URL for each image. See below to learn how to add a URL to each image.

Lightbox

Here you can choose whether you want to open the image in Lightbox, simply enable the option If you want to open the image in lightbox.

Image Size

You can also select a different size for the image in lightbox only or leave it to "Full Size" to show the full image.

Design Options

Overlay

Image Overlay

Enable this option If you'd like to show an Image Overlay.

Show Overlay on Hover

If you only want to show the Overlay on hover, enable this option.

Overlay Icon Color

Here you can change the Color of the icon that shows in the Overlay.

Overlay Color

Here you can change the color of the Overlay itself, use the transparency slider to make a transparent overlay effect.

Icon Picker

Choose the Icon to show in the Overlay here.

Image

Here you can style & customize the Image by adding Border Radius, Border, Box Shadow, Filters and more.

Advanced Options

Use the advanced options to give your Random 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 15

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 Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Fg2LhBxX1l/content-option-1.png (content-option-1.png)

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

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/mTO5VXFfgr/design-option-2.png (design-option-2.png)

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 16

Divi Glitch Text Module

Accepted Answer

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

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

Content Options

Glitch Text

This field is where you can enter the content of your text. Text content spans the full width of the column that it is in.

Glitch Effect

This is where you can choose different types of animation for the glitch effect.

Background

Background Color

Here you can choose a background color for your text module.

Background Image

Here you can choose a background image for your text module.

Admin Label

By default, your glitch text module will appear with a label that reads ‘Glitch Text’ in the builder. The Admin Label allows you to change this label for easy identification.

Design Options

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

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

Advanced Options

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

Question 17

Divi Gradient Text Module

Accepted Answer

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

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/RLJReiMvwo/showcase-12-1024x449.png (showcase-12-1024x449.png)

Content Options

Gradient Text

Background

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

Design Options

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

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

Advanced Options

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

Question 18

Divi Shuffle Letters Module

Accepted Answer

Add a nice and cool text effect to your website using the Shuffle Letters Module for Divi. Write the text that you want to show and it will shuffle letter by letter in the random text before revealing. You can configure settings such as shuffle speed, duration and the random text with just a few clicks.

Content Options

Text

Before Text

Add text here before the Shuffle text.

Shuffle Text

Add text here which will be shown after the shuffling effect.

Shuffle Text on a new line

Enable this option if you want to put the shuffle text below the before text or in a new line.

After Text

Add text here which will be shown after the Shuffle text.

After Text on a new line

Enable this options if you want to put the After text below the Shuffle Text or in a new line.

Shuffle Letters Options

Shuffle Speed (in ms)

Adjust the speed of the Shuffle Animation by sliding the slider in milliseconds.

Duration (in s)

Change the duration of the Shuffle Animation so the Shuffle text will appear after the time duration you set.

Overwrite Random Shuffle Text

Enter your text here, only if you want to have your own random character text. Use without space e.g ‘Shuffle Text’.

Design Options

Before, Shuffle and** After Text** Stylings. You can play around with changing the color, size, weight, and font and more of the Before, Shuffle and After Text.

Advanced Options

Use the advanced options to give your Mask 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 19

Divi Scroll Image Module

Accepted Answer

The Divi Scroll Image Module allows you to add images on your Divi website which scroll up or down when the user hovers over the image. Scroll it like the way you always wanted without coding.

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

Content Options

Image

Add an Image here from your Media Library.

Link

Open in Lightbox

When you’ll click on the image it will be shown in Lightbox.

Image link URL

Add a URL for the image here and change the Target method.

Use as a Video Popup

If enabled you can show a video in Lightbox if you click on the image. Just make sure to put the URL of the video in the Image Link URL field.

Scroll Settings

Scroll Speed (in s)

Add the speed in seconds in which the image will be scrolled from top to bottom by sliding the slider.

Scroll Reverse Direction

Normally the image scrolls from top to bottom but you can enable this option to scroll the image from bottom to top.

Design Options

Overlay

You can enable the Image Overlay here. This means when you’ll hover over the image you can display an icon and a color that will cover the image.

Overlay Color

You can change the color of the overlay here

User Icon

Use this switch to enable or disable the use of Icon in the Overlay.

Overlay Icon color

You can change the color of the icon in the overlay here.

Icon Picker

Pick an icon here from the Divi Icon Library.

Show Overlay on Hover

You can always change the behavior of the overlay if you disable this overlay will stay on the image rather than showing only on hover.

Overlay Border Radius and Border

Here you can play around with the Border Radius and Border of the overlay.

Lightbox

If you've added Image/Video Overlay to the Scroll Image under the Link panel you'll see this option in the Design tab to design the Overlay.

Close Color

Change the color of the close button icon here.

Overlay Max Width

Change the max-width of the overlay here.

Advanced Options

Use the advanced options to give your Scroll 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 20

Divi Mask Text Module

Accepted Answer

To grab the attention of your visitors, you need something more appealing. Mask your text with any image to achieve a very cool effect. The creativity you can achieve with our mask text module is insanely cool.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/021Y0Wj52r/Showcase-4-1024x572.png (Showcase-4-1024x572.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/hFtiFfxpmv/Supreme-Mask-Text-Module.png (Supreme-Mask-Text-Module.png)

Mask Text

Put the text to start working on making a Mask Text in Divi.

Mask Image

Background Image

Add an image from Media Library which will be placed as a background in the text.

You can play around with changing the background image size and Position and make it Repeat.

Design Options

Heading Settings

Heading Tag

Change the tag of the Mask Text from H1 to H6.

Mask Text

You can play around with changing the color, size, weight, and font of the Mask Text.

Advanced Options

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