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

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

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.

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.

When there is a new version update available, you will be prompt in your WordPress dashboard to carry out the update. You may encounter error, failure to update or the message "An error occurred while updating. Download Failed. Forbidden". This documentation discuss the scenario and the steps for rectifying the problem. There are two reason why this is happening. 1. Your license key has expired. 2. You recently renew the license but the download permission is not updated for your account. ### Check your license key expiry date Please login to your [account](https://divisupreme.com/login/) to check your license expiry date. You can read more here on how to check your license key. ### Recently renewed but unable to update If you recently renew but you can't update through your WordPress dashboard updates, please contact us to address this issue. We will correct the permission on your account.

When there is a new version update available, you will be prompt in your WordPress dashboard to carry out the update. You may encounter error, failure to update or the message "An error occurred while updating. Download Failed. Forbidden". This documentation discuss the scenario and the steps for rectifying the problem. There are two reason why this is happening. 1. Your license key has expired. 2. You recently renew the license but the download permission is not updated for your account. ### Check your license key expiry date Please login to your [account](https://divisupreme.com/login/) to check your license expiry date. You can read more here on how to check your license key. ### Recently renewed but unable to update If you recently renew but you can't update through your WordPress dashboard updates, please contact us to address this issue. We will correct the permission on your account.

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 ); ```

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 ); ```

# License ## 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 Pro. ## License Activation Right after activating the plugin, you will see a notification “Divi Supreme Pro: Please enter your license key to get regular update”. The license activation is only required to receive automatic updates. ## 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.

# License ## 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 Pro. ## License Activation Right after activating the plugin, you will see a notification “Divi Supreme Pro: Please enter your license key to get regular update”. The license activation is only required to receive automatic updates. ## 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.

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

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

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

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

Adding Beautiful Image Hotspots was never easier in Divi Builder but now it’s super easy. Image Hotspots Module will let you add Hotspots to your image, if you ever wondered to add more info to your image then this module will be helpful. # Content Options **Image** First thing first, you will have to add an image here from your Media Library and then start adding Hotspots to the image. **Adding Hotspots to the Image** Click on + Add new Item to add your first hotspot to the Image. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Image Hotspot. See below for individual Image Hotspot Item settings. After you add your first Hotspot, you will see a gray bar appear with the title of your Image Hotspot shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the image hotspot. # Design Options If you want to make all your hotspots look the same then you can style them from here not Item Design Options but if you want to make them look different from each other then style each of them from the Item Design Options. All the Designs you’ll do here will be applied to all Hotspots. ## Hotspot text If you have Hotspot type text then here you’ll be able to change its color, size and weight, etc. ## Hotspot Settings **Trigger Event** Here you can change the hotspot trigger event. You have two options: * Hover - Will show the tooltip on hover * Click - Will show the tooltip on click **Padding** Here you can add padding to the Hotspot. **Border Radius and Border** Add some border-radius and Simple Borders to the hotspot. ## Hotspot Icon **Icon Color** Change the color of the Icon here. **Icon font Size** Change the size of the Icon from here. ## Tooltip Settings **Background Color** Add a Background color here to the tooltip. **Tooltip Padding** Add some padding to the tooltip here. **Tooltip Max Width** Change the max-width of the Tooltip here. **Tooltip Delay Show** Add some delay for the tooltip to show by just sliding the slider. **Tooltip Delay Hide** Add some delay for the tooltip to hide by just sliding the slider. ### Tooltip Heading Text If you have added Heading text in the Text of the Tooltip then you can style that here the same you style other Heading texts in Divi. ### Tooltip Body Text Here you can style the Tooltip Body text. You can change the font color, size, weight and more. ## Image **Alignment** Change the alignment of the image here. **Image Box Shadow** Add Shadow to the image here. ## Sizing **Force Fullwidth** Enabling this option will Force the image to be fullwidth. After that if you want to control the width of the image according to your custom needs you'll then see Width Option to do so. # Hotspot Item Content Options ## Hotspot **Type** Change the type of the Hotspot button. It can an Icon or Text. * Icon - If you'll select Hotspot type as Icon you can then choose an Icon for the Hotspot from Divi Icon Library. * Image - If you'll select Hotspot type as Icon you can then choose an Image from Media Library to use as Hotspot. * Hotspot Text - If you select Hotspot type to Text a text input field will appear and you’ll be able to add text to Hotspot than Icon. ## Tooltip **Content** Here you’ll be able to add text to appear in the tooltip. ## Background Here you can change the background color of the Hotspot, you can add a solid Color, Gradient, Image or Video the Hotspot. # Hotspot Item Design Options ## Hotspot Text If you have chosen the Hotspot type as Text then you’ll be able to style that text here the same way as you always style. ## Hotspot Settings **Left Position** Using this Position option you’ll be able to move the Hotspot from right to left or left to right by sliding the slider. **TOP Position** Using this Position option you’ll be able to move the Hotspot from top to bottom or bottom to top by sliding the slider. **Padding** Add some padding to the hotspot to let it take more space on the image. **Border Radius and border** Here you can add border-radius or simple border to the hotspot. ## Hotspot Image If you'll choose Hotspot Type as Image this will appear to style the Image. **Hotspot Image width** Here you can change the width of the Image **Hotspot Image Rounded Corners** Add Rounded corners to Image here. **Hotspot Image Border** Here you can add Border to the Image. **Hotspot Image Box Shadow** Add Shadow to image here to make it look more natural. ## Hotspot Icon If you'll choose Hotspot Type as Icon this will appear to style the Icon. **Icon Color** Change the color of the Icon here. **Icon font Size** Change the size of the Icon from here. ### Tooltip Settings When you’ll hover over to the hotspot a tooltip shows and that can be styled here. **Background color** Change the tooltip background color here. **Padding** Add some padding to the tooltip here. **Placement** Here you can choose the placement of the tooltip. The Tooltip can be placed on Top, Bottom, Left or Right of the Hotspot. **Tooltip Max Width** Change the max-width of the Tooltip here. ### Tooltip Heading Text If you have added Heading text in the Text of the Tooltip then you can style that here the same you style other Heading texts in Divi. ### Tooltip Body Text Here you can style the Tooltip Body text. You can change the font color, size, weight and more. # Tooltip Item Advanced Options Use the advanced options to give your Image Hotspot module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Adding Beautiful Image Hotspots was never easier in Divi Builder but now it’s super easy. Image Hotspots Module will let you add Hotspots to your image, if you ever wondered to add more info to your image then this module will be helpful. # Content Options **Image** First thing first, you will have to add an image here from your Media Library and then start adding Hotspots to the image. **Adding Hotspots to the Image** Click on + Add new Item to add your first hotspot to the Image. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Image Hotspot. See below for individual Image Hotspot Item settings. After you add your first Hotspot, you will see a gray bar appear with the title of your Image Hotspot shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the image hotspot. # Design Options If you want to make all your hotspots look the same then you can style them from here not Item Design Options but if you want to make them look different from each other then style each of them from the Item Design Options. All the Designs you’ll do here will be applied to all Hotspots. ## Hotspot text If you have Hotspot type text then here you’ll be able to change its color, size and weight, etc. ## Hotspot Settings **Trigger Event** Here you can change the hotspot trigger event. You have two options: * Hover - Will show the tooltip on hover * Click - Will show the tooltip on click **Padding** Here you can add padding to the Hotspot. **Border Radius and Border** Add some border-radius and Simple Borders to the hotspot. ## Hotspot Icon **Icon Color** Change the color of the Icon here. **Icon font Size** Change the size of the Icon from here. ## Tooltip Settings **Background Color** Add a Background color here to the tooltip. **Tooltip Padding** Add some padding to the tooltip here. **Tooltip Max Width** Change the max-width of the Tooltip here. **Tooltip Delay Show** Add some delay for the tooltip to show by just sliding the slider. **Tooltip Delay Hide** Add some delay for the tooltip to hide by just sliding the slider. ### Tooltip Heading Text If you have added Heading text in the Text of the Tooltip then you can style that here the same you style other Heading texts in Divi. ### Tooltip Body Text Here you can style the Tooltip Body text. You can change the font color, size, weight and more. ## Image **Alignment** Change the alignment of the image here. **Image Box Shadow** Add Shadow to the image here. ## Sizing **Force Fullwidth** Enabling this option will Force the image to be fullwidth. After that if you want to control the width of the image according to your custom needs you'll then see Width Option to do so. # Hotspot Item Content Options ## Hotspot **Type** Change the type of the Hotspot button. It can an Icon or Text. * Icon - If you'll select Hotspot type as Icon you can then choose an Icon for the Hotspot from Divi Icon Library. * Image - If you'll select Hotspot type as Icon you can then choose an Image from Media Library to use as Hotspot. * Hotspot Text - If you select Hotspot type to Text a text input field will appear and you’ll be able to add text to Hotspot than Icon. ## Tooltip **Content** Here you’ll be able to add text to appear in the tooltip. ## Background Here you can change the background color of the Hotspot, you can add a solid Color, Gradient, Image or Video the Hotspot. # Hotspot Item Design Options ## Hotspot Text If you have chosen the Hotspot type as Text then you’ll be able to style that text here the same way as you always style. ## Hotspot Settings **Left Position** Using this Position option you’ll be able to move the Hotspot from right to left or left to right by sliding the slider. **TOP Position** Using this Position option you’ll be able to move the Hotspot from top to bottom or bottom to top by sliding the slider. **Padding** Add some padding to the hotspot to let it take more space on the image. **Border Radius and border** Here you can add border-radius or simple border to the hotspot. ## Hotspot Image If you'll choose Hotspot Type as Image this will appear to style the Image. **Hotspot Image width** Here you can change the width of the Image **Hotspot Image Rounded Corners** Add Rounded corners to Image here. **Hotspot Image Border** Here you can add Border to the Image. **Hotspot Image Box Shadow** Add Shadow to image here to make it look more natural. ## Hotspot Icon If you'll choose Hotspot Type as Icon this will appear to style the Icon. **Icon Color** Change the color of the Icon here. **Icon font Size** Change the size of the Icon from here. ### Tooltip Settings When you’ll hover over to the hotspot a tooltip shows and that can be styled here. **Background color** Change the tooltip background color here. **Padding** Add some padding to the tooltip here. **Placement** Here you can choose the placement of the tooltip. The Tooltip can be placed on Top, Bottom, Left or Right of the Hotspot. **Tooltip Max Width** Change the max-width of the Tooltip here. ### Tooltip Heading Text If you have added Heading text in the Text of the Tooltip then you can style that here the same you style other Heading texts in Divi. ### Tooltip Body Text Here you can style the Tooltip Body text. You can change the font color, size, weight and more. # Tooltip Item Advanced Options Use the advanced options to give your Image Hotspot module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

All the Facebook Modules in the Divi Supreme use the Facebook APP ID to work perfectly and for this, you should have created an APP ID from the [Facebook Developers site](https://developers.facebook.com/apps/). To first create a Facebook APP ID, you may see this guide here: https://docs.divisupreme.com/knowledgebase/how-to-create-facebook-app-id/ When you’re done with creating your Facebook APP ID you can now put it in Divi Supreme Plugin’s Page Settings. For this go to** Divi Supreme > Social Media Settings**: And in the Facebook APP ID field, Paste your Facebook APP ID which you’ve created already. **Good Luck!**

All the Facebook Modules in the Divi Supreme use the Facebook APP ID to work perfectly and for this, you should have created an APP ID from the [Facebook Developers site](https://developers.facebook.com/apps/). To first create a Facebook APP ID, you may see this guide here: https://docs.divisupreme.com/knowledgebase/how-to-create-facebook-app-id/ When you’re done with creating your Facebook APP ID you can now put it in Divi Supreme Plugin’s Page Settings. For this go to** Divi Supreme > Social Media Settings**: And in the Facebook APP ID field, Paste your Facebook APP ID which you’ve created already. **Good Luck!**

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.

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.

You can also use Poedit locally when translating. This is an open source tool for all major OSs. The free Poedit default version supports manual scanning of all source code with Gettext functions. A pro version of it also features one-click scanning for WordPress plugins. After generating the PO file you can rename the file to POT. If a MO was generated then you can delete that file as it is not needed. If you don’t have the pro version you can easily get the Blank POT and use that as the base of your POT file. Once you have placed the blank POT in the languages folder you can click “Update” in Poedit to update the POT file with your strings. After creating your .PO and .MO files. Make sure the following filename is named as "dsm-supreme-modules-pro-for-divi-fr_FR.mo" or "dsm-supreme-modules-pro-for-divi-fr_FR.po" and placed them under the plugin /languages/ folder. Example above is for French using "fr_FR". You might need to change to your own prefix. More information can be found here [https://developer.wordpress.org/plugins/internationalization/localization/](https://developer.wordpress.org/plugins/internationalization/localization/) ![divi_supreme_languages.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/yQky8fmDQr/divi_supreme_languages.png)

You can also use Poedit locally when translating. This is an open source tool for all major OSs. The free Poedit default version supports manual scanning of all source code with Gettext functions. A pro version of it also features one-click scanning for WordPress plugins. After generating the PO file you can rename the file to POT. If a MO was generated then you can delete that file as it is not needed. If you don’t have the pro version you can easily get the Blank POT and use that as the base of your POT file. Once you have placed the blank POT in the languages folder you can click “Update” in Poedit to update the POT file with your strings. After creating your .PO and .MO files. Make sure the following filename is named as "dsm-supreme-modules-pro-for-divi-fr_FR.mo" or "dsm-supreme-modules-pro-for-divi-fr_FR.po" and placed them under the plugin /languages/ folder. Example above is for French using "fr_FR". You might need to change to your own prefix. More information can be found here [https://developer.wordpress.org/plugins/internationalization/localization/](https://developer.wordpress.org/plugins/internationalization/localization/) ![divi_supreme_languages.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/yQky8fmDQr/divi_supreme_languages.png)

Create a beautiful and stunning animated gradient text on your Divi website. # Content Options ## Content **Animated Gradient Text** Put your text here which will have an animated gradient. ### Animated Gradient Settings **Gradient Direction** Change the direction of the gradient by entering values or sliding the slider. **Animation speed (s)** Change the Speed of animation here. # Design Options ## Heading Settings **Heading HTML Tag** Change the tag of the heading from H1 to H6. ## Animated Gradient Text Here you’ll find 4 options for choosing colors which means you can have a really cool Animated Gradient Text with so many colors. But If you want to have two colors then put the same color in #1 Gradient Color and #2 Gradient Color and repeat it for the other two as well. And you can play with color Gradient Text size, weight, Font, etc. # Advanced Options Use the advanced options to give your Gradient Text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Create a beautiful and stunning animated gradient text on your Divi website. # Content Options ## Content **Animated Gradient Text** Put your text here which will have an animated gradient. ### Animated Gradient Settings **Gradient Direction** Change the direction of the gradient by entering values or sliding the slider. **Animation speed (s)** Change the Speed of animation here. # Design Options ## Heading Settings **Heading HTML Tag** Change the tag of the heading from H1 to H6. ## Animated Gradient Text Here you’ll find 4 options for choosing colors which means you can have a really cool Animated Gradient Text with so many colors. But If you want to have two colors then put the same color in #1 Gradient Color and #2 Gradient Color and repeat it for the other two as well. And you can play with color Gradient Text size, weight, Font, etc. # Advanced Options Use the advanced options to give your Gradient Text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

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.

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.

Divi Supreme's Popup extension opens a whole new world for Creating Popups in Divi. It makes it really easy while creating Popups of anykind. It's a whole new solution that works really nice with Divi. This extension will extend the **Visibility Option** in all the Module setting that will allow you to use the Popup. Currently, the available supported modules are listed below: * All Divi Default Modules * All Divi Supreme Pro Modules(Pro Version). ## Before Using Divi Popups: Before you start using the whole new solution of Popups make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable Supreme Popup and the Click on the Save Changes Button. ## Usage To use Divi Popups Extension, go to any of the supported module’s (listed above) settings and navigate to the **Advanced Tab** Scroll to **Visibility** and look for **Use Popup** Switch. **Use Popup** This will enable or disable the Popup extension. **Popup Type:** This is where you can choose the Popup type. * **Layout**: You can choose this option to select a layout from Library to be shown in Popup. * **iFrame**: Using this Popup type you can load a web URL in the Popup. * **Image**: You can use this to show an image in the popup. You’ll be prompted to upload an image or select from Media Library.. * **Video**: Using this Popup type you can show a video in the Popup just enter the URL of the video and you’re good to go.. **Popup (Divi Library):** This is an interesting part where you can choose any Layout from your Library to show in Popup. **Trigger On:** This is where you can choose how to trigger the Popup. * **Module Click**: The Popup will be triggered when the whole module is clicked. * **Button Click**: If the module is Button the popup will only be triggered when exactly the button is clicked. * **Image Click:** If the module is an Image the popup will only be triggered when exactly the image is clicked. * **Hyperlink Click**: If there is any link in your text module then selecting the Hyperlink method will show the Popup when the link is clicked. * **Page Load**: If selected the Popup will be shown on Page Load * —–**Timed Delay**: Set the Duration for the Popup to show. * —–**Cookie Expiry**: Set the Expiry in days after then the Popup will be shown again. * —–**Use Custom Cookie Expiry Date**: Set your own Custom Expiry for the cookie. * **Scroll**: If selected the Popup will be shown only then when you’ll scroll to that module. * —–**Timed Delay**: Set the Duration for the Popup to show. * —–**Cookie Expiry**: Set the Expiry in days after then the Popup will be shown again. * —–**Use Custom Cookie Expiry Date**: Set your own Custom Expiry for the cookie. * **Exit Intent**: If selected the Popup will be shown when you’re about to leave the Browser Tab. **Close Popup Triggers:** This is where you can choose the way your popup should be closed. * **Outside Popup**: The Popup will close after clicking anywhere outside of the popup. * * **Close Button**: A button will be shown to close the popup you can change the icon of the button and play with colors as well. **Use Auto Close Popup:** Enabling this option will let you close your popup after time you’ll enter in the field. * **After Time Passed (in s)**: A button will be shown to close the popup you can change the icon of the button and play with colors as well. * **Entrance Animation In:** This is where you can choose the Entrance Animation of your Popup from 43+ Different Animations. **Exit Animation In:** This is where you can choose the Exit Animation of your Popup from 43+ Different Animations. **Popup Position:** This is where you can choose where on the screen the popup will show. There are 9 places you can select from: * Top Left * Top Center * Top Right * Center Left * Center * Center Right * Bottom Left * Bottom Center * Bottom Right **Popup Position Type:** * Absolute: If selected the popup will be shown as simple content on page it will scroll with page scroll. * Fixed: If selected the popup will be fixed on screen it will stay on front even on page scroll. Very great for Cookie Notice. **Use Fullwidth:** Here you can enable this option to make the popup content to be shown on full screen. **Popup Max Width:** Here you can enable this option to make the popup content to be shown on full screen. **Show Overlay:** You can choose this option whether you want to use the background overlay or not **Overlay Background Color:** Here you can change the width of the slider. **Show Close Button:** Using this Switch you can Show or Hide the Close button to Close the Popup. **Close Button Placement:** Here you can change the Placement of the Close Button Inside or Outside. * **Inside**: This will show the Close Button inside of the Popup. * **Outside**: This will show the Close Button outside of the Popup. **Close Icon Font Size:** Here you can change the size of the close button. **Close Button Icon:** You can change the Icon of the Close button to your Desired one from the Whole Divi Icon Library. **Close Button Background Color:** Here you can change the Background Color of the Close Button Icon. **Close Button Icon Color:** Here you can change the Color of the Close Button Icon. #### Some Tutorial for you to get started with Divi Popup Extension: [How to create Popups using Divi Popup Extension - Complete look at all the Features](https://divisupreme.com/blog/how-to-create-popups-using-divi-popup-extension/) [How to Create Beautiful Popup with Divi Supreme - A simple popup + Free Layout](https://divisupreme.com/blog/how-to-create-beautiful-popup-with-divi-supreme/)

Divi Supreme's Popup extension opens a whole new world for Creating Popups in Divi. It makes it really easy while creating Popups of anykind. It's a whole new solution that works really nice with Divi. This extension will extend the **Visibility Option** in all the Module setting that will allow you to use the Popup. Currently, the available supported modules are listed below: * All Divi Default Modules * All Divi Supreme Pro Modules(Pro Version). ## Before Using Divi Popups: Before you start using the whole new solution of Popups make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable Supreme Popup and the Click on the Save Changes Button. ## Usage To use Divi Popups Extension, go to any of the supported module’s (listed above) settings and navigate to the **Advanced Tab** Scroll to **Visibility** and look for **Use Popup** Switch. **Use Popup** This will enable or disable the Popup extension. **Popup Type:** This is where you can choose the Popup type. * **Layout**: You can choose this option to select a layout from Library to be shown in Popup. * **iFrame**: Using this Popup type you can load a web URL in the Popup. * **Image**: You can use this to show an image in the popup. You’ll be prompted to upload an image or select from Media Library.. * **Video**: Using this Popup type you can show a video in the Popup just enter the URL of the video and you’re good to go.. **Popup (Divi Library):** This is an interesting part where you can choose any Layout from your Library to show in Popup. **Trigger On:** This is where you can choose how to trigger the Popup. * **Module Click**: The Popup will be triggered when the whole module is clicked. * **Button Click**: If the module is Button the popup will only be triggered when exactly the button is clicked. * **Image Click:** If the module is an Image the popup will only be triggered when exactly the image is clicked. * **Hyperlink Click**: If there is any link in your text module then selecting the Hyperlink method will show the Popup when the link is clicked. * **Page Load**: If selected the Popup will be shown on Page Load * —–**Timed Delay**: Set the Duration for the Popup to show. * —–**Cookie Expiry**: Set the Expiry in days after then the Popup will be shown again. * —–**Use Custom Cookie Expiry Date**: Set your own Custom Expiry for the cookie. * **Scroll**: If selected the Popup will be shown only then when you’ll scroll to that module. * —–**Timed Delay**: Set the Duration for the Popup to show. * —–**Cookie Expiry**: Set the Expiry in days after then the Popup will be shown again. * —–**Use Custom Cookie Expiry Date**: Set your own Custom Expiry for the cookie. * **Exit Intent**: If selected the Popup will be shown when you’re about to leave the Browser Tab. **Close Popup Triggers:** This is where you can choose the way your popup should be closed. * **Outside Popup**: The Popup will close after clicking anywhere outside of the popup. * * **Close Button**: A button will be shown to close the popup you can change the icon of the button and play with colors as well. **Use Auto Close Popup:** Enabling this option will let you close your popup after time you’ll enter in the field. * **After Time Passed (in s)**: A button will be shown to close the popup you can change the icon of the button and play with colors as well. * **Entrance Animation In:** This is where you can choose the Entrance Animation of your Popup from 43+ Different Animations. **Exit Animation In:** This is where you can choose the Exit Animation of your Popup from 43+ Different Animations. **Popup Position:** This is where you can choose where on the screen the popup will show. There are 9 places you can select from: * Top Left * Top Center * Top Right * Center Left * Center * Center Right * Bottom Left * Bottom Center * Bottom Right **Popup Position Type:** * Absolute: If selected the popup will be shown as simple content on page it will scroll with page scroll. * Fixed: If selected the popup will be fixed on screen it will stay on front even on page scroll. Very great for Cookie Notice. **Use Fullwidth:** Here you can enable this option to make the popup content to be shown on full screen. **Popup Max Width:** Here you can enable this option to make the popup content to be shown on full screen. **Show Overlay:** You can choose this option whether you want to use the background overlay or not **Overlay Background Color:** Here you can change the width of the slider. **Show Close Button:** Using this Switch you can Show or Hide the Close button to Close the Popup. **Close Button Placement:** Here you can change the Placement of the Close Button Inside or Outside. * **Inside**: This will show the Close Button inside of the Popup. * **Outside**: This will show the Close Button outside of the Popup. **Close Icon Font Size:** Here you can change the size of the close button. **Close Button Icon:** You can change the Icon of the Close button to your Desired one from the Whole Divi Icon Library. **Close Button Background Color:** Here you can change the Background Color of the Close Button Icon. **Close Button Icon Color:** Here you can change the Color of the Close Button Icon. #### Some Tutorial for you to get started with Divi Popup Extension: [How to create Popups using Divi Popup Extension - Complete look at all the Features](https://divisupreme.com/blog/how-to-create-popups-using-divi-popup-extension/) [How to Create Beautiful Popup with Divi Supreme - A simple popup + Free Layout](https://divisupreme.com/blog/how-to-create-beautiful-popup-with-divi-supreme/)

The easy way to create a beautiful image carousel using Divi Supreme Image Carousel Module. The image carousel module is perfect for showcasing a set of images, your portfolio pieces, client logos and much more. # Content Options ## Image Carousel **+Add Gallery Images** Choose multiple images from your Media Library here. **Order by** You can change the order of the images to default(show images the way you selected) or Random(Shows images randomly) **Image Size** Change the size of all the images here. ## Carousel Settings **Carousel Effect** Here you can change Carousel Slide Effect from 4 different effects. * Slide * Coverflow * Flip * Cube **Coverflow Effect settings** If you'll select Carousel Effect as Coverflow you'll see these options: * **Show Shadow** - Adds a shadow to next Carousel Images. * **Coverflow rotate** - Set the Rotate amount of the next images in the slide. * **Coverflow Depth **- Increase to show more items in the carousel with coverflow effect. **Centered Mode** This mode will show the next image in the carousel centered means half of the image will be appearing which tells there are more items to see. **Slides to Show** Here you can change the number of images to show in one slide. **Slides to Scroll** Here you can change the number of slides to scroll when click on the arrow button to see the next items. **Slider Speed** Here you can change the speed for sliding the slider. **Autoplay** You can enable this option to slide images automatically. **Autoplay Change interval** Change the time interval for the slides to change after that time. **Spacing** Add some spacing between carousel images. **Infinite Looping** Enabling this option causes the carousel to loop. Means when you’ll click on the arrow to go to next slide it will then keep looping and shows all the item from first to end. Disabling this will show only the number of images and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow. **Show Arrow** Enable or Disable this option to show or hide the arrows. **Show Pagination** Enable or Disable this option to show or hide the pagination dots. **Use Grab Cursor** Enable or Disable this option to make the mouse icon to grab cursor icon. **Open Image in Lightbox** Enable or Disable this option to open the images in the lightbox when click on a single image. # Design Options ## Layout **Horizontal Alignment** Change the horizontal alignment of the images. If you have small and big size images in the carousel then this option would be helpful. ## Element **Arrow Position** Change the arrow position to inside or outside of the carousel. **Mobile Arrow Position** Change the arrow position to inside or outside of the carousel for Mobile Devices only. **Arrow Size** Change the font size of the arrow. **Arrow Color** Change the color of the arrow. **Arrow Background Color** Change the background color of the arrow. **Pagination Placement** Here you can change the Position of the Pagination dots vertically. **Pagination Active Color** Change the color of the Active dot in the Pagination **Pagination In-Active Color** Change the color of the In-Active pagination dots here ## Image This is the place where you can add corner radius, borders, box shadow and more stuff to the carousel images. # Advanced Options Use the advanced options to give your Price List module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # How to add URL to each Carousel Image **Adding a URL to the Image** If you want to add a URL to each Carousel Image you can do that easily. All you've to do is open up that Image in the Media Library and add the Custom URL to it there. So when a user will click on the Image they’ll be taken to that URL that you added to Image. It will only work within Divi Supreme Modules. **Adding Download link to the Image** If you want to let your users download a file when they click on the image you can simply enter the URL of that download file and check the option “Download as File”. That's it!

The easy way to create a beautiful image carousel using Divi Supreme Image Carousel Module. The image carousel module is perfect for showcasing a set of images, your portfolio pieces, client logos and much more. # Content Options ## Image Carousel **+Add Gallery Images** Choose multiple images from your Media Library here. **Order by** You can change the order of the images to default(show images the way you selected) or Random(Shows images randomly) **Image Size** Change the size of all the images here. ## Carousel Settings **Carousel Effect** Here you can change Carousel Slide Effect from 4 different effects. * Slide * Coverflow * Flip * Cube **Coverflow Effect settings** If you'll select Carousel Effect as Coverflow you'll see these options: * **Show Shadow** - Adds a shadow to next Carousel Images. * **Coverflow rotate** - Set the Rotate amount of the next images in the slide. * **Coverflow Depth **- Increase to show more items in the carousel with coverflow effect. **Centered Mode** This mode will show the next image in the carousel centered means half of the image will be appearing which tells there are more items to see. **Slides to Show** Here you can change the number of images to show in one slide. **Slides to Scroll** Here you can change the number of slides to scroll when click on the arrow button to see the next items. **Slider Speed** Here you can change the speed for sliding the slider. **Autoplay** You can enable this option to slide images automatically. **Autoplay Change interval** Change the time interval for the slides to change after that time. **Spacing** Add some spacing between carousel images. **Infinite Looping** Enabling this option causes the carousel to loop. Means when you’ll click on the arrow to go to next slide it will then keep looping and shows all the item from first to end. Disabling this will show only the number of images and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow. **Show Arrow** Enable or Disable this option to show or hide the arrows. **Show Pagination** Enable or Disable this option to show or hide the pagination dots. **Use Grab Cursor** Enable or Disable this option to make the mouse icon to grab cursor icon. **Open Image in Lightbox** Enable or Disable this option to open the images in the lightbox when click on a single image. # Design Options ## Layout **Horizontal Alignment** Change the horizontal alignment of the images. If you have small and big size images in the carousel then this option would be helpful. ## Element **Arrow Position** Change the arrow position to inside or outside of the carousel. **Mobile Arrow Position** Change the arrow position to inside or outside of the carousel for Mobile Devices only. **Arrow Size** Change the font size of the arrow. **Arrow Color** Change the color of the arrow. **Arrow Background Color** Change the background color of the arrow. **Pagination Placement** Here you can change the Position of the Pagination dots vertically. **Pagination Active Color** Change the color of the Active dot in the Pagination **Pagination In-Active Color** Change the color of the In-Active pagination dots here ## Image This is the place where you can add corner radius, borders, box shadow and more stuff to the carousel images. # Advanced Options Use the advanced options to give your Price List module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # How to add URL to each Carousel Image **Adding a URL to the Image** If you want to add a URL to each Carousel Image you can do that easily. All you've to do is open up that Image in the Media Library and add the Custom URL to it there. So when a user will click on the Image they’ll be taken to that URL that you added to Image. It will only work within Divi Supreme Modules. **Adding Download link to the Image** If you want to let your users download a file when they click on the image you can simply enter the URL of that download file and check the option “Download as File”. That's it!

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.

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.

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.

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.

This will allow you to Collapse Long Texts into Nested form. Providing you more way to Showcase Long Texts or Paragraphs on your Divi Website. Currently, the available supported modules are listed below: * Text Module * Blurb Module * Call-to-action Module * Blog Module ## Before Using ReadMore Extension: Before you start using the Read More Extension make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable ReadMore Content and the Click on the Save Changes button. # Usage To use Read More Extension, go to any of the supported modules (listed above) settings and navigate to the Advanced Tab Scroll to Visibility and look for Use **Read More** Switch. **Use Read More** This will enable or disable the Read More extension. **Show on Mobile Only:** Using this you can Collapse text for Mobile Devices only making it more Responsive. **Collapsed Height:** You can select the Height of the text to be shown and after the height will end the Read More text will show to show the full text. **Read More Text:** Enter your own Text for the Read More Text e.g. Show Full Text, Continue Reading. **Close Text:** Enter your own Text for the Close Text e.g. Show Less Text, Stop Reading. **Designing the Read More Text** * **Font**: Change the Font of the Read More Text. * **Font-weight**: Change the Weight of the Read More Text.Font Style: Change the Style of the Read More Text. * **Font Style**: Change the Style of the Read More Text(Italic, UpperCase, Underline and more). * **Text-Alignment**: Change the Alignment of the Read More Text. * **Text Size**: Change the Size of the Read More Text. * **Link Text Color**: Change the Color of the Read More Text. **Use Shadow** It will add a very Nice Shadow to the text will make it more attractive for the visitors

This will allow you to Collapse Long Texts into Nested form. Providing you more way to Showcase Long Texts or Paragraphs on your Divi Website. Currently, the available supported modules are listed below: * Text Module * Blurb Module * Call-to-action Module * Blog Module ## Before Using ReadMore Extension: Before you start using the Read More Extension make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable ReadMore Content and the Click on the Save Changes button. # Usage To use Read More Extension, go to any of the supported modules (listed above) settings and navigate to the Advanced Tab Scroll to Visibility and look for Use **Read More** Switch. **Use Read More** This will enable or disable the Read More extension. **Show on Mobile Only:** Using this you can Collapse text for Mobile Devices only making it more Responsive. **Collapsed Height:** You can select the Height of the text to be shown and after the height will end the Read More text will show to show the full text. **Read More Text:** Enter your own Text for the Read More Text e.g. Show Full Text, Continue Reading. **Close Text:** Enter your own Text for the Close Text e.g. Show Less Text, Stop Reading. **Designing the Read More Text** * **Font**: Change the Font of the Read More Text. * **Font-weight**: Change the Weight of the Read More Text.Font Style: Change the Style of the Read More Text. * **Font Style**: Change the Style of the Read More Text(Italic, UpperCase, Underline and more). * **Text-Alignment**: Change the Alignment of the Read More Text. * **Text Size**: Change the Size of the Read More Text. * **Link Text Color**: Change the Color of the Read More Text. **Use Shadow** It will add a very Nice Shadow to the text will make it more attractive for the visitors

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

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

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.

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.

FAQs and documentation for Divi Supreme Products

How to Download Divi Supreme Pro

Divi Contact Form 7 Module

I can't update through my WordPress dashboard updates

Before and After Image Module images are not loading correctly

Divi Supreme Pro License

License Key

How to Create Facebook APP ID

Divi Image Hotspots Module

Where to Put Facebook APP ID

Divi Image Module

How to translate Divi Supreme Plugin

Divi Animated Gradient Text Module

Divi Text Rotator Module

Divi Popup Extension

Divi Image Carousel Module

Divi Block Reveal Text Module

Divi Tilt Image Module

Divi Read More Extension

Divi Star Rating Module

Divi Business Hours Module