Question 1

Divi Typing Effect Module

Accepted Answer

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

# Content Options ## Text **Before Text** This will add a static text before the typing effect. **Typing Effect Text** This will have an animated typing effect on your Title. To seperate the words in typing effect, you will need to add “|” e.g text1|word|animating **Typing Text on a new Line** Enable this option If you'd like to have the Typing text on a new line. **After Text** This will add a static text after the typing effect. **After Text on a new Line** Enable this option If you'd like to have the After text on a new line. ## Typing Effect This is where you can configure the typing settings such as how quickly the typing effect and backspacing takes place, then delays before starting a sentence with just a few clicks, set the animation to loop infinitely or randomise the order of the sentences.

**Use Loop** If enabled, typing effect will loop infinite. **Remove Cursor After Completed** This option will show up only when you disable ‘Use Loop’. This will remove the cursor after typing finish looping their effect. **Typing Speed (in ms)** Here you can control the speed of the typing effect. Lesser value will have faster typing effect. **Typing Backspacing (in ms)** Delay before backspacing. **Back Delay (in ms)** Here you can delay before backspacing. **Use Typing FadeOut** This will have fade out animation instead of backspacing. **Use Typing Shuffle** Here you can choose to shuffle your Typing Effect text strings. **Cursor Character** You can have your own custom Cursor Character here. The character is “|” by default. You can put in any characters, letters or numbers. **Animate in Viewport** Choose when you'd like to start the Typing effect when it comes to Viewport e.g 50% or 80% etc **Repeat Animation in Viewport** Enable this option to repeat the Typing effect when it comes to Viewport again. ## Admin Label By default, your typing effect module will appear with a label that reads ‘Supreme Typing’ in the builder. The Admin Label allows you to change this label for easy identification. # Design Options Here you can find the option to style the Before Text, Typing Effect and the After text. You can style and/or position your text just how you want it by choosing the text color, orientation, font, font size, font spacing, and line height. You can also designate a border style, set a max width for your module, and add custom margin and padding. ## Before Text **Background Color** If you like to have a Background color to the text which is showing **Before** the Typing text then specify it here. **Padding** Add Some padding around the **Before** Text. Useful If you've added Background color to the Typing text. And else you can play around with changing the Font, Size, Color, Wieght and more of the **Before** Text ## After Text **Background Color** If you like to have a Background color to the text which is showing **After** the Typing text then specify it here. **Padding** Add Some padding around the **After** Text. Useful If you've added Background color to the Typing text. And else you can play around with changing the Font, Size, Color, Wieght and more of the **After** Text ## Typing Styles **Cursor Color** By default, the cursor color in typing effect will appear the same as your title font color. If you would like to change the color of your cursor color, choose your desired color from the color picker using this option. **Background Color** If you like to have a Background color to the text which is **Typing** then specify it here. **Padding** Add Some padding around the **Typing** Text. Useful If you've added Background color to the Typing text. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Question 2

Divi Text Badges Module

Accepted Answer

This will show a badge before or after the text. A great way to show highlighted/important text badge.

# Content Options **Main Text** This field is where you can enter the content of your text. Text content spans the full width of the column that it is in. **Badges Text** This field is where you can enter the badge of your text. **Badges Placement** Here you can define whether the badge should be before or after the main text.

## Background **Background Color** Here you can choose a background color for your module. **Background Image** Here you can choose a background image for your module. ## Admin Label By default, your Supreme Text Badges text module will appear with a label that reads ‘Supreme Text Badges’ in the builder. The Admin Label allows you to change this label for easy identification. # Design Options Here you can style and/or position your text just how you want it by choosing the text color, orientation, font, font size, font spacing, and line height. You can also designate a border style, set a max width for your module, and add custom margin and padding. ## Main Text You can style the Main text here. You can play around with changing the font, size, color, weight and more of the Main text. ## Badges Text Here’s where you can style the badges appearance. **Background Color** You can choose your desired color from the color picker for the badge background color. This will be apply a background color to the badge only. **Gap** The Gap space between the main text and the badge. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Question 3

Divi Text Divider Module

Accepted Answer

Create an organized and beautiful to read headlines with Supreme Text Divider Module. With many border styles to choose from. You can also put a text in-between the Dividers or align them to suit your design.

# Content Options **Divider Text** This field is where you can enter the content of your text. Text content spans the full width of the column that it is in. ## Background **Background Color** Here you can choose a background color for your module. **Background Image** Here you can choose a background image for your module. ## Admin Label By default, your Supreme Text Divider text module will appear with a label that reads ‘Supreme Text 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.

## 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 Text Divider. ## Text **Text Alignment** This controls the text alignment of the Text Divider. ## Divider Text You can change the Heading level of the Divider text here. And then you can style it the same way you style text in Divi. ## 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. **Text Gap** The Gap space between the main text and the divider. **Height** Define how much vertical space you would like your text divider module to create (in pixels). # 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 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.

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

Divi Image Module

Accepted Answer

The Supreme Image allows you to transform the image using 3D transformation. Rotate it like the way you always wanted without coding.

# Content Options **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. ## Link **Open in Lightbox** Here you can choose whether or not your image will open in a Lightbox when clicked. If enabled, then your image will “zoom in” to their full size when clicked inside a modal window. This is a great feature for portfolios. **Link URL** Place a valid web URL in this field to turn your Image into a link. Leaving this field blank will simply leave your image as a static element. **Use as Video Popup** Enable this option if you want to show a video in overlay when user clicks on the Image. You'll then prompted to enter the URL of the Video you want to show in the overlay ## Transform & Rotation

**Perspective** The perspective CSS property gives an element a 3D-space. The strength of the effect is determined by the value. **Rotate Y** Defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. **Rotate X** Defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. **Rotate Z** Defines a transformation that rotates an element around the z-axis without deforming it. ## 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 **Image Overlay** If enabled, an overlay color and icon will be displayed when a visitors hovers over the image. **Overlay Color** Here define a color for the Overlay. **Use Icon** Enable this option if you also want to show an icon in the overlay of image when hover. **Overlay Icon Color** Here you can define a custom color for the overlay icon **Icon Picker** Select an Icon from Divi Icon library here. **Show overlay on Hover** Enabling this option will only show the Overlay when hover to image. You can disbale this option if you want to always show the Overlay. **Overlay Rounded Corners and Border** You can then add Corner Radius and Border to the overlay if you like ## Alignment **Image Alignment** Here you choose which direction your image floats within the column. You can float the image left, right or keep it centered. **Always Center Image On Mobile** Often times small images are more pleasing to the eye on mobile devices when they are centered. As columns break down, images that were aligned the left or right in smaller columns become orphaned when the columns break down and become 100% width. Enabling this column with force images to align to the center of the column on mobile without affecting the image alignment on desktop computers. # 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 6

Before and After Image Module images are not loading correctly

Accepted Answer

LazyLoad have compatibility issue with most plugin out there especially when:

•Grid layouts that use fixed positioning/fixed widths

•e.g. some implementations of Isotope or Masonry

•JavaScripxs that try to calculate spaces based on image size

•Internet Explorer

•LazyLoad is not supported for IE8 and below

•Certain background images

•Depending on how they are added, not all background images can be LazyLoaded.

### If you're using WP Rocket plugin lazyload, here's the filter function to disable.

Copy and paste this function into your child theme function.php
```
function dsm_rocket_lazyload_exclude_class( $attributes ) {
		$attributes[] = 'class="dsm-before-after-image-slider-before"';
		$attributes[] = 'class="dsm-before-after-image-slider-after"';

return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'dsm_rocket_lazyload_exclude_class' );
```

### If you're using JetPack plugin lazyload, here's the filter function to disable.

Copy and paste this function into your child theme function.php
```
function dsm_exclude_image_class_from_lazy_load( $classes ) {
    $classes[] = 'dsm-before-after-image-slider-before';
    $classes[] = 'dsm-before-after-image-slider-after';
    return $classes;
}
add_filter( 'jetpack_lazy_images_blacklisted_classes', 'dsm_exclude_image_class_from_lazy_load', 999, 1 );
```

Question 7

Divi Tilt Image Module

Accepted Answer

The Supreme Tilt Image allows you to create a unique and cool images. An interactive parallax tilt effect that responds to mouse move. Apply an Overlay Icon or Text to the image for better visibility.

# Content Options ## 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. ## Tilt Settings

**Disable on Mobile** This will disable the Image Tilt feature for Mobile Devices. **Perspective** Transform perspective, the lower the more extreme the tilt gets. **Scale** Scale on hover. 2 = 200%, 1.5 = 150%. **Max Rotation** The Max Tilt Rotation. The lower the less rotation the tilt gets. **Speed** The Speed of the enter/exit transition. **Use Glare** If enabled, it will have a “glare” effect on hover. **GLARE** The glare opacity. **Reverse** This will reverse the tilt direction. **Use 3D Pop Out Effect** This will create a pop out effect between the image and the overlay. **OVERLAY 3D POP OUT** The distance between the image and the overlay. ## Link **Open in Lightbox** Here you can choose whether or not your image will open in a Lightbox when clicked. If enabled, then your image will “zoom in” to their full size when clicked inside a modal window. This is a great feature for portfolios. **Link URL** Place a valid web URL in this field to turn your Image into a link. Leaving this field blank will simply leave your image as a static element. ## Overlay Here you can have overlay text/icon on top of the image. **Use Icon** If enabled, an overlay icon will be displayed over the image. **Overlay Title** Enter the title for the overlay. **Overlay Content** Enter the Content for the overlay. **Show on Hover** If enabled, overlay text will only show up on hover. ## 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 **Overlay Icon Color** Here you can define a custom color for the overlay icon **Overlay Color** Here you can define a custom color for the overlay. **Use Icon Font Size** If enabled, you can input a custom size for the icon that is displayed. # Alignment **Image Alignment** Here you choose which direction your image floats within the column. You can float the image left, right or keep it centered. **Always Center Image On Mobile** Often times small images are more pleasing to the eye on mobile devices when they are centered. As columns break down, images that were aligned the left or right in smaller columns become orphaned when the columns break down and become 100% width. Enabling this column with force images to align to the center of the column on mobile without affecting the image alignment on desktop computers. ## Overlay Text Here you can style of overlay title and content such as fonts, colors and the alignment. **Text Vertical Alignment** You can change the vertical alignment of the Overlay text here. # 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 8

Divi Menu Module

Accepted Answer

Display your WordPress menu and design it in whatever way you want. Use it for Footer or Sidebar.

# Content Options **Menu Title** This field is where you can enter the title of your menu. **Menu** Select a menu that should be used in the module. You can create new menus using the Appearances > Menus page in your WordPress Dashboard. Each time you create a new menu, the menu will be selectable in this dropdown menu. **Collapse Sub Menu** Enable this Option If you'd like to collapse the Sub Menu and that will reveal when you click on the Parent Menu Item.

An example how we use the menu module with the Footer Template to design our Footer

## 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. # Layout **Menu Layout** Currently the available Menu Layout is vertical. ## Title Here you can style the Title text of the Menu Module **Bottom Gap** Add some spacing under the Title text of the Module. And you can then change the color, font, weight and more of the Title text. ## Menu **Menu Link Color** Here you can choose the color of the Menu Items **Active Link Color** Change the Active Menu Link Color here. **Menu Link Active Color** Change the color of the Active Menu Item here. **Menu Link Visited Color** Change the color of the Menu Item a user already visited. When a user opens a link and come back to that page where this Menu Module is added, the color of that Menu item the user just visited will be changed. **Space Between** Add some space between Menu Items here **Left Spacing** Add some spacing on the Left side of the Menu Items. **List Style Type** Here you can change the List style of the Menu Items to Disc, Circle, Decimal and Square. You can choose None if you don't want List style. **List Style Position** You can either choose Inside or Outside means If you've got longer text in the Menu item the text will go below the Disc (or any type you choose) and If you'll choose Outside option it will not show the text below the Disc the text will be shown below the Menu Item text. **List style Color** Change the color of the List bullets here. And then you play around with changing Font, size, weight and more of the Menu Items. ## Sub Menu If there's a sub menu in the Menu you've added, then you can style those submenus here. **Left Spacing** Add some spacing on Left of of the Sub Menu Item(s). And then you play around with changing Font, size, weight and more of the Sub Menu Items. ## Sub Menu Collapse From here you'll be able to style the Sub Menu Collapse Icon easily. **Arrow Color** Here you'll be able to change the Icon color. **Arrow Background Color** You can change the Arrow Background color from here. **Arrow Gap** Change the Arrow gap between the Menu Item and Arrow Icon. **Arrow Padding** You can add Padding to the Icon from here, Useful If you've added Background to the Icon. **Arrow Font Size** You can change the Icon font size from here. **Arrow Border, Border Radius and Box Shadow** And else you can add border radius, boc shadow and Border to the Icon easily. # Animation **Use Link Hover Animation** Enable this option to add a Hover animation to Menu Items. **Animation Type** Change the Type of the animation of the Animation here. Currently there's only Underline available we'll be adding more in upcoming updates. **Underline Animation** Here you can change the direction of the Underline Animation. You can change the direction of the Underline from 3 different types: * Left to Right * Right to Left * Center Out **Link Color** Change the color of the Underline here. # 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 9

Divi Embed Google Map Module

Accepted Answer

If you just need a simple Google Map, then this Embed Google Map Module will do the job nicely. This will embed into your Divi’s site easily without having to worry about anything else. The Maps JavaScript API v2 is deprecated and will has turned off on May 26, 2021. As a result, all site's v2 embed maps will stop working, and will return JavaScript errors. Google Embed now required a API key even for embed map. [https://developers.google.com/maps/documentation/embed/get-started](https://developers.google.com/maps/documentation/embed/get-started) However, old method using copy/paste method does work for now, however we cannot confirm this method is stable or will be deprecated in the future as well(Google is known to change things): **Obtain a Google embed code** * Go to Google Maps * Enter the business address in the search bar, then click the search button * Click on the Share icon * Choose "Embed map" * Select the size of the map from the drop down * Select and copy the HTML iframe embed code Even thought having API for embed is free and has unlimited usage(https://developers.google.com/maps/documentation/embed/usage-and-billing). You can read more on how to create the free API for the embed google map: [https://developers.google.com/maps/documentation/embed/get-api-key](https://developers.google.com/maps/documentation/embed/get-api-key) Make sure Maps Embed API in the Library is enabled as well. ![Maps Embed API.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/2HnJ7wvEJq/Maps%20Embed%20API.png)

# Content Options

**Google Map API Key** The module uses the Google Maps Embed API and requires a valid Google API Key to function. Before using the module, please make sure you have added your API key inside the Divi Theme Options panel. **Address** Enter an address for the map, and the address will be geocoded and displayed on the map. You can simply type in an address in a standard format, such as “1235 Sunny Road, Some City, State, 88343.” **Zoom** The Zoom level of the map. ## 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. # 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 Facebook Comments Module

Accepted Answer

Add Facebook Comments to the anywhere to allow your readers to easily comment using their Facebook account.

# Content Options

**APP ID** Enter the Facebook App ID here. You can go to https://developers.facebook.com/ and click on Create New App to get one. It is a must to provide a Facebook App ID which required to use this module. **Page URL** Get the Comments of the Current Page, or for a Custom URL. This can be other page URL but it’s best to use it on your current page URL to keep track of the Facebook comments related to your page. **Number of Posts** The number of comments to show by default. The minimum value is 1. **Color Scheme** The color scheme used by the comments plugin. Can be “light” or “dark”. **Order by** The order to use when displaying comments. Can be “social”, “reverse_time”, or “time”. The different order types are explained in the FAQ **Social** – This is also known as “Top”. The comments plugin uses social signals to surface the highest quality comments. Comments are ordered so that the most relevant comments from friends and friends of friends are shown first, as well as the most-liked or active discussion threads. Comments marked as spam are hidden from view. **Time** – Comments are shown in the order that they were posted, with the oldest comments at the top and the newest at the bottom. **Reverse Time** Comments are shown in the opposite order that they were posted, with the newest comments at the top and the oldest at the bottom. ## 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. # 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 11

Divi Facebook Feed Module

Accepted Answer

Add Your Facebook Page Feed easily without having to embed them again.

# Content Options

**APP ID** Enter the Facebook App ID here. You can go to https://developers.facebook.com/ and click on Create New App to get one. It is a must to provide a Facebook App ID which required to use this module. **Facebook Page URL** The URL of the Facebook Page **Tabs** Using this option you can add more tabs to the Facebook Feed Module. You can add these tabs: * Timeline * Events * Messages You can even uncheck any of them if you don't want to display them. **Hide Cover Photo** Hide cover photo in the header **Use Small Header** Use the small header instead **Show Face Pile** Show profile photos when friends like this ## 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 facebook feed aligned to the left, right or center. ## Sizing **Height** Adjust the height of your Facebook Feed. The pixel height of the plugin. Min. is 70. # 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. # 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 http://www.facebook.com 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:

### Step 4: Navigate to Settings > Basic

Fill up the forms required such as Domain(Make sure it’s your domain), Privacy Policy URL, Terms of Service URL and etc. Then Click Save Changes ### Step 5: Obtain Facebook APP ID

Before copying the APP ID, make sure you also change the status to LIVE. That’s all!

Question 12

Divi Twitter Timeline Module

Accepted Answer

Create and Embed Twitter Timeline Feed easily without any coding.

# Content Options **Twitter Timeline Settings**

**Twitter Username** Enter the Twitter Username without the hashtag @ e.g TwitterDev **Limit Tweets** Here you can limit the number of tweets. **Number of Tweets** Display a specific number of items between 1 and 20. **Theme** Here you can choose whether the Twitter Timeline will appear in light or dark theme. **Show Header** Hides the timeline header. Implementing sites must add their own Twitter attribution, link to the source timeline, and comply with other Twitter display requirements. **Show Footer** Hides the timeline footer and Tweet composer link, if included in the timeline widget type. **Show Border** Removes all borders within the widget including borders surrounding the widget area and separating Tweets. **Show Scrollbar** Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website. **Remove Widget’s Background Color** Enable this Option to Removes Widget’s Background Color ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Sizing **Height** Adjust the height of your Twitter Timeline. The pixel height of the plugin. Min. is 200. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Question 13

Divi Image Hover Reveal Module

Accepted Answer

When you hover over the image, you will see the top image sliced into 5 pieces and revealing the image again with zoomed in animation. There are 4 types of animation to choose from. A unique way to showcase!

# Content Options ## 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 the 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** Default at 260px. Here you can define a height for your Image Hover Reveal. ## Animation **Image Reveal Animation** Here you can choose 4 types of animation. Vertical Slide Down, Vertical Slide Up, Horizontal Slide Right and Horizontal Slide Left.

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

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!

# Content Options

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

Divi Floating Multi Images Module

Accepted Answer

A better and unique way to showcase multiple images to your visitors by using Floating Multi Images module. You can also change the animation either up/down or left/right.

# Content Options **+ Image Item** This is where you add image to your Floating Multi Images Module. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new image. See below for individual image settings. After you add your first image, you will see a gray bar appear with the title of your pin shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the image.

## Animation This is where you can change the floating animation effect.

**Floating Effect** There are two types of Floating Animation Effect. * Up Down * Left Right * See [Floating Multi Images here](https://divisupreme.com/features/floating-multi-images-module/). The left column with Up Down animation and the right column with Left Right animation. **Image animation delay interval (in ms)** You can add a delay for the Animation to start in ms here. **Animation Speed** Here you can change the speed of the Floating Images Animation. ## Image Item **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. ### Link **Open in Lightbox** Enable this switch to open the Image in Lightbox/Overlay. # 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 Here you can change the placement and the width of the image. **Horizontal Align** Here you can change the horizontal alignment(left/right) of the image in percentage. **Vertical Align** Here you can change the vertical alignment(up/down) of the image in percentage. **Width** You can adjust the width of image. # 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 16

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!

# Content Options

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

Divi Star Rating Module

Accepted Answer

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

# Content Options

**Rating Scale** Default at 0 – 5. Choose a scale from 0 to 5 or 0 to 10 **Rating** Here you can assign the rating based on the scale chosen. **Title** Enter the title for the rating. **Title Inline Position** From here you'll be able to position the Title to "left" or "right" of the Stars, If in any case you need to. **Display Type** Here you can choose whether you want your Title to be stacked or to be displayed as inline. **Show Rating Number** This will show the rating number text after the star icons. # Design Options Here you can style and/or position your text or header text just how you want it by choosing the text color, orientation, font, font size, font spacing, and line height. You can also designate a border style, set a max width for your module, and add custom margin and padding. ## Stars **Size** Change the size of the stars **Gap** Control the gap between each star. **Color** Choose the color of the star icons. ## Title **Gap** Here you can control the space between the title and the star icons. And else you can play around with the Title text by changing Font, Size, Weight and more of it. ## Rating Number Text Here you can play around with the Rating Number text by changing Font, Size, Weight and more of it. This is the text that's shown after the Rating Stars only when the "Show Rating Number" is enabled in the Content tab. # 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 18

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.

# Content Options

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

License Key

Accepted Answer

### Getting License Key

You can obtain your license key by logging in to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager. You will also receive an email regarding the license key for your Divi Supreme Products.

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

![license-activate.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Epk58buO4e/license-activate.png)

### Deactivate License

You can either login to Your [Account](https://divisupreme.com/login/) -> 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](https://divisupreme.com/login/) -> Orders -> License Manager and from there you will able to see your license expiry date.

### Renew License Key
Login to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager/View and from there you will able to see a renew button.

Question 20

How to Download Divi Supreme Pro

Accepted Answer

You can access the latest version of our products at any time provided you’re still in the license term by logging into [Divi Supreme account](https://divisupreme.com/login/).

![download.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/tfzgjdarOE/download.png)

Once logged in, navigate to downloads and you will see a section containing all of the available downloads for your account along with the details of your past orders:

These links will always point towards the latest version of the product.

If you have any troubles accessing your account, try [resetting your password](https://divisupreme.com/my-account/lost-password/), and if that fails please [contact us](https://divisupreme.com/contact/).

FAQs and documentation for Divi Supreme Products

Most popular

Divi Typing Effect Module

Divi Text Badges Module

Divi Text Divider Module

Divi Icon Divider Module

Divi Image Module

Before and After Image Module images are not loading correctly

Divi Tilt Image Module

Divi Menu Module

Divi Embed Google Map Module

Divi Facebook Comments Module

Divi Facebook Feed Module

Divi Twitter Timeline Module

Divi Image Hover Reveal Module

Divi Image Text Reveal Module

Divi Floating Multi Images Module

Divi Contact Form 7 Module

Divi Star Rating Module

Divi Business Hours Module

License Key

How to Download Divi Supreme Pro

Most popular

Divi Supreme

Need Help?