Question 1

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

Q: Divi Supreme Requirement

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

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.

Question 2

Divi Image Text Reveal Module

Accepted Answer

When you hover over the image, you will see the an overlay slide from the left to hide the image with the revealing text and when you move the move away from the image, the image slide out of view to the right. There are plenty of animation for the revealing text too!

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/5Gh2VCmWa4/dsm-image-text-reveal-768x1018.png (dsm-image-text-reveal-768x1018.png)

Reveal Text

This field is where you can enter the reveal text.

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.

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

Reveal Overlay Color

This option allows you to customize the reveal overlay color.

Animation

Here you can choose more than 30 animation for the revealing text.

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 3

Supreme Step Flow Module

Accepted Answer

Divi Supreme’s Step Flow Module is the perfect way to create stunning step flows in Divi. With this module, you can easily add, remove, and rearrange steps with just a few clicks. Plus, the module comes with a variety of pre-designed templates to choose from, so you can get started right away.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/wcfil2isIJ/2022-09-24%20at%2016.45.05.png (2022-09-24 at 16.45.05)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/xBK7vlFlhD/2022-09-24%20at%2016.46.12.png (2022-09-24 at 16.46.12)

Title

Enter your Title text here.

Badge

Enter the Text for Badge here, which will appear on top of the Card. You can style it & change its position from the Design.

Use Description

Enable/Disable this option to show/hide the Description.

Content:

Your Description Content goes here.

Button Text

Add in your Button Text here.

Button Link URL

Add your Button link here.

Button Link Target

Choose Whether you want to open the Link in the Same Tab or a New Tab.

Show Direction

Enable this option If you'd like to show a Direction Arrow.

Type

Here you can choose the type of Direction. The Default will add an arrow that you can style from the Design tab. Or you can even choose an Arrow from Divi Icon Library or upload your own.

Image & Icon

Use Icon

Enable this Option If you'd like to use an Icon instead of the image. If enabled, you'll see Divi Icon library to choose an icon.

Image

Upload your image for the Step Flow Card here.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/1KexZcJnA7/2022-09-24%20at%2016.48.10.png (2022-09-24 at 16.48.10)

Title

Here you can customize the Title font, size, color and weight etc.

Content

This is where you can customize the Content Description by changing its font, size, color and weight etc.

Image & Icon

Icon Color

Here you can change the Icon Color

Background Color

Here you can change the Background Color Of the Icon/Image.

Font Size

Here you can change the Size of the Icon.

Padding

If you want to add Padding to the Image/Icon, you can add it here.

Margin

If you want to add Margin to the Image/Icon, you can add it here.

Alignment

Here you can change the Alignment of the Image/Icon.

Width

Here you can change the Width of the Image.

Else you can customize the Image/Icon by adding Border, Border Radius & Box Shadow etc.

Badge

Position

Here you can Choose the Position of the Badge.

Use Custom Position

If you want to Use Custom position for the badge, you can enable this option.

Background Color

Here you can change the Background color of the badge.

Padding

If you want to add Padding to the Badge, you can add it here.

Margin

If you want to add Margin to the Badge, you can add it here.

Else you can customize the Badge font, size, color and weight etc and even play around with Border, Border Radius, Box Shadow, etc.

Button

Enable Use Custom Styles for the button to add custom styling to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button.

Advanced Options

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

Question 4

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 5

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 6

How to Solve common issues caused by Cache.

Accepted Answer

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

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

Clear your browser cache

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

Clear/purge any cache Plugin

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

Clear/purge if you're on CDN

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

Re save Permalink

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

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

Might be a Plugin.

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

Question 7

Divi Supreme Pro Plugin Update

Accepted Answer

Updating Plugin

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

Question 8

Divi Scheduled Element Extension

Accepted Answer

Using this extension you can easily schedule the visibility of any Element like Section/Row/Module in Divi.

Awesome Features:

You can choose who to show or hide based on the user’s logged-in status. Apply condition to show it for All Users, Logged In Users or Visitors.
Select any user roles which is available to you from your WordPress site. You can choose to show or hide for author or all user roles.
Select days of the week. Monday to Friday or even weekend with your preferred opening & closing time.
And More...

This will extend the Visibility Option in all the Module settings that will allow you to use the Scheduled Element Extension. This feature is only available for Pro Users.

Currently, the available supported modules are listed below:

All Divi Default Modules
All Divi Supreme Pro Modules(Pro Version).

Before Using Scheduled Content Element Extension:

Before you start using the Scheduled Content Element Extension you first make sure that’s active or Enabled from the Divi Supreme Settings. Go to Divi Supreme > Divi Supreme Pro and Enable the use of Scheduled Element Extension

Usage

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

Enable this option if you want to use this extension for any module.

Show or Hide Module

Show Option - This option is very important. If you’ll select Show Option from the dropdown and will set the date and time then the module will be hidden till then but when the time arrives the Module appears which means you’ll not have to worry about the module visibility at a particular time If you don’t get time to change its visibility.
Hide Option - The same things go for the Hide Option. But your module will be visible till that time but when the time arrives the module will disappear.

Schedule a Date/Time

Enter your Desired date and time for the Module visibility to show or hide when the time arrives that you set here.

Use Between Date/Time

When you'll enable this option you'll see another Date/Time picker so you can show/hide an element between that date/time.

Schedule a Date/Time is the time of start.
Use Between Date/Time is the time of end.

Use Business Hour/Time

Enable this option if you want to show a Module only then when your business is open.

Select Day

Select your desired days here.

Opening Time

Add the Opening time of your business here so the module will be shown on your given time.

Closing Time

Add the Closing time of your business here so the module will be gone on your given time.

The time format here will be 24 hours.

Apply To

From here you can control the visibility of the module for specific roles.

All Users - Choose this option if you want to show the module to everyone e.g Logged-In Users and Visitors and all others.
Logged In Users - Choose this option if you want to show this module to only logged in users only, you’ll also get the options to select specific roles or select all for everyone who’s logged In on your site.
Visitor Users - Choose this option if you want to show this module to only visitors, which means this module will not be visible to Logged in Members it will be only visible to those users who they’re logged out from your site.

Disable On

This will disable the Module on selected Devices.

Question 9

Divi Twitter Timeline Module

Accepted Answer

Create and Embed Twitter Timeline Feed easily without any coding.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/XQAX9F9Lcb/dsm-embed-twitter-timeline-494x1024.png (dsm-embed-twitter-timeline-494x1024.png)

Content Options

Twitter Timeline Settings

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/XQAX9F9Lcb/dsm-embed-twitter-timeline-494x1024.png (dsm-embed-twitter-timeline-494x1024.png)

Twitter Username

Enter the Twitter Username without the hashtag @ e.g TwitterDev

Limit Tweets

Here you can limit the number of tweets.

Number of Tweets

Display a specific number of items between 1 and 20.

Theme

Here you can choose whether the Twitter Timeline will appear in light or dark theme.

Show Header

Hides the timeline header. Implementing sites must add their own Twitter attribution, link to the source timeline, and comply with other Twitter display requirements.

Show Footer

Hides the timeline footer and Tweet composer link, if included in the timeline widget type.

Show Border

Removes all borders within the widget including borders surrounding the widget area and separating Tweets.

Show Scrollbar

Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website.

Remove Widget’s Background Color

Enable this Option to Removes Widget’s Background Color

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.

Sizing

Height

Adjust the height of your Twitter Timeline. The pixel height of the plugin. Min. is 200.

Advanced Options

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

Question 10

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

Divi Facebook Like Button Module

Accepted Answer

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

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/z2zccqzDCp/dsm-fb-like-button-module-showcase-467x1024.png (dsm-fb-like-button-module-showcase-467x1024.png)

Facebook APP ID

The Facebook Like Button module uses the Facebook APP ID and requires a Facebook APP ID to function. Before using all Facebook module, please make sure you have added your Facebook APP ID inside the Divi Supreme Plugin Page. You can go to Facebook Developer and click on Create New App to get one. You can also see this guide for more help here.

URL

Here enter the URL of your Facebook Page

Layout

Change the type of Layout from 4 Different Layouts:

Standard - Will show the like button and number of likes separated.
Button Count - Will show the Like button and Like counts in the same box.
**Button **- Will only show the like button.
Box Count - Wil show the Like button and count on top and bottom separated.
Color Scheme - Change the Color Scheme of the Like Button to Light or Dark.

Show Faces

Choose whether to show faces or not(Only Standard Layout).

Action

The verb to display on the button. It can be either like or recommend.

Show Share Button

Specifies whether to include a share button beside the Like button.

Size

Change the Size of the button to either small or Large.

Design Options

There’s no option for this module in the Design Options. But you can still add Border, Corner Radius, Box Shadow and more…

Advanced Options

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

Question 12

Supreme Progress Bar Module

Accepted Answer

If you’re looking for a way to add a little extra flair to your Divi site, then look no further than the Supreme Progress Bar Module. This nifty little module allows you to add a sleek and stylish reading progress bar to your pages, Not only does it look great, but it’s completely Customizable, helping your readers keep track of their progress as they read through your content.

Content Options

General

Tracker Type

Here you can select the Tracker Type, you can either select "Horizontal" or "Circular".

Progress Relative To

Here you can select the Relative to for Progress Bar. You can choose from:

Entire Page - Progress Bar will be relative to Entire Page.
Selector - You can add a class here for a Module/Row/Section (That Module/Row/Section must contain the class added here) and enter the class. Then the Progress Bar will be relative to that Module/Row/Section and will start when that Module/Row/Section comes in viewport and will reach 100% when that Module/Row/Section goes out of Viewport.

Direction

Here you can change the Direction of the Progress, you can change to "Left" or "Right".

Percentage

Enable this option If you'd like to show Percentage in Progress Bar.

Size

If you select "Circular" type, then here you can change the size of the Circle.

Design Options

Progress Indicator

For Horizontal Type

Background

Here you can change the Background/Progress Bar Color, you can even create Gradient If you like.

For Circular Type

Width

You can control the width of the Circular Type Tracker here.

Color

Here you can change the color of the Tracker.

Else you can customize the Progress Indicator by adding Border, Border Radius & Box Shadow etc.

Tracker

For Horizontal type

Background

Change the Background of the Tracker here.

Height

Here you can control the Height of the Progress Bar.

For Circular type

Width

You can control the width of the Circular Type Tracker here.

Color

Here you can change the color of the Tracker.

Else you can customize the Tracker by adding Border, Border Radius & Box Shadow etc.

Percentage Text

Here you can customize the Percentage Text font, size, color and weight etc.

Advanced Options

Use the advanced options to give your Progress Bar 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 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 14

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 15

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 16

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 in Divi so that's the only solution for now.

How to Change Layout Type

To change the layout type, you first need to create a new Layout by clicking the "Add New" button and choose "Layout" from the Dropdown and then copy the content from the previous layout and paste in this newly created Layout. Once this Layout is saved, you can then go to Popup settings, and change the Layout from there as well.

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

Question 17

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 18

Divi Facebook Embed Module

Accepted Answer

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

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Xbkmfwmyf4/Facebook-embed-module-showcase.png (Facebook-embed-module-showcase.png)

Content Options

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

Facebook APP ID

The Facebook Embed module uses the Facebook APP ID and requires a Facebook APP ID to function. Before using all Facebook module, please make sure you have added your Facebook APP ID inside the Divi Supreme Plugin Page. You can go to Facebook Developer and click on Create New App to get one. You can also see this guide for more help here.

Type

Choose the type of Embed you like. Such as Post or Video.

Type as Post

If you’ll select the post type as Post you will see these options:

Post URL - Enter the URL of the actual post from Facebook here.
Show Text - Applied to photo/video posts. Set to Show to include the text from the Facebook post or video, if any.

Type as Video

If you’ll select the post type as Post you will see these options:

Video URL - Enter the URL of the actual Video from Facebook here.
Show Text - Applied to photo/video posts. Set to Show to include the text from the Facebook post or video, if any.
Allow Video Fullscreen - Let the video to be played in the Fullscreen. You can Allow or Disallow.
Video Autoplay -Automatically start playing the video when the page loads. The video will be played without sound (muted). People can turn on sound via the video player controls. This setting does not apply to mobile devices.
Show Video Captions -Set to show to show captions (if available) by default. Captions are only available on desktop.

Design Options

There’s no option for this module in the Design Options. But you can still add Border, Corner Radius, Box Shadow and more…

Advanced Options

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

Question 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

Translating Divi Supreme Modules with WPML

Accepted Answer

Divi Supreme works with multiple Translation plugins out of the box. And in this guide we'll show you how translate Divi Supreme Modules when using WPML, which is the most popular Translation plugin for WordPress with a tons of functionalities and features.

Before We Get Started, make sure you have the following plugins installed & activated on your site:

Divi Supreme Pro
WPML Multilingual CMS (Main Plugin)
WPML Media
WPML String Translation

If you're new to using WPML, check out their Getting Started Guide for more information on installation and setup.

How to Translate a Page with WPML

Let's see how you can easily translate your Page using WPML, which will also nicely translate Divi Supreme Modules.

Make sure to have your Page Published and there are Divi Supreme Modules on the page to be translated.
Now Edit that page you need to Translate.
On the right side, you'll see "Language" panel, this is where you can hit the + Icon to translate the whole page (In our case, we'll click the + Icon next to French).

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/TmGvEYddU1/2024-05-16%20at%2001.30.16.png (2024-05-16 at 01.30.16)

Next, you'll be redirected to WPML Translation page, and this is where you can translate all the content of the page to your preferred language.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/c69QFpqiSg/2024-05-16%20at%2001.41.43.png (2024-05-16 at 01.41.43 (2025).png)

Once you reach 100% Progress level, make sure to click the "Complete Translation" button and you'll be redirected back to your website. Now If you view the page, and switch the Translation option, It will work nicely.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/9GcJlQ0IV6/2024-05-16%20at%2001.48.59.gif (2024-05-16 at 01.48.59)

Note: If you're using a Gallery Module, then the module might not work correctly on the translated page. To fix that, enable the Divi Visual Builder on the Translated Page and reselect your gallery Images.