Question 1

Where to Put Facebook APP ID

Accepted Answer

All the Facebook Modules in the Divi Supreme use the Facebook APP ID to work perfectly and for this, you should have created an APP ID from the Facebook Developers site.

To first create a Facebook APP ID, you may see this guide here: https://docs.divisupreme.com/knowledgebase/how-to-create-facebook-app-id/

When you’re done with creating your Facebook APP ID you can now put it in Divi Supreme Plugin’s Page Settings. For this go to** Divi Supreme > Social Media Settings**:Good Luck!

Question 2

How to Create Facebook APP ID

Accepted Answer

Setup Facebook App ID

You will need your own Facebook account in order to create the Facebook App ID so ensure that you have created a free account by going to Facebook first before starting this guide.

Step 1: Login to Facebook and go to developers site

Ensure you are logged into your Facebook account and go http://www.facebook.com/developers

Step 2: Create Facebook Application

To create your App ID, head to the Facebook Developers site. As long as you’re logged into your regular Facebook account, you should see the button to Add a New App.

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

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

Step 4: Navigate to Settings -> Basic

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

Step 4: Obtain Facebook APP ID

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

Question 3

Divi Library Shortcodes Extension

Accepted Answer

If you ever wanted to use a Divi Module inside another module then this extension will be helpful. Using this Extension you can easily put a Divi Layout(Saved in your Library) inside of any module where you can write text. When you’ll enable this extension you’ll then see a Shortcode added for your Layout you’ve saved in Divi Library. This is a free extension which means it can also be found in our Free Plugin.

Before Using Divi Popups:

Before you start using the shortcode extension make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable Divi Library Shortcodes and the Click on the Save Changes button.

Usage

When you’ll enable this extension from the plugin settings you can open up the Divi Library and you’ll see shortcode for each layout in the Library.

Question 4

Divi Read More Extension

Accepted Answer

This will allow you to Collapse Long Texts into Nested form. Providing you more way to Showcase Long Texts or Paragraphs on your Divi Website.

Currently, the available supported modules are listed below:

Text Module
Blurb Module
Call-to-action Module
Blog Module

Before Using ReadMore Extension:

Before you start using the Read More Extension make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable ReadMore Content and the Click on the Save Changes button.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/oJb6m3Rcv6/readmore%20content%20enable.png (readmore content enable.png)

Usage

Q: Divi Supreme Pro License

License Important: If you've purchased from Divi Marketplace, you don't need an account on our site because you'll get updates automatically without adding a License key. The Divi Marketplace plugins are linked to your ElegantThemes account. That's the only difference between our version and the Marketplace version and the 30% off renewal through our website.> Getting License Key You can obtain your license key by logging in to Your Account -> Orders -> License Manager. You will also receive an email regarding the license key for your Divi Supreme Pro. License Activation Right after activating the plugin, you will see a notification “Divi Supreme Pro: Please enter your license key to get regular update”. The license activation is only required to receive automatic updates. https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Zq7ywr54C0/license-activate-1536x740.png (license-activate-1536x740.png) Deactivate License You can either login to Your Account -> Orders -> License Manager and deactivate from there or simply just login to your WordPress site and from the admin menu, navigate to Divi Supreme Pro -> License. Check License Key Expiry Login to Your Account -> Orders -> License Manager and from there you will able to see your license expiry date. Renew License Key Login to Your Account -> Orders -> License Manager/View and from there you will able to see a renew button.

To use Read More Extension, go to any of the supported modules (listed above) settings and navigate to the Advanced Tab Scroll to Visibility and look for Use Read More Switch.

Use Read More

This will enable or disable the Read More extension.

Show on Mobile Only:

Using this you can Collapse text for Mobile Devices only making it more Responsive.

Collapsed Height:

You can select the Height of the text to be shown and after the height will end the Read More text will show to show the full text.

Read More Text:

Enter your own Text for the Read More Text e.g. Show Full Text, Continue Reading.

Close Text:

Enter your own Text for the Close Text e.g. Show Less Text, Stop Reading.

Designing the Read More Text

Font: Change the Font of the Read More Text.
Font-weight: Change the Weight of the Read More Text.Font Style: Change the Style of the Read More Text.
Font Style: Change the Style of the Read More Text(Italic, UpperCase, Underline and more).
Text-Alignment: Change the Alignment of the Read More Text.
Text Size: Change the Size of the Read More Text.
Link Text Color: Change the Color of the Read More Text.

Use Shadow

It will add a very Nice Shadow to the text will make it more attractive for the visitors

Question 5

Divi Responsive Viewer Extension

Accepted Answer

Introducing Responsive Viewer Extension for Divi. Want to create even more responsive websites with Divi then this extension is made for you.

Breakpoint Presets Preview

Save your precious time and preview all your responsive design in different breakpoint with just a few clicks.

Custom Breakpoint Preview

Besides choosing from the presents, You can also set your own custom responsive sizes right in the Divi Builder.

Perfect Responsive

It’s time to make your mobile Divi sites even better. Preview your beautiful design for iPhone, iPad, Android devices or even the biggest or smallest mobile devices.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/sxcCVjYWLd/dsm-responsive-viewer.gif (dsm-responsive-viewer.gif)

Before you start using

Make sure that the extension is enabled from Divi Supreme’s Settings page for it to work.

How it Works?

After enabling the extension you’ll now be able to see more responsive sizes when you’re editing your page using Visual Builder, Backend Divi Builder, and Theme Builder. When you’ll go to Mobile view you’ll now see some more screen sizes and a field where you can set your own custom size.

Backend Builder Preview

Here’s a quick look at how it Looks like in the Backend Divi Builder. If you love to use the Divi Backend builder that don’t worry this extension also work perfectly there.

Theme Builder Preview

This extension also works with the Divi’s Theme Builder helping you to create more responsive Header, Footer, Archive pages and more. Here’s a quick look

Question 6

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 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 Popup Extension

Accepted Answer

Divi Supreme's Popup extension opens a whole new world for Creating Popups in Divi. It makes it really easy while creating Popups of anykind. It's a whole new solution that works really nice with Divi.

This extension will extend the Visibility Option in all the Module setting that will allow you to use the Popup.

Currently, the available supported modules are listed below:

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

Before Using Divi Popups:

Before you start using the whole new solution of Popups make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable Supreme Popup and the Click on the Save Changes Button.

Usage

To use Divi Popups 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 Popup Switch.

Use Popup

This will enable or disable the Popup extension.

Popup Type:

This is where you can choose the Popup type.

Layout: You can choose this option to select a layout from Library to be shown in Popup.
iFrame: Using this Popup type you can load a web URL in the Popup.
Image: You can use this to show an image in the popup. You’ll be prompted to upload an image or select from Media Library..
Video: Using this Popup type you can show a video in the Popup just enter the URL of the video and you’re good to go..

Popup (Divi Library):

This is an interesting part where you can choose any Layout from your Library to show in Popup.

Trigger On:

This is where you can choose how to trigger the Popup.

Module Click: The Popup will be triggered when the whole module is clicked.
Button Click: If the module is Button the popup will only be triggered when exactly the button is clicked.
Image Click: If the module is an Image the popup will only be triggered when exactly the image is clicked.
Hyperlink Click: If there is any link in your text module then selecting the Hyperlink method will show the Popup when the link is clicked.
By ID: Select this Trigger Type to open the Popup from any element click If It has that ID.
By Class: Select this Trigger Type to open the Popup from any element click If It has that Class.
Page Load: If selected the Popup will be shown on Page Load
—–Timed Delay: Set the Duration for the Popup to show.
—–Cookie Expiry: Set the Expiry in days after then the Popup will be shown again.
—–Use Custom Cookie Expiry Date: Set your own Custom Expiry for the cookie.
Scroll: If selected the Popup will be shown only then when you’ll scroll to that module.
—–Timed Delay: Set the Duration for the Popup to show.
—–Cookie Expiry: Set the Expiry in days after then the Popup will be shown again.
—–Use Custom Cookie Expiry Date: Set your own Custom Expiry for the cookie.
Exit Intent: If selected the Popup will be shown when you’re about to leave the Browser Tab.

Close Popup Triggers:

This is where you can choose the way your popup should be closed.

Outside Popup: The Popup will close after clicking anywhere outside of the popup.
Close Button: A button will be shown to close the popup you can change the icon of the button and play with colors as well.

Use Auto Close Popup:

Enabling this option will let you close your popup after time you’ll enter in the field.

After Time Passed (in s): A button will be shown to close the popup you can change the icon of the button and play with colors as well. *

Entrance Animation In:

This is where you can choose the Entrance Animation of your Popup from 43+ Different Animations.

Exit Animation In:

This is where you can choose the Exit Animation of your Popup from 43+ Different Animations.

Popup Position:

This is where you can choose where on the screen the popup will show. There are 9 places you can select from:

Top Left
Top Center
Top Right
Center Left
Center
Center Right
Bottom Left
Bottom Center
Bottom Right

Popup Position Type:

Absolute: If selected the popup will be shown as simple content on page it will scroll with page scroll.
Fixed: If selected the popup will be fixed on screen it will stay on front even on page scroll. Very great for Cookie Notice.

Use Fullwidth:

Here you can enable this option to make the popup content to be shown on full screen.

Popup Max Width:

Here you can enable this option to make the popup content to be shown on full screen.

Show Overlay:

You can choose this option whether you want to use the background overlay or not

Overlay Background Color:

Here you can change the width of the slider.

Show Close Button:

Using this Switch you can Show or Hide the Close button to Close the Popup.

Close Button Placement:

Here you can change the Placement of the Close Button Inside or Outside.

Inside: This will show the Close Button inside of the Popup.
Outside: This will show the Close Button outside of the Popup.

Close Icon Font Size:

Here you can change the size of the close button.

Close Button Icon:

You can change the Icon of the Close button to your Desired one from the Whole Divi Icon Library.

Close Button Background Color:

Here you can change the Background Color of the Close Button Icon.

Close Button Icon Color:

Here you can change the Color of the Close Button Icon.

Some Tutorial/Helpful Links for you to get started with Divi Popup Extension:

How to create Popups using Divi Popup Extension - Complete look at all the Features

How to Create Beautiful Popup with Divi Supreme - A simple popup + Free Layout

10 Beautiful Popup Layouts to Get Started with Our Popup Extension

How to Open Popup from Menu Item Click

So we've been getting a lot of requests on this from Customers to open the Popup from the Menu Item. So Finally, there's a way to Open It from any Menu Item you wish.

Step 1: Go to Divi -> Theme Builder -> Edit Global Footer and here add an empty Text Module.

Step 2: Then Set up your Popup in this Module the way you wish. And make sure to change the Trigger type to "By Class" and then enter the class "open-popup" (You can add any class here).

Step 3: Now go to Appearance -> Menus and here click the "Screen Option" at the top and check the "CSS Classes" option.

Step 4: Now add that class to any Menu Item you wish to Open the Popup from.

Video Walkthrough:

Question 9

General Info - Divi Extensions

Accepted Answer

Divi Supreme features a huge collection of custom creative modules and extensions that can be used in the Divi Theme, Extra Theme and the Divi Builder. We will keep on adding and enhance Divi Supreme Pro where you can find extra features for Divi to help you build better websites.

Currently, the available extensions are listed below:

Divi Popup
Divi Scheduled Element
Divi Easy Theme Builder
Divi Responsive Viewer
Read More
Divi Library Shortcodes

Enable Extensions

To enable Divi Supreme Extensions, login to your WordPress admin panel, then on your admin menu, look for Divi Supreme Pro here you can then choose which extension you'd like to use just enable it to start using it.

Question 10

Divi Supreme Pro Plugin Update

Accepted Answer

Updating Plugin

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

Question 11

Divi Supreme Pro License

Accepted Answer

License

Important: If you've purchased from Divi Marketplace, you don't need an account on our site because you'll get updates automatically without adding a License key. The Divi Marketplace plugins are linked to your ElegantThemes account. That's the only difference between our version and the Marketplace version and the 30% off renewal through our website.>

Getting License Key

You can obtain your license key by logging in to Your Account -> Orders -> License Manager. You will also receive an email regarding the license key for your Divi Supreme Pro.

License Activation

Right after activating the plugin, you will see a notification “Divi Supreme Pro: Please enter your license key to get regular update”. The license activation is only required to receive automatic updates.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Zq7ywr54C0/license-activate-1536x740.png (license-activate-1536x740.png)

Deactivate License

You can either login to Your Account -> Orders -> License Manager and deactivate from there or simply just login to your WordPress site and from the admin menu, navigate to Divi Supreme Pro -> License.

Check License Key Expiry

Login to YourAccount -> Orders -> License Manager and from there you will able to see your license expiry date.

Renew License Key

Login to Your Account -> Orders -> License Manager/View and from there you will able to see a renew button.

Question 12

Divi Lottie Module

Accepted Answer

Lottie is an iOS, macOS, Android, and React Native library that renders After Effects animations in any native app. And we’re bringing it to Divi with a Custom Module that’ll let you add beautiful animations with ease.

Click here to see live demo.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/efKqxhL969/content%20options.PNG (content options.PNG)

Lottie JSON File

Here you’ll need to upload the .JSON File that you’ll download from LottieFiles and you don’t have to worry about uploading a .JSON File because Divi Supreme already did it for you.

Loop

If you want to keep running/Looping enable this option.

Number of Times

Here you can specify the number of times the Animation will Loop. If you enter 2 the animation will loop 2 times and then it will stop.

Direction

Here you can change the direction of the animation it maybe either Normal or Reverse.

Speed (More is Faster)

Here you can change the speed of the animation the more value you’ll enter here the more speed of the animation will be.

Trigger

Enable this option to trigger the animation on Hover or Click.

Trigger Method

Play Animation on Hover/Mouse over - This option will let you play the Lottie Animation when you hover the mouse on the Animation.
Play Animation on Click - This option will let you play the Animation on click. So when you'll click the Animation it will play.
Play Animation on Scroll - (A great addition) This will let you animate the Animation on Scroll. Create something extraordinary.

Relative To

Entire Page - You can relate the animation Scroll to Entire Page, more option will be added in upcoming Updates!

On Mouseout action

This option will show if you select the Animation Trigger method as "Hover". And it will let you do different things with Animation like Stop, Pause or Reverse the Animation when you move the mouse away from the Module.

Animate in Viewport

Here you can play around with animation to play at a specific viewport.

Design Options

Because It’s an animation you don’t need to do any design settings here. But if you want then you can add a Box Shadow, Corner Radius and Play around with other settings here.

Advanced Options

Use the advanced options to give your Lottie 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 Before After Image Slider Module

Accepted Answer

The Divi before after image slider module allows you to display the before and after versions of an image by simply sliding over them. Users will be able to move a slider to easily compare the two images.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/nMvcApx2MN/dsm-before-after-image-slider-demo-min.png (dsm-before-after-image-slider-demo-min.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/n1Wpk7dxic/dsm-before-after-image-slider-ss-min-453x1024.png (dsm-before-after-image-slider-ss-min-453x1024.png)

Note: Make sure that the images that you’ll place in before and after image section should be the same size, or it will make it look bad.

Images

The Image you’ll add in the first section will be the Before Image and the second one will be the After image. When you’ll add images you’ll see these options for before and after images:

Before/After Image Alternative text

This defines the HTML ALT text. A short description of your image can be placed here.

Before/After Image Title Text

This defines the HTML Title text.

Labels

Before Label text

Here you can define a custom Label text for the Before label text.

After Label text

Here you can define a custom Label text for the After label text.

Show Labels on Hover

Enable this option If you'd like to show labels on Hover only. Disable to always show the labels.

Settings

Default Offset Percentage

Here you control the position of the handle (that you use to see before and after) when the page loads. For example, If you set the offset to 0 the handle will be on the very left, and if it’s 0.5 the handle will be in the center.

Orientation

Here you can control the orientation for the handle to either Horizontal or Vertical.

No Overlay

When you hover to the Before After Image module you see an Overlay, enabling this option will remove the overlay when you hover.

Move Slider on Hover

If enabled, when you’ll hover over to the image the handle will move as the mouse moves.

Move Slider with Handle

Allow a user to swipe anywhere on the image to control the handle movement.

Click to Move slider

Allow a user to click (or tap) anywhere on the image to move the handle to that location.

Design Options

Before and After Label

This is where you can design the Before and After Label, you can add a custom background color, you can change the label font, size, color, and more.

Overlay

Here you can define a custom color for the overlay that shows when you hover over the image.

Handle Slider

Here you can design the Handle that is used to see before and after image.

Handle Border Color

You can change the color of the Handle border to your custom one.

Handle Border Radius

You can add some Corner radius to the Icon that you see in the center of the slider.

Handle Background Color

This is where you can change the background color of the handle icon.

Handle Arrow Color

This is where you can change the color of the handle icon.

And even you can add Some box-shadow, corner radius and Border to the module in the design settings the same way you do with other Divi modules.

Advanced Options

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

Divi Block Reveal Text Module

Accepted Answer

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

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

Content Options

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

Block Reveal Text

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

Block Reveal Animation

Block Reveal Animation style

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

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

Block Reveal Color

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

Delay

Adjust the Delay of the Block Reveal Animation here.

Animate in Viewport

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

Design Options

Text

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

Heading HTML Tag

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

Advanced Options

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

Question 15

Divi Block Reveal Image Module

Accepted Answer

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

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/xSzxD8AwfS/block-reveal-image-module.png (block-reveal-image-module.png)

Image

Add the Actual Image here that will be shown after a cool animation.

Link

Open in Lightbox

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

Open as Video Popup

Put the Video link on the Image URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. Then If you click on the Image a video Popup will be shown.

Block Reveal Animation

Block Reveal Animation style

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

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

Block Reveal Color

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

Delay

Adjust the Delay of the Block Reveal Animation here.

Animate in Viewport

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

Design Options

Overlay

Image Overlay

Enable this switch if you want to add overlay color or icon or both to the image.

Overlay Color

Change the color of the overlay on the image to your own one.

Use Icon

You can enable this option if you want to show an icon in the overlay. And then can choose any icon from the Divi Icon Library and Change it’s color as well.

Overlay Rounded Corners, Border and Box Shadow

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

Add Rounded Corners, Border and Box Shadow to Image

Here you’ll find options to control the corner radius of the Image. You can play around with adding borders and Box Shadow to the Image under Design Options.

Advanced Options

Use the advanced options to give your Block Reveal 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 16

Divi Text Rotator Module

Accepted Answer

The Divi text rotator module allows you to take any text and rotate it with different phrases so you can create attractive headlines for your Divi site. Choose from any 36 animations to make your message pop.

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

Content Options

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

Rotator Text

Here you can add as many texts as you want that will have the Rotating Animation effect. You can click on the + Add New Item button to add new text that will get the Rotating effect.

Before Rotator Text

Here you can add some text that will be shown before the Rotator Text and it will not have any Animation effect.

After Rotator Text

Same goes for this, the text you’ll add here will be shown after the Rotator text and will not get any animation.

Rotate Animation

This is where you can change the animation effect of the Rotator Text. You get over 36 Animations to choose from.

Rotate Speed

Here you can specify the Speed of the Animation of the Rotating text.

Pause on Hover

When you’ll enable this option It will pause the Rotating animation on hover/mouseover.

Change on Click

You can enable this switch to let users change the Word when they click on the Rotating text.

Design Options

Heading Settings

Heading HTML Tag

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

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 Rotator Text and Before/After Text.

Before, Rotator and After Text

You can easily style the Before, Rotator 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 Text Rotator Module to style the text’s background, padding and stuff.

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

Margin and Spacing: Add some Margin and Spacing to the Before, Rotator and After text, if you want to add some spacing on both sides of Before, Rotator 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, Rotator and After text by adding different colors, text-shadows, border, border-radius and more to each text.

Rotator Text Module Advanced Options

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

Question 17

Divi Facebook Embed Module

Accepted Answer

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

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

Content Options

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

Facebook APP ID

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

Type

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

Type as Post

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

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

Type as Video

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

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

Design Options

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

Advanced Options

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

Question 18

Divi Facebook Like Button Module

Accepted Answer

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

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

Content Options

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

Facebook APP ID

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

URL

Here enter the URL of your Facebook Page

Layout

Change the type of Layout from 4 Different Layouts:

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

Show Faces

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

Action

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

Show Share Button

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

Size

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

Design Options

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

Advanced Options

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

Question 19

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 20

Divi Card Carousel Module

Accepted Answer

A creative and fully customizable Divi Carousel module to display a beautiful combination of texts, links, badge and image in a Carousel Slider. Control and customize almost everything in this powerful carousel module. It comes with image and video lightbox/popup for Image and Button and many more Carousel Settings. You can design an unlimited number of carousels with this module.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Uq9D05ajrw/card-carousel-showcase-1-1024x465.png (card-carousel-showcase-1-1024x465.png)

Content Options

Adding Carousel Items

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

See below for individual Carousel Item settings.

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

Carousel Settings

Carousel Effect

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

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

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

Slides to Show

Change the number of slides you want to show in the carousel. You can enable the responsive option to adjust it for different screen sizes.

Slides to Scroll

Change the number of slides you want to scroll when click on the arrow key to see the next slides.

Slides Speed

Adjust the speed of the slider when changing the slides.

Autoplay

You can enable this option to slide Carousel Items automatically.

Autoplay Change interval

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

Pause on Hover

Enable this option if you want to stop the Autoplay when Hover over to Carousel.

Spacing

Add some spacing between carousel Items.

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.

Equalize Card Heights

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

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 change the mouse icon to grab cursor icon.

Design Options

Layout & Alignment

Layout

Change the type of layout to Stacked or Inline.

Stacked will place the image on top and content on the bottom.
Inline will place the content Inline which means Image and content both in the same line.

Layout type Inline Settings

If you’ll select your layout type you will be able to see these options:

Width: Change the width of the image
Order Alignment: Change the alignment of the image to Left(Places the image on the left side of the content) or Right (Places the image on the right side of the content).
Horizontal Content Alignment - This option will let you align the content to Top, Center or Bottom, most helpful while using the inline layout type.

Image

Make changes to the image here.

Image Width

You can change the Image Width here.

Stretch Image

Enabling this option will stretch the img tag and set a maximum width for the image. This allows for more control over the image’s display, ensuring it fits well within the module’s layout while maintaining its aspect ratio.

Image Alignment

You can change the Image Alignment here to Left, Right or Center.

And you can make design changes to the image here. 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.

Badge

Change badge’s position color, background color and more here.

Position

Change the position of the badge anywhere on the Image.

Background Color

Change the background color of the badge to your desired one.

Padding

Add padding to the badge here to expand it more.

And you can play with the badge text by changing its font, size, color and weight and even add shadow to the badge text.

Add Rounded Corners, Border and Box Shadow to Badge

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.

Arrow Element

This is the place where you can add custom styles to the arrow icons.

Arrow Position

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

Mobile Arrow Position

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

Use Arrow Custom position

Enable this option if you want to add both arrow icons to your custom position.

Use Custom Previous Arrow Icon

Enabling this option will let you use a custom icon for the Previous Arrow. You can browse many Icons from Divi Icon Library.

Use Custom Next Arrow Icon

Enabling this option will let you use a custom icon for the Next Arrow. You can browse many Icons from Divi Icon Library.

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.

Arrow Rounded Corners

Add Rounded corners to the Arrow Icons.

Arrow Border and Box Shadow

Add Border and Shadow to the arrow Icons.

Pagination Element

Pagination Horizontal Placement

Change the horizontal position of the pagination dots.

Pagination Active Color

Change the color of the current pagination dot.

Pagination In-Active Color

Change the color of all the other pagination dots.

Other Titles, Subtitle, and Body Texts

And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels.

Button

Enable Use Custom Styles for the button to add custom stylings 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.

Align Button Vertically

Enable this option, If you'd like to vertically align the button. This option will be shown If you've enabled the "Equal Height" option in the Carousel Settings Panel. You can align the button to Top, Center or Bottom from here.

Border

Card Corner Radius - Add Rounded corners to the single card item.

**Card Border **

Box Shadow

Add Shadow to the Single Card Item to make it look more natural.

Advanced Options

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

Carousel Item Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/7xWNq8kJ4o/dsm-card-carousel-module-item-content-options.png (dsm-card-carousel-module-item-content-options.png)

Text

Title

Enter your title text here. You can take out the text if you don’t want the Title text.

Subtitle

Enter your subtitle text here. You can take out the text if you don’t want the subtitle text.

Content

Enter your description text here. You can take out the text if you don’t want the description text.

Image & Badge

Manage your Image and Badge text here.

Image

Add an image from your Library here.

Use Image as background

Enable this option to use the image as the background so you can play around with the position and Height of the image and even add hover animation to the image.

Image Height

Change the height of the image by sliding the slider.

Background Image animation

Add animation to the image from 4 different animations and to even add more in upcoming updates.

Animation Speed (in ms)

Change the Hover Background Image Speed from here in ms.

Open as Image Lightbox

Enable this option if you want to open the image in the lightbox when clicked. When you’ll enable this option you’ll then add an image from your library which will be opened in Lightbox.

Open as VideoLightbox

Enable this option if you want to show a video in an overlay. When you’ll enable this option you’ll then asked to put the URL of the video in field and module will do the rest.

Badge Text

Add text to the Badge here. You can take out the text if you don’t want the badge text. You can also add a link to the badge under the link panel.

Button

Button text

Add text to the button here you can always remove the text of the element which you don’t want.

Button URL

Add a URL to the button here.

Open as Image Lightbox

Enable this option if you want to open an image in the lightbox. When you’ll enable this option you’ll then add an image from your library which will be opened in Lightbox. And when you’ll click the button an image will be shown in Lightbox.

Open as Video Lightbox

Enable this option if you want to show a video in an overlay. Make sure you’ve added the video link to the Button URL field. And when you’ll click the button the video will be shown in Lightbox.

Item Design Options

Image

Image Overlay

Enable this switch if you want to add overlay color or icon or both to the image.

Overlay Color

Change the color of the overlay on the image to your own one.

Use Icon

You can enable this option if you want to show an icon in the overlay. And then can choose any icon from the Divi Icon Library and Change it’s color as well.

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.

Badge

Change badge’s position color, background color and more here.

Position

Change the position of the badge anywhere on the Image.

Use Custom Position

Enabling this switch will let you position the badge on your own custom position on the image.

Background Color

Change the background color of the badge to your desired one.

Padding

Add padding to the badge here to expand it more.

And you can play with the badge text by changing its font, size, color and weight and even add shadow to the badge text.

Add Rounded Corners, Border and Box Shadow to Badge

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.

Other Titles, Subtitle, and Body Texts

And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels.

Button

Enable Use Custom Styles for the button to add custom stylings 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 Card Carousel module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.