Question 1

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 2

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 3

Divi Image Text Reveal Module

Accepted Answer

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

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

Content Options

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

Reveal Text

This field is where you can enter the reveal text.

Image

Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image.

Admin Label

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

Design Options

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

Overlay

Reveal Overlay Color

This option allows you to customize the reveal overlay color.

Animation

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

Advanced Options

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

Question 4

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

License Key Activation Issue

Accepted Answer

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

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

That's it. Good luck.

Question 7

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 8

Divi Business Hours Module

Accepted Answer

Want to add Business hours to Divi? And you are looking for some Plugin in the WordPress Repository? Divi Supreme got a new Module Called Business Hours, with this Module for Divi you can easily add business hours to Divi Builder without installing any sort of plugin. The setup is very simple and you can easily make attractive Business hours Section in Divi.

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

Content Options

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

Business Hours

You can make Business hours of your choice just click on +Add New Item and then Choose Days and Time of your Business. You can add as many items you want by clicking on the +Add New Item button.

Design Options

Every Divi module has a long list of design settings that you can use to change just about anything.

In the Design Option, you can style your module in different ways that came by default with Divi but some options that are added by Divi Supreme plugin are these:

Day Text:

This is where you can style the Day text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Day Text looks.

Time Text

This is where you can style the Time text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Time Text looks.

Separator

You can add a separator line between Day and time from 8 different selections.

Weight: You can change the weight of the line i.e 2px

Color: You can change the color of the line

Gap Spacing: You can change the gap spacing between the Day and Time Text.

Divider

You can add a Divider underneath every Business hours item.

Spacing

Item Spacing: This is where you will choose how much spacing should be added to business hours. Padding is the space added inside of your business hours items.

Advanced Options

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

Business Hours Item Content

Text

Time

Here put the time period you want to set for your business.

Day

Here put the Day name.

Business Hours Design Options

In the Design option, you can change font, colors and many more of a particular item.

Day Text:

This is where you can style Day text. As mentioned before.

Time Text

This is where you can style the Time text. As mentioned before.

Business Hours Item Advanced Options

Use the advanced options to give your Business Hours Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling.

Question 9

Divi Icon Divider Module

Accepted Answer

Create an organized and unique Icon Divider with Supreme Icon Divider Module. With many border styles to choose from. You can put an icon in-between the Dividers or align them to suit your design.

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

Content Options

Use Icon

When using Icon Divider, you can choose to either use an Icon or and Image with your text. If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customize your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead.

Icon

If you chose “yes” for the “Use Icon” setting, then this option will appear. This options presents you with a list of available icons that you can use with your Perky Animate text. Simply click on the con that you would like to use and it will appear in your Icon Divider.

Image

If you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. However, your image will never scale larger than its original upload size. The height of the Icon Divider image is determined by the aspect ratio of your original image, so making all of your Icon Divider images the same height is a good idea if you are placing them side by side.

Background

Background Color

Here you can choose a background color for your module.

Background Image

Here you can choose a background image for your module.

Admin Label

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

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.

Image & Icon

Icon Color

If you chose “yes” for the “Use Icon” setting, then this option will appear. This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color.

Circle Icon

If you chose “yes” for the “Use Icon” setting, then this option will appear. This options allows you to place your icon within a colored circle. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border.

CIRCLE COLOR

If you chose “yes” for the “Circle Icon” setting, then this option will appear. Here you can pick a color to use for your circle. This color is independent from your Icon color selected earlier. You icon, in it’s color, will appear inside this a circle with the color you select here.

Show Circle Border

If you chose “yes” for the “Circle Icon” setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color.

CIRCLE BORDER COLOR

If you chose “yes” for the “Show Circle Border” setting, then this option will appear. Here you can adjust the color of the circle border.

Use Icon Font Size

If enabled, you can input a custom size for the icon that is displayed.

Alignment

This controls the divider alignment of the Icon Divider.

Color

You can choose your desired color from the color picker for the divider color. This will be apply a color to the divider only.

Styles

Here’s where you can style the divider appearance.

Divider Style

Here you can choose your divider style such as solid, dotted, dashed and etc.

Divider Position

This controls the vertical alignment of the Icon Divider.

Sizing

Here’s where you can style the Text Divider appearance.

Divider Weight

You can input a custom weight for the Divider which also refers to the thickness of the line.

Icon Gap

The Gap space between the icon and the divider.

Advanced Options

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

Question 10

Divi Animated Gradient Text Module

Accepted Answer

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

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

Content Options

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

Content

Animated Gradient Text

Put your text here which will have an animated gradient.

Animated Gradient Settings

Gradient Direction

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

Animation speed (s)

Change the Speed of animation here.

Design Options

Heading Settings

Heading HTML Tag

Change the tag of the heading from H1 to H6.

Animated Gradient Text

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

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

Advanced Options

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