Question 1

Divi Animated Gradient Text Module

Accepted Answer

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

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

Content Options

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

Content

Animated Gradient Text

Put your text here which will have an animated gradient.

Animated Gradient Settings

Gradient Direction

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

Animation speed (s)

Change the Speed of animation here.

Design Options

Heading Settings

Heading HTML Tag

Change the tag of the heading from H1 to H6.

Animated Gradient Text

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

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

Advanced Options

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

Question 2

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 3

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 4

Divi Contact Form 7 Module

Accepted Answer

Big fan of Contact Form 7 plugin? Now with Supreme Contact Form 7, you can select your contact Form from the dropdown list without having to go back and forth switching between Visual Builder and Contact Form 7 setting page copying the shortcode and adding to the Divi Code Module. Style your Input Fields, Button, Labels, Validation, Error Messages and more!

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/lgJnQAR33u/showcase-1-768x882.png (showcase-1-768x882.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/tNTKf7dRDs/dsm-cf7-content-694x1024.png (dsm-cf7-content-694x1024.png)

Contact Form 7

Select a contact form that should be used in the module. You can create new contact form 7 using the Contact > Add New page in your WordPress Dashboard. Each time you create a new contact form, the form will be selectable in this dropdown menu.

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

Labels

This is where you can style your label tag.

Bottom Spacing

The bottom spacing of the label.

Input, Textarea & Select

This is where you can style the Input, Textarea & Select such as background color, fonts, field rounded corners, border and more!

Placeholder

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

Radio & Checkbox

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

File

If you are using a File on your Contact Form, this is where you can style the File such as fonts, padding and background color.

Padding

Padding is the space added inside of your file wrapper, between the edge of the file and its internal elements. You can add custom padding values to any of the file wrapper’s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.

Background Color

Here you can choose a background color for your file.

Error Messages

Here you can style the appearance of your Error Message. Make sure you turn on "Show Error & Validation Messages" in the Content Tab in order to view them in Visual Builder.

Background Color

Here you can choose a background color for your Error Messages.

Validation Error Messages

Here you can style the appearance of your Validation Error Messages. Make sure you turn on Show Error & Validation Messages in the Content Tab in order to view them in Visual Builder.

Background Color

Here you can choose a background color for your Validation Error Messages.

Validation Success Messages

Here you can style the appearance of your Validation Success Messages. Make sure you turn on Show Error & Validation Messages in the Content Tab in order to view them in Visual Builder.

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 5

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 6

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 7

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 8

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 9

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 10

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.