Question 1

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 2

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 3

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 4

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 5

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 6

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 7

Divi Price List Module

Accepted Answer

Create an attractive and stunning Price List for your business with easy options. Perfect for menus, catalogs, product lists and any other list of featured items.

See the Demo page for more Design of Price lists.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/ITglE0ED1v/price-list-show-case-1024x430.png (price-list-show-case-1024x430.png)

Content Options

Adding Price List

Click on + Add new Item to add your first Price List. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Price List.

See below for individual Price List Item settings.

After you add your first Price List, you will see a gray bar appear with the title of your Price List shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Price List.

Design Options

Text

Vertical Alignment

This setting determines the vertical alignment of your Price List Text. Your content can either be aligned to the top, vertically centered, or aligned to the bottom.

Text Shadow

Here add nice shadow to the Pirce list text.

Title Text

Change the title text font, color, size, weight and more of the Price List item.

Description Text

Change the Description text font, color, size, weight and more of the Price List item.

Price Text

Background Color

Define a custom background color for the price text.

Padding

Add some padding around the Price text.

And else you can change the price text font, color, size and weight and more.

Price Text Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Price Text. 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 Price text.

Image

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 Gap Spacing

Add some spacing between Image and Texts.

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

Separator

Style

Change the style of the line between Title text and Price text from 8 different styles.

Weight

Change the weight of the Line here.

Color

Change the color of the separator line to your own one.

Gap Spacing

Change the spacing of the line between Price text and Title text.

Sizing

Item Bottom Spacing

Add some bottom spacing between other Price list items.

Advanced Options

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

Price List Item Content Options

Text

Price

Add your Pricing here.

Title

Add your title here.

Content

Put in your description text here.

Image

Add your image to here add in your price list item.

Price List Item Design Options

Image

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 Gap Spacing

Add some spacing between Image and Texts.

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

Price List Item Advanced Options

Use the advanced options to give your Price 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 8

Divi Shapes Module

Accepted Answer

Shapes are one of the most important elements in Design. So we’ve created this module to make your life easier. Shapes module adds life and creativity to your website. Boost your Divi designs, without having to use image files or custom code.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/AiAexCqfdk/dsm_shapes_module_showcase-1024x466.png (dsm_shapes_module_showcase-1024x466.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/jN35hh9nNG/shapes-module-content-options.png (shapes-module-content-options.png)

Shapes

Type

Here you can change the type of shape from 16 different Shapes. Here are the shapes that you can choose:

Square
Circle
Rectangle
Oval
Trapezoid
Parallelogram
Diamond Square
Hexagon
8 types of Blob

Size

Adjust the Size of the Shape here.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/eQvwcHv7Gw/shapes-module-designoptions.png (shapes-module-designoptions.png)

Shapes

Shape Color

Here you can define a custom color for your shape.

User Border

Enable this option if you want to add Border and Corner Radius to the shape.

Shapes Shadow

Here you can add a nice Drop Shadow to the shape.

Changing the Position of the Shape

Let’s See how we can change the position of the shape. We have three options:

Using Margins

Using Transform Translate Options

Using Position Options

Shape Module Advanced Options

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

Question 9

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

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.