Question 1

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 2

Divi Easy Theme Builder Extension

Accepted Answer

Introducing Easy Theme Builder, the only extension to fix your issues with the Theme Builder while creating Header, using this extension you can easily enhance the Functionality of Header Providing you easy switches to turn on or off a specific feature.

You can easily create have these functionalities using this extension:

Fixed Header – Turn your Theme Builder header into a fixed one. With just a few clicks, you can turn your static custom-built header into a fixed one that follows your visitors throughout their stay on your website.
Shrink On Scroll – Shrink the Theme Builder header’s height when your visitors are scrolling. It helps reduce the space the Theme Builder header takes up in your visitors’ viewport height. No coding required!
Switching Logo On Scroll – You can switch your header logo when your visitors are scrolling. With just a few clicks, you can have a different logo customized specially for header, This gives you more control over the design of your site.

How to use

Let’s see where we can find this extension settings and how to use it.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/SvkuN7EJyE/Easy%20Theme%20Builder.png (Easy Theme Builder.png)

Theme Builder Header

Configure Theme Builder Header settings here.

Enable Fixed Header

Obviously, this will make your Header always Fixed on top even when you scroll down. For developers, the fixed header CSS Class Selector is “.dsm_fixed_header“

Disable on

You can select on which device you don’t want to make your Header Fixed. You can even select Tablet or Mobile.

Push Body Down

This will calculate the Divi Theme Builder Header height automatically and apply the height to the body to prevent the first section from overlapping. This will push the first section down based on the header height. This is not needed if you have a transparent background for the header.

On Scroll Threshold

You can define when the header should take effect after viewport. (Default: 200)

Scrolling

Here you can make changes to the element on scroll.

Enable Scrolling Options

This will enable the scrolling elements configured below. For developers, the active scroll CSS Class Selector is ".dsm_fixed_header_scroll_active"

#1 Section Background Color

Change the background color for the first section in the Header on scroll.

#2 Section Background Color

Change the background color for the second section in the Header on scroll.

Show Box Shadow on Scroll

This will hide the box shadow on page load and show on shrink threshold. You should define the Shadow in the Theme Builder section settings.

Shrink

Here you can make changes to the shrink elements.

Enable Shrink on Scroll

This will shrink your Divi Theme Builder Header and stays fixed by decreasing the height of the Header when you scroll down. For developers, the active shrink CSS Class Selector is “.dsm_fixed_header_shrink_active“

Shrink Section Padding (px)

If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the section in the Header when shrinked.

Shrink Row Padding (px)

If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the row in the Header when shrinked.

Shrink Menu Module Padding (px)

If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the menu module when shrinked.

Let’s see how this Padding works, Let’s say you’ve 20px padding added to the section of the Header and when you’ll put 10px in the “Shrink Section Padding (px)” field it will remove that 20px from the section and will add 10px there. That’s how it works.

Shrink Image (%)

If Shrink on Scroll is enabled, you can define a max-width in percentage(%) value when shrinked for the Logo Image.

Shrink Logo Image

If Shrink on Scroll is enabled, you can change the logo image when shrinked. So you’ll have a different logo when scrolling down.

Question 3

Divi Blob Shape Image Module

Accepted Answer

Fan of Blob Shaped Images? We got your back!

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/pYkPTQ33pR/blob%20shape%20image%20demo%20image.png (blob shape image demo image.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/FabVU8dRCy/blob%20shape%20image%20moduel%20-%20content%20options.png (blob shape image moduel - content options.png)

Image

Insert your Image here.

Blob Shapes

Choose any Blob Shape from 13 different Shapes.

Overlay Content

If you want to show content on the Image as an Overlay, then you can do so here.

Title

Add your Title here for the Overlay Content.

Description

Your description for the Overlay Content goes here.

Show Content on Hover

Enable this option If you like to show the Overlay Content on Hover.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/wt7Onx9t92/blob%20shape%20image%20module%20-%20Design%20options%20.png (blob shape image module - Design options .png)

Blob Image Settings

Blob Image is placed as a Background so you can change the Size & Position of the Image easily from here and make some other changes.

Size

Change the Size of the Image from here to "Cover" or "Initial".

Position

Change the position of the Image from here the way you like.

Blob Image Height

Change the Height of the Image from here If you need to.

And else you can add Border, Border Radius and Box Shadow to the Image If you like.

Overlay

You can also add Overlay Color or Gradient to the Image from here.

Use Overlay

Enable this Option If you'd like to add an overlay to the Image. And It will ask you to change the Color of the Overlay.

Use Gradient Overlay

Enable this option If you'd like to have a Gradient Overlay. Once enabled it will show different settings to change the Angle and Offset of the Gradient Color and you'll be able to have a Gradient Overlay as you desire.

Overlay Text

Here you'll be able to change the Styling of the Overlay Title, Description and add Spacing to the Overlay Content. Open the tab you'd like to change the styling of and make the changes you like. In the Spacing tab you'll be able to add Spacing around the Content.

Advanced Options

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

Question 4

How to show a Popup Globally

Accepted Answer

If you want to show a Popup Globally on your site then you must follow this guide. We'll see how to show the Popup you've created Globally on your site. It could be a Sale Notice Popup, Important Notice or anything.

We can use the Divi's Theme Builder to show the Popup globally. Just Edit your Global Header or Footer as both shows on your whole site so will the Popup. Let's Edit the Global Footer.

Once you've opened the Module settings, you can go to Advanced tab -> Visibility -> Use Popup and set up the Popup the way you like.

Hope you'll found it useful, Let us know If you need any help. Have a great day!

Question 5

Divi SVG Animation Module

Accepted Answer

SVG animations are an easy way to add some pizzazz to your Divi website. The Supreme SVG Animation module makes it easy to create these animations, without any coding required. Just select the animation you want to use, and the module will handle the rest. With this module, you can easily add beautiful animated graphics to your website, without any headaches.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/nyRD1BNjmo/2022-10-04%20at%2020.44.43.gif (2022-10-04 at 20.44.43)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/fTAs9Vyk5a/2022-10-03-at-18.54.37.png (2022-10-03-at-18.54.37)

General

Use SVG Code

Enable this option If you'd like to use SVG Code Instead.

SVG File

Here you can upload your SVG File.

Settings

Type

Here you choose the Type of SVG Animation, you've option to choose from below options:

Delayed
Sync
One-by-One

Animate Timing Function

Here you can choose the Speed Curve for your Animation, you can choose whatever option works best for you.

Loop

Enable this option If you'd like the SVG Animation to Loop.

Unlimited

If enabled, the animation will Loop infinitely. You can disable to set a custom number times the animation will Loop.

Trigger

Enable this option to choose a Trigger type for your SVG Animation.

--Trigger Type

Here you can choose the Trigger Type, you can select Triggers from below options:

Start Animation when in Viewport
Start on Hover
Start on Click

Speed

Change the Speed of your SVG Animation here, the lower the value the faster the animation will be.

Delay

If you want to delay your animation, you can do so here.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/OCsGuNpVoh/2022-10-03-at-18.54.52.png (2022-10-03-at-18.54.52)

Alignment

Here you can change the Alignment of your SVG Animation.

SVG

Color

You can change the Color of your Animation here.

Width

Here you can adjust the Width of the Animation.

Advanced Options

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

Question 6

Divi Library Widget Extension

Accepted Answer

At times, you wish to add Divi modules right inside Sidebar Widget and with this extension, you can add any Divi Library Layout to Your Widget Area – Sidebars, Footer or any that you’ve created.

Before Using

Make sure to activate the extension by going to Divi Supreme -> "Enable Divi Library Widget" and enable it.

Usage

To use the Divi Library Widget extension, go to Appearance -> Widgets and there you'll find a new widget "Divi Library Widget". Just drag it and drop it to the place where you want to show It can be Sidebar, Footer etc.

Cheers!

Question 7

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 8

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 9

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 10

Enable SVG Upload in Divi

Accepted Answer

We've added a new functionality to Divi Supreme and using that you can easily Enable the SVG Uploads in Divi by simply enabling a switch.

How to Enable SVG Uploads

To enable the SVG Uploads in Divi all you've to do is open up Divi Supreme Settings > Misc > Allow SVG file Upload enable this switch and click on Save Changes button.

Now when you'll try to upload any SVG to Media Library or from anywhere where you can access media Library, you'll see the SVG file uploads without any restrictions.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/PqDMNAFOcC/SVG%20Uploads%20in%20Divi.png (SVG Uploads in Divi.png)

That's how easily you can enable SVG uploads in Divi using this extra option available in Divi Supreme. Hope you'll find it useful and you'll don't need to add custom code to functions.php or install a separate plugin for this.

Question 11

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

Question 14

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 15

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.

Question 16

Divi Animated Gradient Text Module

Accepted Answer

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

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/RfzUQA1K8b/dsm-animated-gradien-text.png (dsm-animated-gradien-text.png)

Content

Animated Gradient Text

Put your text here which will have an animated gradient.

Animated Gradient Settings

Gradient Direction

Change the direction of the gradient by entering values or sliding the slider.

Animation speed (s)

Change the Speed of animation here.

Design Options

Heading Settings

Heading HTML Tag

Change the tag of the heading from H1 to H6.

Animated Gradient Text

Here you’ll find 4 options for choosing colors which means you can have a really cool Animated Gradient Text with so many colors. But If you want to have two colors then put the same color in #1 Gradient Color and #2 Gradient Color and repeat it for the other two as well.

And you can play with color Gradient Text size, weight, Font, etc.

Advanced Options

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

Question 17

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 18

Before and After Image Module images are not loading correctly

Accepted Answer

LazyLoad have compatibility issue with most plugin out there especially when:

•Grid layouts that use fixed positioning/fixed widths

•e.g. some implementations of Isotope or Masonry

•JavaScripxs that try to calculate spaces based on image size

•Internet Explorer

•LazyLoad is not supported for IE8 and below

•Certain background images

•Depending on how they are added, not all background images can be LazyLoaded.

If you're using WP Rocket plugin lazyload, here's the filter function to disable.

Copy and paste this function into your child theme function.php

If you're using JetPack plugin lazyload, here's the filter function to disable.

Copy and paste this function into your child theme function.php

Question 19

License Key Activation Issue

Accepted Answer

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

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

That's it. Good luck.

Question 20

Using Dynamic Assets with Divi Supreme.

Accepted Answer

⚡ Dynamic Assets Now available in Divi Supreme Pro version 4.8! This eliminates all file bloat and greatly improves load times. Divi Supreme is now more clean, lean and bloat-free.

All supreme modules and extensions CSS are broken up into individual files. Only load CSS/JS files when they are needed on the page on all Supreme Modules and Extension. Unused CSS is never loaded. Same goes to JavaScript assets.

No-one cares about your Divi sites like Divi Supreme do.

How To Enable Dynamic Assets

To enable Dynamic Assets, Navigate to Divi Supreme Settings Page -> Misc Tab -> Enable Dynamic Assets.

You need to clear "Static CSS File Generation" under Divi -> Theme Options -> Builder -> Advanced Tab. Re-saving page might be required where the Divi Supreme Modules and Extension are being used if it does not work.

You also need to Enable "Dynamic CSS" under Divi -> Theme Options -> Performance.