Question 1

Divi Caldera Forms Module

Accepted Answer

Now with Divi Supreme Caldera Forms module, you can select your contact form from the dropdown list without having to go back and forth switching between Visual Builder and Caldera Forms setting page to copy the shortcode and adding it to the Divi Code Module. Style your Title, Body, Horizontal Ruler (HR Tag), Labels, Field Description, Input, Textarea, Select, Placeholder, Radio, Checkbox, Basic File, Error Messages, Success Message, Submit Button, Advanced File Button and more coming your way.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/F9zi2IKWn5/showcase-1024x638.jpg (showcase-1024x638.jpg)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/MswjMwJv3u/dsm-caldera-forms-content-options.png (dsm-caldera-forms-content-options.png)

That "Note" at the top means that you'll need to disable the Default Caldera Forms styling by going to Caldera Forms and click "General Settings" at the Top and disable all the switches from here.

Caldera Forms

Caldera Form

Select a form from the dropdown all of your forms that you’ve created using the Caldera form plugin will appear in the Dropdown menu. If you haven’t created a form already Hover over to Caldera Form > Forms and click on the New Form button at the top.

Show Error & Validation Messages

This will show the error and validation messages on the Visual Builder for styling purposes.

Admin Label

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

Design Options

Header Text

Here you can play around with the header text you may have added to the Form while creating the Form.

Body Text

Here you can play around with the body/description text you may have added to the Form while creating the Form.

Horizontal Ruler (HR Tag)

Color

Here you can change the color of the Divider line in the Form.

Gap

You can add spacing to the top and bottom of the Divider line in the form.

Label

Bottom Spacing

Add some spacing to the bottom of the Label.

Required Asterisk Color

Change the color of the (*) with the showing with the label which indicates that this field is Important to be filed.

And else you can change the color, size, font and more of the Label text.

Field Description

If you’ve added a description to the field(Shows down of the field) then you can style it here. You change the background color and size, font, weight and more of the description text.

Input, Textarea and Select

All the changes you’ll make here will be applied to all the form fields including Name, Email, Message box and to the Drodpwn select field as well.

Margin Bottom

Add some spacing at the bottom of all the fields.

Background Color

Change the Background color of the form Fields and Select box.

You can change the input Font, Size, color and more of the text will be entered in the Field.

Field Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Form Field. 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 Form Field.

Input, Textarea and Select Focus

When you’ll try to write something in the form and wanted to add some attention to the field then use this option to change the size, weight, and more of the text Input.

Placeholder

If you are using a placeholder on your Contact Form, this is where you can style the placeholder such as font, size and more.

Radio & Checkbox

If you are using a Radio & Checkbox on your Contact Form, this is where you can style the Radio & Checkbox such as font, size and more.

Custom Radio/Checkbox Styles
You can switch this option to add custom styles to the Radio/Checkbox.
Checked Color
You can change the color of the circle icon when checked here.
Checked Background Color
You can change the color of the background when checked here.
Background Color
You can change the color of the background for the Radio/Checkbox here.

Basic File

If you’ve added a Basic file uploader to the form then it can style here. You can add Padding, Change the background color, font, size, weight and more.

Error Messages

Here you can change the error message background color, font, size and more. You can also add drop shadow, Rounded corners and Borders to the Error message.

Success Messages

Here you can change the Success message background color, font, size and more. You can also add drop shadow, Rounded corners and Borders to the Success message.

Submit Button

Button Alignment

Change the alignment of the button to Left, Center or Right.

Margin Top

Add some top margin to the button here.

Use Custom styles for the button

You can switch this option to style the Submit button the same way you style the Divi Button or any button in Divi Builder.

Advanced File Button(1.0)

Use Custom styles for the Advanced File Button(1.0)

Advanced Options

Use the advanced options to give your Caldera Forms 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

Fix the "Update Package Not Available" Issue!

Accepted Answer

So If you're facing the "Update Package Not Available" that might look like the below image when trying to Update Divi Supreme Plugin:

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/8HHSrXZOnX/divi-supreme-pro-plugin-update-error.png (divi-supreme-pro-plugin-update-error)

Here's a quick Fix

This commonly occurs when you switch to a new host or migrate your site. The issue arises because the license key remains connected to your staging or old site. To resolve this problem, follow the steps below:

Deactivate the License Key: Access License Settings under Dashboard -> Divi Supreme Pro -> License and deactivate the current license key. This is necessary because the license key might still be connected to your staging or old site, leading to update issues.
Activate the License Key Again: After deactivating the license key, reactivate it on your live site. This step ensures that the license is properly connected to your live site, allowing updates to work smoothly.
Clear Your Cache: Clearing your cache can help resolve any caching-related conflicts that might prevent the update from being recognized. Use a caching plugin or the appropriate caching settings in your hosting control panel to clear the cache.

Once you've completed these steps, you should be able to update the Divi Supreme Plugin without encountering the "Update Package Not Available" error.

If the issue persists or you require further assistance, please don't hesitate to contact our support team via email. We are here to help you.

Question 3

Divi Star Rating Module

Accepted Answer

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

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/H1ldKHajdm/dsm-star-rating-709x1024.png (dsm-star-rating-709x1024.png)

Rating

Rating Scale

Default at 0 – 5. Choose a scale from 0 to 5 or 0 to 10

Rating

Here you can assign the rating based on the scale chosen.

Title

Enter the title for the rating.

Title Inline Position

From here you'll be able to position the Title to "left" or "right" of the Stars, If in any case you need to.

Display Type

Here you can choose whether you want your Title to be stacked or to be displayed as inline.

Show Rating Number

This will show the rating number text after the star icons.

Schema

By implementing Schema Support, you can display star ratings in search engine results, enhancing your visibility on platforms such as Google.

Enable Schema Support

Enable this If you'd like to enable the Schema Markup for this Star Rating module.

Author

Add the name of the Author here, you may leave this empty. Use Dynamic Content option to display dynamic info.

Product Item Name

Add the name of the Product here, you may leave this empty. Use Dynamic Content option to display dynamic info.

Number of Rating

Enter the Number of Rating here to display in Search Engines, you may leave this empty. Use Dynamic Content option to display dynamic info.

Design Options

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

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

Stars

Size

Change the size of the stars

Gap

Control the gap between each star.

Color

Choose the color of the star icons.

Title

Gap

Here you can control the space between the title and the star icons.

And else you can play around with the Title text by changing Font, Size, Weight and more of it.

Rating Number Text

Here you can play around with the Rating Number text by changing Font, Size, Weight and more of it.

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

Gravity Forms Multistep Form Loading Issue

Accepted Answer

Gravity Forms does not allow multiple forms to be placed on the same page. Additionally, if the same form is added to a page more than once, it may cause issues with form functionality and submission duplication.

For more information and a detailed discussion on this issue, refer to the following link: Gravity Forms Community - Displaying the same form in multiple different lightbox popups (submission duplication issue resolved).

Solution:

To address this issue, you have two options:

Duplicate the Form: Create a duplicate form with a different ID. This ensures that each form on the page is treated as a separate entity, avoiding conflicts caused by multiple instances of the same form.
Duplicate the Layout in Divi Library and Trigger: You'll need to duplicate the form layout and trigger it to display in a new layout. This approach allows you to retain the same form ID while avoiding conflicts.

To prevent page refreshes during form submissions, it's important to enable Ajax. For guidance on enabling Ajax for embedded multi-page forms, refer to the following resource: Gravity Forms Community - Embedded multi-page form without refresh (resolved).

Question 5

Divi Breadcrumbs Module

Accepted Answer

Display a hierarchical representation of navigation links and make your site’s navigation easier to follow, add breadcrumbs to your site to improve the user’s experience, and yeah It's good for SEO too.

Content Options

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

BreadCrumbs

Show Custom Home

Enable this option If you want to show a Custom Text for the Home Link.

Show Home Icon

Enable this option If you want to show an Icon along with the Text of Home link. You'll see an Icon Picker where you can choose any icon from Divi Icon Library for your Home Link.

Custom Separator Icon

Enable this option If you want to set a Custom Icon for the Separator. You'll see an Icon Picker where you can choose any icon from Divi Icon Library for your Separator.

Design Options

Alignment

Here you can change the Alignment of the Breadcrumbs, enable the responsive option to set a different alignment for Mobile Devices.

Items

Here you can design the Items/Links in the Breadcrumbs, you can add Background Color, Padding, Border Radius, Box Shadow and more.

Item Background Color

Here you can define a custom Color for the Links/Items in the Breadcrumb.

Bottome Gap

Add a gap between Breadcrumbs Items/Links if the structure of the Breadcrumbs is longer than the space given to it.

Items Padding

Set a padding around the Item/Link from here, useful If you've added a Background color to the Item.

You can design the Item/Link color, font size and more.

Rounded Corners and Borders

Add Rounded Corners or Borders to the Item/Link here.

Box Shadow

Set a custom Shadow to show for the Links/Items in the Breadcrumbs. Enable Hover option to show shadow on Hover.

Home Icon

Here you'll be able to design the Home Icon If you've enabled it.

Icon Color

Here you can change the Color of the Home Icon. If you've enabled the option (Show Home Icon) in the Content tab.

Icon Size

Here can define a custom size for the Home Icon.

Separators

Here you'll be able to design the Separator in the Breadcrumbs.

Separators Background Color

Here you can define a custom Color for the Separator in the Breadcrumb.

Bottome Gap

Add a gap to Separator if you feel there is a need of it.

Items Padding

Set a padding around the Separator from here, useful If you've added a Background color to the Separator.

You can design the Item/Link color, font size and more.

Rounded Corners and Borders

Add Rounded Corners or Borders to the Separator here.

Box Shadow

Set a custom Shadow to show for the Separators in the Breadcrumbs.

Current

Here you'll be able to set custom design values for the Current Item in the breadcrumbs.

Item Background Color

Here you can define a custom Color for the Current Links/Items in the Breadcrumb.

Bottome Gap

Add a gap between Breadcrumbs Current Items/Links if the structure of the Breadcrumbs is longer than the space given to it.

Items Padding

Set a padding around the Current Item/Link from here, useful If you've added a Background color to the Item.

You can also design the Current Item/Link color, font size and more.

Rounded Corners and Borders

Add Rounded Corners or Borders to the Current Item/Link here.

Box Shadow

Set a custom Shadow to show for the Current Links/Items in the Breadcrumbs. Enable Hover option to show shadow on Hover.

Advanced Options

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

Question 6

Divi Supreme Button Module

Accepted Answer

Allow you to have two buttons with a separator text in between. 10 types of hover animation to choose from, image/video lightbox that supports: YouTube, Vimeo and Dailymotion! Not only that, we added URL link type that supports: URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp and Telegram!

Content Options

Within the content tab, you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Text

Button #1 Text

Input your desired button #1 text.

Button #2 Text

Input your desired button #2 text.

Links

Link Type for Button #1

Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram)

Email

This option will show up only when using Email Type. Enter the Email Address for Button #1.

Download File

Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library.

CC

Enter the carbon copy email address for Button #1.

BCC

Enter the blind carbon copy email address for Button #1.

SUBJECT

Enter the default subject of the email for Button #1.

MESSAGE

Enter the default body message of the email for Button #1.

Phone Number

Enter the phone number to call for Button #1 (This will usually work on mobile phones)

SMS

Enter the phone number to SMS for Button #1 (This will usually work on mobile phones)

Facebook Messenger

---USERNAME

This option will show up only when using Facebook Messenger. Enter a person, page, or bot username.

Skype

---USERNAME

This option will show up only when using Skype. Enter the Skype username for Button #1.

ACTION TYPE

Choose the action type for Skype. You can choose to chat or call.

WhatsApp

---NUMBER

This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #1.

ACTION TYPE

Enter the default body message of the WhatsApp for Button #1.

Telegram

---TELEGRAM USERNAME

This option will show up only when using Telegram. Enter the Telegram Username.

MESSAGE

Enter the default body message of the Telegram for Button #1.

Button #1 URL

Input the destination URLfor your button #1.

Open as Image Lightbox

Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, URL options below will be ignored.

Open as Video Lightbox

Put the Video link on the Button #1 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion.

Use Tooltip

This will show a tooltip on your Button #1

TOOLTIP CONTENT

Input your desired tooltip content for button #1.

SHOW ARROW

If enabled, then an arrow will be added to the tooltip.

SIZE

The size of the tooltip from Small to Large.

PLACEMENT

Here you can choose the placement of the tooltip. Top, Right, Bottom and Left.

ANIMATION

Here you can choose different types of animation for your tooltip.

URL Opens

Here you can choose whether or not your link opens in a new window.

Link Type for Button #2

Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram)

Email

This option will show up only when using Email Type. Enter the Email Address for Button #2.

Download File

Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library.

CC

Enter the carbon copy email address for Button #2.

BCC

Enter the blind carbon copy email address for Button #2.

SUBJECT

Enter the default subject of the email for Button #2.

MESSAGE

Enter the default body message of the email for Button #2.

Phone Number

Enter the phone number to call for Button #2 (This will usually work on mobile phones)

SMS

Enter the phone number to SMS for Button #2 (This will usually work on mobile phones)

Facebook Messenger

---USERNAME

This option will show up only when using Facebook Messenger. Enter a person, page, or bot username.

Skype

---USERNAME

This option will show up only when using Skype. Enter the Skype username for Button #2.

ACTION TYPE

Choose the action type for Skype. You can choose to chat or call.

WhatsApp

---NUMBER

This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #2.

ACTION TYPE

Enter the default body message of the WhatsApp for Button #2.

Telegram

---TELEGRAM USERNAME

This option will show up only when using Telegram. Enter the Telegram Username.

MESSAGE

Enter the default body message of the Telegram for Button #2.

Button #2 URL

Input the destination URL for your button #2.

Open as Image Lightbox

Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, URL options below will be ignored.

Open as Video Lightbox

Put the Video link on the Button #2 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion.

Use Tooltip

This will show a tooltip on your Button #2

TOOLTIP CONTENT

Input your desired tooltip content for button #2.

SHOW ARROW

If enabled, then an arrow will be added to the tooltip.

SIZE

The size of the tooltip from Small to Large.

PLACEMENT

Here you can choose the placement of the tooltip. Top, Right, Bottom and Left.

ANIMATION

Here you can choose different types of animation for your tooltip.

URL Opens

Here you can choose whether or not your link opens in a new window.

Separator

Separator Text

Input your desired separator text, or leave blank for no separator text in between the both buttons.

Make Separator Text Fullwidth On Mobile

This will make the Separator Text as fullwidth instead of inline-block on mobile devices.

Remove Separator Text On Mobile

This will remove the Separator Text on mobile devices.

Admin Label

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

Design Options

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

Alignment

Here you can choose to have your Button Wrapper aligned to the left, right or center.

Lightbox

If you've added an Image/Video Overlay to the button, then here you can change the settings of the Overlay.

Overlay color

Choose any color for the Overlay

Max Width

Here you can choose the Maximum width of the Overlay.

Separator Text

Here you can style the Spearator text's font, size, color and more.

Tooltip Text

If you've added Tooltip to the buttons you can easily style it here. You can have different styling for each button by going to each tab. You can style the Tooltip text's font size, color, and much more.

Sizing

Separator Gap Text

The gap spacing between both buttons.

Button One

This is where you can style your Button #1 the same way you style other button in Divi.

Button Two

This is where you can style your Button #2 the same way you style other button in Divi.

Animation

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/eufNDhIK2e/dsm-button-hover-611x1024.png (dsm-button-hover-611x1024.png)

Button Hover #1 Animation

Here you can select one hover animation from the dropdown list for Button #1. You can select any from over 29 Animations.

Button Hover #2 Animation

Here you can select one hover animation from the dropdown list for Button #2. You can select any from over 29 Animations.

Button Icon Hover #1 Animation

If you've added Icon to the Button #1 and disable the switch called "Only Show Icon on Hover for Button One" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations.

Button Icon Hover #2 Animation

If you've added Icon to the Button #2 and disable the switch called "Only Show Icon on Hover for Button Two" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/S9njB1osRA/Button%20Icon%20hover%20animation%20-%20Divi%20Supreme.png (Button Icon hover animation - Divi Supreme.png)

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 visibility on certain devices.

Question 7

How to Install Divi Supreme Pro

Accepted Answer

Before you install the Divi Supreme Pro On your site make sure that you've already downloaded the Divi Supreme Pro Plugin in your Computer. You can see this guide to see where to download the Divi Supreme Pro: https://docs.divisupreme.com/faqs/downloading-divi-supreme-products

After downloading simply follow the steps below:

Step 1. Install the Plugin

To Install Divi Supreme Pro on your site. Go to your WordPress Dashboard -> Plugin -> Add New.

Now click on "Upload Plugin" button on Top and then in the "Choose File" area choose the download Divi Supreme Pro .Zip file and then click on "Install Now" button.

So you've successfully installed the Plugin on your site.

Step 2. Activate the Plugin

After Installing the Plugin you can then Activate the Divi Supreme Pro to see all of its benefits/Features on your Divi Site. Simply click on "Activate" link to activate.

That's it, that's how easily you can Install the Divi Supreme Pro on your site. Let us know If you still face any issue by Contacting Us.

Question 8

Do i need to uninstall Lite version if i have the Pro version?

Accepted Answer

You can Uninstall the lite version if you want to. However, we recommend keeping. It's a fallback method. We have decided that all pro users must install the lite version as well. The reason because in some cases or in the future, let's say you decided not to use the pro version or something happen to the pro version. You always have the lite version to support and backup you, so that your site won't mess up showing a butch of shortcode and etc on frontend.

We care about your sites and that is why we added a fallback method for our pro users.

Also, we've enhanced and make sure when both the free and pro version installed and activated together, only the pro version functions, script and files will be loaded. There won't be any extra files or functions loaded when both are activated.

Let us know If you've any question or need any help: http://divisupreme.com/contact

Question 9

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 10

How to Import Layouts

Accepted Answer

If you want to install one of our free provided Layout with every Module release in your Divi website then this article will help you out on how to import those Layouts to your site and use them.

Step 1. Download the Layout

First of all, you'll need to download the Layout from the Module Demo page. So for our example we'll download the Layout provided with Card Carousel Module.

Step 2. Import Layout in Divi Library

Now you can move to your site's Dashboard -> Divi -> Divi Library and click on Import & Export button on the top.

Step 3. Add that Layout to your Page

So lastly, let's see how to implement that Layout to your page. For that you'll first need to open up the Divi Builder on your page and click on + Icon at the bottom and then you'll see a new window, click on Your Saved Layouts Tab and choose the recently Imported Layout.

Question 11

Divi Dual Heading Module

Accepted Answer

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

Content Options

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

In the Content tab, you’ll find three Text Input options (Before, Middle and After) and you can have separate designs for each.

Dual Heading Text

Before Text

Here you can put the Before Text.

Middle Text

Here you can put the Middle Text. Make sure to add spacing before and after the text in the text you’ll write.

After Text

Here you can put the After Text.

Design Options

Every one of the text you’ll enter in Before, After and Middle Text field can be designed separately in the Design Options.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/cMF4BuNxTB/dsm-dual-heading-design-options.png (dsm-dual-heading-design-options.png)

Heading Settings

Heading HTML Tag

Main Text

In this Design Option, you can change the font, color, weight and size, etc of all the texts (Before, Middle and After)

Before, Middle and After Text

You can easily style the Before, Middle and After text in the same way you style text in the Text Module(came with Divi Builder). And we’ll only discuss those options which are added by Dual Heading Module to style the text’s background, padding and stuff.

Background Color: Here you can add color to the Background of the Before, Middle and After text.

Margin and Spacing: Add some Margin and Spacing to the Before, Middle and After text, if you want to add some spacing on both sides of Before, Middle and After Text.

Display: You can change the display property of the text to Inline Block and Block.

Inline Block displays the text in the same line as other texts.

Block Displays the text by making it a block means other texts will not be displayed in the same line.

And you can play around with Before, Middle and After text by adding different colors, text-shadows, border, border-radius and more to each text.

Advanced Options

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

Question 12

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 13

Divi Typing Effect Module

Accepted Answer

Add a nice and cool typing effect to your website using the Typing Effect for Divi. Write the text that you want to show and it will appear letter by letter like if you were typing with an old typewriter. This module automatically types out sentences and then deletes them to type the following sentence. You can configure settings such as how quickly the typing effect and backspacing takes place, then delays before starting a sentence with just a few clicks, set the animation to loop infinitely or randomise the order of the sentences.

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

Content Options

Text

Before Text

This will add a static text before the typing effect. Only available in the Pro version.

Typing Effect Text

This will have an animated typing effect on your Title. To seperate the words in typing effect, you will need to add “|” e.g text1|word|animating

Typing Text on a new Line

Enable this option If you'd like to have the Typing text on a new line.

After Text

This will add a static text after the typing effect. Only available in the Pro version.

After Text on a new Line

Enable this option If you'd like to have the After text on a new line.

Typing Effect

This is where you can configure the typing settings such as how quickly the typing effect and backspacing takes place, then delays before starting a sentence with just a few clicks, set the animation to loop infinitely or randomise the order of the sentences.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/QpJWGElmVA/dsm-typing-effect-517x1024.png (dsm-typing-effect-517x1024.png)

Use Loop

If enabled, typing effect will loop infinite.

Remove Cursor After Completed

This option will show up only when you disable ‘Use Loop’. This will remove the cursor after typing finish looping their effect.

Typing Speed (in ms)

Here you can control the speed of the typing effect. Lesser value will have faster typing effect.

Typing Backspacing (in ms)

Delay before backspacing.

Back Delay (in ms)

Here you can delay before backspacing.

Use Typing FadeOut

This will have fade out animation instead of backspacing.

Use Typing Shuffle

Here you can choose to shuffle your Typing Effect text strings.

Cursor Character

You can have your own custom Cursor Character here. The character is “|” by default. You can put in any characters, letters or numbers.

Animate in Viewport

Choose when you'd like to start the Typing effect when it comes to Viewport e.g 50% or 80% etc

Repeat Animation in Viewport

Enable this option to repeat the Typing effect when it comes to Viewport again.

Admin Label

By default, your typing effect module will appear with a label that reads ‘Supreme Typing’ in the builder. The Admin Label allows you to change this label for easy identification.

Design Options

Here you can find the option to style the Before Text, Typing Effect and the After text. 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.

Before Text

Background Color

If you like to have a Background color to the text which is showing Before the Typing text then specify it here.

Padding

Add Some padding around the Before Text. Useful If you've added Background color to the Typing text.

And else you can play around with changing the Font, Size, Color, Wieght and more of the Before Text

After Text

Background Color

If you like to have a Background color to the text which is showing After the Typing text then specify it here.

Padding

Add Some padding around the After Text. Useful If you've added Background color to the Typing text.

And else you can play around with changing the Font, Size, Color, Wieght and more of the After Text

Typing Styles

Cursor Color

By default, the cursor color in typing effect will appear the same as your title font color. If you would like to change the color of your cursor color, choose your desired color from the color picker using this option.

Background Color

If you like to have a Background color to the text which is Typing then specify it here.

Padding

Add Some padding around the Typing Text. Useful If you've added Background color to the Typing 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 14

Divi Blog Carousel Module

Accepted Answer

Surprise your Visitors by showing your Posts in a new & creative way using Divi Supreme Blog Carousel Module. Add some special post Carousels to your site and take Blogging with Divi to the next level.

Content Options

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

Post Count

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

Included Categories

Choose Which post categories you want to show, you can select a particular category or choosee "All Category" to show all category posts.

Date Format

Change the Date format from here the way you like.

Elements

Show Featured Image

Enable or Disable this switch to show or hide Post's Featured Images.

Show Title

You can choose whether to display the Post Title or not, Disable it to hide the Post Title.

Show Excerpt

Enable to Disable this switch to show or hide the Post Excerpt.

Excerpt Text

Change the length of the Excerpt text here, enter value in numbers.

Show Date

You can choose whether to display the Post Publish Date or not, Disable it to hide the Date.

Show Category

Enable this switch If you want to show Post Categories in the Carousel for each post.

Meta Separator

Here you add a custom Meta Separator.

Author

You can choose whether to display the Post Author or not, Disable it to hide the Author Info from the Carousel.

Readmore Button

Enable this switch If you want to show the Readmore button for each Post card in the Carousel.

-Readmore Text

Add a custom Text for Readmore button here.

-Read More Link Target

From here you'll be able to change the Link Target to open in the Same Tab or in a New Window.

Show Bottom Meta Elements

This is something really cool, you can enable this option to show a nice looking Author Image and Name and Post Publish date for each Post card.

-Bottom Date

You can disable this switch If you don't want to show Date in this Meta Element.

-Bottom Author

You can also hide post Author Name by disabling this switch.

Carousel Effect

Choose a Carousel effect from 4 Different Effects and more to add soon.

Slide
Coverflow
Flip
Cube

Carousel Direction

You can change the Carousel Content Direction from here, It can be either "Left to Right" or "Right to Left".

Columns

Enter how many columns you want to show in the Carousel.

Use Multiple Row

You can enable this option If you want to show multiple rows of Posts, lets say you enter 2 in the "Row Per Slide" field and then you'll see two Rows of Posts, a new one below the first one and It will work the same way. You can change the "Row Per Slide" value to whatever you like.

Centered Mode

If enabled, then active slide will be centered, not always on the left side.

Spacing

Add some spacing between carousel Items.

Transition Duration

Change the duration when sliding the Carousel using the arrows here.

Infinite Looping

Enabling this option causes the carousel to loop. Means when you’ll click on the arrow to go to next slide it will then keep looping and shows all the item from first to end. Disabling this will show only the number of Posts and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow.

Autoplay

You can enable this option to slide Carousel Items automatically according to the time you'll set.

-Autoplay Speed

Change the time interval for the slides to change after that time.

-Pause on Hover

Enable this option, If you want to pause the carousel autoplay when the mouse is on the Carousel Module.

Pagination

Enable or Disable this option to show or hide the pagination dots.

Navigation

Enable or Disable this option to show or hide the arrows.

Use Equal Height

Equalize the carousel Items height. Carousel Card Items will be 100% in Height.

Design Options

Post Item

Changes you'll make here will be applied to the Post Items/Cards in the carousel.

Post Item Padding

Add padding around the Post Item here.

Background Color

Add a background color for each post Card in the Carousel here.

And else you can play around with adding Corner Radius, Border and Box Shadow to Post Items/Cards in the Carousel.

Post Thumbnail

Thumbnail Height

You can change the height of the Featured Image here. A really helpful option.

And else you can play around with adding Corner Radius, Border, Box Shadow and Filters to Post Thumbnails in the Carousel.

Post Entry Title

Here you can change the Title styling, you can change the Heading Level, font, size, weight and much more for the Title.

Post Entry Summary

Here you can style the Description/Excerpt text the way you like.

Post Entry Meta

This is where you'll be able to style the Meta text, such as Date, Category, and Author font.

Alignment

Here you can change the alignment of the Meta text to Left, Right or Center.

And below you'll find options to style you Author, Date and Category Text's Font, Weight, Color and much more. You can give different styling to all of them.

Navigation

This is where you can style the Navigation/Arrows of the Carousel.

Navi Vertical Position

You can change the vertical position of the Arrows/Navigation here.

Left Navigation Position

From here you can horizontally change the position of the Left/Prev Arrow.

Right Navigation Position

From here you can horizontally change the position of the Right/Next Arrow.

Navi Arrow Icon Size

Here you can change the Size of the arrows.

Custom Prev Arrow Icon

Enable this option If you want to set a custom Icon for the Prev Arrow, enabling this option will show the Divi Icon Library to choose an icon.

Custom Next Arrow Icon

Same goes here, enable this option If you want to set a custom Icon for the Next Arrow, enabling this option will show the Divi Icon Library to choose an icon.

Arrow Color

Here you can change the Arrow Color.

Arrow Background Color

Change the Arrow Background color from here.

And below you'll find options to add Rounded Corners, Border and Box Shadow to the Arrow Icons.

Pagination

This is where you can style the Pagination/Dots.

Pagination Position

Change Vertical position of the Pagination here.

Pagination Color

Change the color of the Pagination here.

Pagination Active Color

Change the Active Pagination color from here.

Pagination Button Style

Here you can change the Pagination style, you've got 3 different styles to choose from.

Default
Dynamic
Progress Bar

Bottom Meta Items

Here you can play around with Bottom Meta Items styling.

Image Width

Change the Author Image width from here.

And else you can play around with the Author Name and Date Text styling. And add Rounded Corners, Border and Box Shadow to the Author Image.

Overlay

Enable this switch If you want to show an Overlay when hover on Thumbnail. When you'll enable this option It will open some settings and ask you to pick an Icon from Divi Icon Library.

Overlay Icon Color

Change the Icon Color here.

Overlay Icon Size

Change the Size of the Icon from here.

Overlay Background Color

Change the Overlay Background Color here.

Advanced Options

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

Question 15

Divi Image Carousel Module

Accepted Answer

The easy way to create a beautiful image carousel using Divi Supreme Image Carousel Module. The image carousel module is perfect for showcasing a set of images, your portfolio pieces, client logos and much more.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/5yMFBHsiQW/showcase-5-1024x364.png (showcase-5-1024x364.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/QvMi00dlvf/dsm-image-carousel-module.png (dsm-image-carousel-module.png)

Image Carousel

+Add Gallery Images

Choose multiple images from your Media Library here.

Order by

You can change the order of the images to default(show images the way you selected) or Random(Shows images randomly)

Image Size

Change the size of all the images here.

Carousel Settings

Carousel Effect

Here you can change Carousel Slide Effect from 4 different effects.

Slide
Coverflow
Flip
Cube

Coverflow Effect settings

If you'll select Carousel Effect as Coverflow you'll see these options:

Show Shadow - Adds a shadow to next Carousel Images.
Coverflow rotate - Set the Rotate amount of the next images in the slide.
**Coverflow Depth **- Increase to show more items in the carousel with coverflow effect.

Carousel Direction

You can change the Carousel Content Direction from here, It can be either "Left to Right" or "Right to Left".

Centered Mode

This mode will show the next image in the carousel centered means half of the image will be appearing which tells there are more items to see.

Slides to Show

Here you can change the number of images to show in one slide.

Slides to Scroll

Here you can change the number of slides to scroll when click on the arrow button to see the next items.

Slider Speed

Here you can change the speed for sliding the slider.

Use Multiple Row

You can enable this option If you want to show multiple rows of Images, lets say you enter 2 in the "Row Per Slide" field and then you'll see two Rows of Images, a new one below the first one and It will work the same way. You can change the "Row Per Slide" value to whatever you like.

Autoplay

You can enable this option to slide images automatically.

Autoplay Change interval

Change the time interval for the slides to change after that time.

Spacing

Add some spacing between carousel images.

Infinite Looping

Enabling this option causes the carousel to loop. Means when you’ll click on the arrow to go to next slide it will then keep looping and shows all the item from first to end. Disabling this will show only the number of images and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow.

Show Arrow

Enable or Disable this option to show or hide the arrows.

Show Pagination

Enable or Disable this option to show or hide the pagination dots.

Disable Touch/Dragging

Use this option to disable touch/drag to slide the Carousel.

Use Grab Cursor

Enable or Disable this option to make the mouse icon to grab cursor icon.

Lightbox

Open Image in Lightbox

Enable or Disable this option to open the images in the lightbox when click on a single image. Enabling this option will reveal some more options too.

Image Size

Here you can change the Size of the Image when opened in Lightbox.

Lightbox in Gallery Mode

Enable this option If you want a gallery in lightbox, this will show next & prev arrow in the Lightbox to switch to another Image in carousel.

Display Caption

Enable this option If you want to show Image Caption in lightbox. You can set Image caption by opening the Image in Media Library.

Design Options

Layout

Horizontal Alignment

Change the horizontal alignment of the images. If you have small and big size images in the carousel then this option would be helpful.

Element

Arrow Position

Change the arrow position to inside or outside of the carousel.

Mobile Arrow Position

Change the arrow position to inside or outside of the carousel for Mobile Devices only.

Arrow Size

Change the font size of the arrow.

Arrow Color

Change the color of the arrow.

Arrow Background Color

Change the background color of the arrow.

Pagination Placement

Here you can change the Position of the Pagination dots vertically.

Pagination Active Color

Change the color of the Active dot in the Pagination

Pagination In-Active Color

Change the color of the In-Active pagination dots here

Image

This is the place where you can add corner radius, borders, box shadow and more stuff to the carousel images.

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.

How to add URL to each Carousel Image

Adding a URL to the Image

If you want to add a URL to each Carousel Image you can do that easily. All you've to do is open up that Image in the Media Library and add the Custom URL to it there. So when a user will click on the Image they’ll be taken to that URL that you added to Image. It will only work within Divi Supreme Modules.

Adding Download link to the Image

If you want to let your users download a file when they click on the image you can simply enter the URL of that download file and check the option “Download as File”.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/N6VfRHIpbk/Download-as-file.png (Download-as-file.png)

That's it!

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 Text Notation Module

Accepted Answer

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

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/UWmk1dXVyj/text%20notation%20Module%20conent%20options.PNG (text notation Module conent options.PNG)

Before Text

Here you can specify anything you want to show Before the Notation Text.

Notation Text

Add the Notation text here, the Animation effects will be added to this Text.

After Text

Here you can specify anything you want to show After the Notation Text.

Notation Settings

Type

Choose the Type of the Animation around the Text here from 7 different Animation effects.

Underline
Box
Circle
Hightlight
Strike Through
Crossed Off
Bracket

Color

Choose the Color of the Notation Animation here.

Stroke Width

Change the width of the annotation Stroke here.

Iterations

By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations.

Animate in Viewport

Here you can set a custom value for the Animation to play at a specific Viewport.

Delay

Add a delay to the Notation Effect to start after the time you'll set.

Design Options

Heading Settings

Heading HTML Tag

Here you can change the Heading HTML Tag of the Notation text and Before/After Text.

Main Text

You can play around with the text Design settings here. The changes you’ll make here will be applied to all the texts i.e Notation Text and Before/After Text.

Before, Notation and After Text

You can easily style the Before, Notation and After text in the same way you style text in the Text Module(came with Divi Builder). And we’ll only discuss those options which are added by Notation Text Module to style the text’s background, padding and stuff.

Background Color: Here you can add color to the Background of the Before, Notation and After text.

Margin and Spacing: Add some Margin and Spacing to the Before, Notation and After text, if you want to add some spacing on both sides of Before, Notation and After Text.

Display: You can change the display property of the text to Inline Block and Block.

Inline Block displays the text in the same line as other texts.
Inline is very similar to Inline Block but it helps your text to remain on the same line when added Padding to the Before, Notation and After Text. Margin will not work with this Display Property.
Block Displays the text by making it a block means other texts will not be displayed in the same line.

And you can play around with Before, Notation and After text by adding different colors, text-shadows, border, border-radius and more to each text.

Notation Text Module Advanced Options

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

Question 18

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 19

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 20

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.