Question 1

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](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](https://developers.facebook.com/apps/). 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 4: Obtain Facebook APP ID

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

Question 2

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 3

Enable SVG Upload in Divi

Accepted Answer

We've added a new functionality to Divi Supreme and using that you can easily Enable the SVG Uploads in Divi by simply enabling a switch. ### How to Enable SVG Uploads To enable the SVG Uploads in Divi all you've to do is open up Divi Supreme Settings > Misc > **Allow SVG file Upload** enable this switch and click on Save Changes button. SVG Uploads option in Divi.png

Now when you'll try to upload any SVG to Media Library or from anywhere where you can access media Library, you'll see the SVG file uploads without any restrictions. SVG Uploads in Divi.png

That's how easily you can enable SVG uploads in Divi using this extra option available in Divi Supreme. Hope you'll find it useful and you'll don't need to add custom code to functions.php or install a separate plugin for this.

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 Caldera Forms Module

Accepted Answer

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

# Content Options

That "Note" at the top means that you'll need to disable the Default Caldera Forms styling by going to Caldera Forms and click "General Settings" at the Top and disable all the switches from here. ## Caldera Forms **Caldera Form** Select a form from the dropdown all of your forms that you’ve created using the Caldera form plugin will appear in the Dropdown menu. If you haven’t created a form already Hover over to Caldera Form > Forms and click on the New Form button at the top. **Show Error & Validation Messages** This will show the error and validation messages on the Visual Builder for styling purposes. ## Admin Label This will change the label of the module in the builder for easy identification. When using the WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options ## Header Text Here you can play around with the header text you may have added to the Form while creating the Form. ## Body Text Here you can play around with the body/description text you may have added to the Form while creating the Form. ## Horizontal Ruler (HR Tag) **Color** Here you can change the color of the Divider line in the Form. **Gap** You can add spacing to the top and bottom of the Divider line in the form. ## Label **Bottom Spacing** Add some spacing to the bottom of the Label. **Required Asterisk Color** Change the color of the (*) with the showing with the label which indicates that this field is Important to be filed. And else you can change the color, size, font and more of the Label text. ## Field Description If you’ve added a description to the field(Shows down of the field) then you can style it here. You change the background color and size, font, weight and more of the description text. ## Input, Textarea and Select All the changes you’ll make here will be applied to all the form fields including Name, Email, Message box and to the Drodpwn select field as well. **Margin Bottom** Add some spacing at the bottom of all the fields. **Background Color** Change the Background color of the form Fields and Select box. You can change the input Font, Size, color and more of the text will be entered in the Field. **Field Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Form Field. Enable the link icon to control all four corners at once, or disable to define custom values for each. You can play around with adding borders and Box Shadow to the Form Field. **Input, Textarea and Select Focus** When you’ll try to write something in the form and wanted to add some attention to the field then use this option to change the size, weight, and more of the text Input. ## Placeholder If you are using a placeholder on your Contact Form, this is where you can style the placeholder such as font, size and more. ## Radio & Checkbox If you are using a Radio & Checkbox on your Contact Form, this is where you can style the Radio & Checkbox such as font, size and more. * Custom **Radio/Checkbox** Styles * You can switch this option to add custom styles to the **Radio/Checkbox.** * Checked Color * You can change the color of the circle icon when checked here. * Checked Background Color * You can change the color of the background when checked here. * Background Color * You can change the color of the background for the **Radio/Checkbox** here. ## Basic File If you’ve added a Basic file uploader to the form then it can style here. You can add Padding, Change the background color, font, size, weight and more. ## Error Messages Here you can change the error message background color, font, size and more. You can also add drop shadow, Rounded corners and Borders to the Error message. ## Success Messages Here you can change the Success message background color, font, size and more. You can also add drop shadow, Rounded corners and Borders to the Success message. ## Submit Button **Button Alignment** Change the alignment of the button to Left, Center or Right. **Margin Top** Add some top margin to the button here. **Use Custom styles for the button** You can switch this option to style the Submit button the same way you style the Divi Button or any button in Divi Builder. ## Advanced File Button(1.0) Use Custom styles for the Advanced File Button(1.0) You can switch this option to style the Advanced File Button(1.0) the same way you style the Divi Button or any button in Divi Builder. # Advanced Options Use the advanced options to give your Caldera Forms module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 6

Divi Breadcrumbs Module

Accepted Answer

Display a hierarchical representation of navigation links and make your site’s navigation easier to follow, add breadcrumbs to your site to improve the user’s experience, and yeah It's good for SEO too.
![dsm-breadcrumbs-demo.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/S2ifBw5hVv/dsm-breadcrumbs-demo.png)

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

### BreadCrumbs
**Show Custom Home**

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

**Show Home Icon**

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

**Custom Separator Icon**

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

# Design Options
### Alignment
Here you can change the Alignment of the Breadcrumbs, enable the responsive option to set a different alignment for Mobile Devices.
### Items
Here you can design the Items/Links in the Breadcrumbs, you can add Background Color, Padding, Border Radius, Box Shadow and more.

**Item Background Color**

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

**Bottome Gap**

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

**Items Padding**

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

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

**Rounded Corners and Borders**

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

**Box Shadow**

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

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

**Icon Color**

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

**Icon Size**

Here can define a custom size for the Home Icon.

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

**Separators Background Color**

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

**Bottome Gap**

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

**Items Padding**

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

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

**Rounded Corners and Borders**

Add Rounded Corners or Borders to the Separator here.

**Box Shadow**

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

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

**Item Background Color**

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

**Bottome Gap**

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

**Items Padding**

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

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

**Rounded Corners and Borders**

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

**Box Shadow**

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

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

Question 7

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 8

Divi Glitch Text Module

Accepted Answer

The glitch effect can bring some very unique style to your site, but can be also very distracting if you overuse it. So Glitch responsibly!

# Content Options **Glitch 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. ## Glitch Effect This is where you can choose different types of animation for the glitch effect.

## Background **Background Color** Here you can choose a background color for your text module. **Background Image** Here you can choose a background image for your text module. ## Admin Label By default, your glitch text module will appear with a label that reads ‘Glitch Text’ 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. # 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 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 10

SCRIPT_DEBUG and et_load_unminified_scripts issue

Accepted Answer

If you're getting this error Notice after Installing Divi Supreme than this guide will help you to solve this issue. This is a bug in Divi and we're hoping that it will be solved very soon.

> Error Message: Divi uses uncombined and unminified javascript files because "SCRIPT_DEBUG" constant on wp-config.php has been set to "true". Other plugin can enforce Divi to use uncombined and unminified javascript files by filtering "et_load_unminified_scripts" filter as well.

To Solve:
1. Deactivate Divi Supreme Plugin, If you've installed both Pro/Free than deactivate both.
2. Go to Divi -> Theme Options -> and Turn On "Minify And Combine Javascript Files" and Save the Changes.
3. Now Reactivate Divi Supreme Pro/Lite and you'll not face this issue.

Have a great day!

Question 11

Divi Scroll Image Module

Accepted Answer

The Divi Scroll Image Module allows you to add images on your Divi website which scroll up or down when the user hovers over the image. Scroll it like the way you always wanted without coding.

<img alt="showcase (1).gif" src="https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/h6FgyNXDmf/showcase.gif" align="center">
# Content Options
**Image**

Add an Image here from your Media Library.

## Link
**Open in Lightbox**

When you’ll click on the image it will be shown in Lightbox.

**Image link URL**

Add a URL for the image here and change the Target method.

**Use as a Video Popup**

If enabled you can show a video in Lightbox if you click on the image. Just make sure to put the URL of the video in the Image Link URL field.

## Scroll Settings
**Scroll Speed (in s)**

Add the speed in seconds in which the image will be scrolled from top to bottom by sliding the slider.

**Scroll Reverse Direction**

Normally the image scrolls from top to bottom but you can enable this option to scroll the image from bottom to top.

# Design Options
**Overlay**

You can enable the Image Overlay here. This means when you’ll hover over the image you can display an icon and a color that will cover the image.

**Overlay Color**

You can change the color of the overlay here

**User Icon**

Use this switch to enable or disable the use of Icon in the Overlay.

**Overlay Icon color**

You can change the color of the icon in the overlay here.

**Icon Picker**

Pick an icon here from the Divi Icon Library.

**Show Overlay on Hover**

You can always change the behavior of the overlay if you disable this overlay will stay on the image rather than showing only on hover.

**Overlay Border Radius and Border**

Here you can play around with the Border Radius and Border of the overlay.

## Lightbox
If you've added Image/Video Overlay to the Scroll Image under the Link panel you'll see this option in the Design tab to design the Overlay.

**Close Color**

Change the color of the close button icon here.

**Overlay Max Width**

Change the max-width of the overlay here.

# Advanced Options
Use the advanced options to give your Scroll 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 12

Divi Supreme Pro Plugin Update

Accepted Answer

# Updating Plugin
<img alt="auto-update.png" src="https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/WYPQbzUo2T/auto-update.png" align="center">
If you activate your license key, you will receive an auto update via your WordPress. You can also FTP to your Divi Supreme folder and replace the previous files with new files you extracted on your remote server. For those do not have auto update via WordPress, either you did not activate your license or your license has expired.

Question 13

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 14

Divi Shapes Module

Accepted Answer

Shapes are one of the most important elements in Design. So we’ve created this module to make your life easier. Shapes module adds life and creativity to your website. Boost your Divi designs, without having to use image files or custom code.

# Content Options

# Shapes **Type** Here you can change the type of shape from 16 different Shapes. Here are the shapes that you can choose: 1. Square 2. Circle 3. Rectangle 4. Oval 5. Trapezoid 6. Parallelogram 7. Diamond Square 8. Hexagon 9. 8 types of Blob **Size** Adjust the Size of the Shape here. # Design Options

## Shapes **Shape Color** Here you can define a custom color for your shape. **User Border** Enable this option if you want to add Border and Corner Radius to the shape. **Shapes Shadow** Here you can add a nice Drop Shadow to the shape. ## Changing the Position of the Shape Let’s See how we can change the position of the shape. We have three options: **Using Margins** Margin adds extra space to the outside of the shape, increasing the distance between the shape and other items on the page. **Using Transform Translate Options** Under Transform Option, you’ll find the Translate tab and using that you can easily move the Shape anywhere on the screen by moving the box you’ll see under the Translate tab. **Using Position Options** Position Options were added under the Advanced Tab. You can change the position type to Relative or Absolute and shape can be easily moved anywhere on the screen by sliding the controllers or entering your own value. # Shape Module Advanced Options Use the advanced options to give your Shape custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 15

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 16

Divi Supreme Requirement

Accepted Answer

**Minimum Requirements**

* WordPress 4.5 or greater
* PHP version 7.0 or greater
* MySQL version 5.0 or greater

**We recommend your host supports**

* PHP version 7.0 or greater
* MySQL version 5.6 or greater
* WP Memory limit of 64 MB or greater (128 MB or higher is preferred)

Divi Supreme recommend and required the following:

* Divi Theme >= version 4.1
* Extra Theme >= version 3.1
* Divi Builder >= version 3.1
* PHP version >= 7.0

Question 17

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.

# Content Options

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

Divi Text Rotator Module

Accepted Answer

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

# Content Options

**Rotator Text** Here you can add as many texts as you want that will have the Rotating Animation effect. You can click on the + Add New Item button to add new text that will get the Rotating effect. **Before Rotator Text** Here you can add some text that will be shown before the Rotator Text and it will not have any Animation effect. **After Rotator Text** Same goes for this, the text you’ll add here will be shown after the Rotator text and will not get any animation. **Rotate Animation** This is where you can change the animation effect of the Rotator Text. You get over 36 Animations to choose from. **Rotate Speed** Here you can specify the Speed of the Animation of the Rotating text. **Pause on Hover** When you’ll enable this option It will pause the Rotating animation on hover/mouseover. **Change on Click** You can enable this switch to let users change the Word when they click on the Rotating text. # Design Options ### Heading Settings **Heading HTML Tag** Here you can change the Heading HTML Tag of the Rotator text and Before/After Text. ## Text You can play around with the text Design settings here. The changes you’ll make here will be applied to all the texts i.e Rotator Text and Before/After Text. ## Before, Rotator and After Text You can easily style the Before, Rotator and After text in the same way you style text in the Text Module(came with Divi Builder). And we’ll only discuss those options which are added by Text Rotator Module to style the text’s background, padding and stuff. **Background Colo**r: Here you can add color to the Background of the Before, Rotator and After text. **Margin and Spacing**: Add some Margin and Spacing to the Before, Rotator and After text, if you want to add some spacing on both sides of Before, Rotator and After Text. **Display**: You can change the display property of the text to Inline Block and Block. * **Inline Block** displays the text in the same line as other texts. * **Block Displays** the text by making it a block means other texts will not be displayed in the same line. And you can play around with Before, Rotator and After text by adding different colors, text-shadows, border, border-radius and more to each text. # Rotator Text Module Advanced Options Use the advanced options to give your Rotator Text custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 19

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.

# Content Options

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

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.

Divi Supreme

Need Help?