Allow you to have two buttons with a separator text in between. 10 types of hover animation to choose from, image/video lightbox that supports: YouTube, Vimeo and Dailymotion! Not only that, we added URL link type that supports: URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp and Telegram! # Content Options Within the content tab, you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab. ## Text **Button #1 Text** Input your desired button #1 text. **Button #2 Text** Input your desired button #2 text. ## Links #### Link Type for Button #1 Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram) **Email** This option will show up only when using Email Type. Enter the Email Address for Button #1. **Download File** Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library. **CC** Enter the carbon copy email address for Button #1. **BCC** Enter the blind carbon copy email address for Button #1. **SUBJECT** Enter the default subject of the email for Button #1. **MESSAGE** Enter the default body message of the email for Button #1. **Phone Number** Enter the phone number to call for Button #1 (This will usually work on mobile phones) **SMS** Enter the phone number to SMS for Button #1 (This will usually work on mobile phones) **Facebook Messenger** ---**USERNAME** This option will show up only when using Facebook Messenger. Enter a person, page, or bot username. **Skype** ---**USERNAME** This option will show up only when using Skype. Enter the Skype username for Button #1. **ACTION TYPE** Choose the action type for Skype. You can choose to chat or call. **WhatsApp** ---**NUMBER** This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #1. **ACTION TYPE** Enter the default body message of the WhatsApp for Button #1. **Telegram** ---**TELEGRAM USERNAME** This option will show up only when using Telegram. Enter the Telegram Username. **MESSAGE** Enter the default body message of the Telegram for Button #1. **Button #1 URL** Input the destination URLfor your button #1. **Open as Image Lightbox** Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, URL options below will be ignored. **Open as Video Lightbox** Put the Video link on the Button #1 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. **Use Tooltip** This will show a tooltip on your Button #1 **TOOLTIP CONTENT** Input your desired tooltip content for button #1. **SHOW ARROW** If enabled, then an arrow will be added to the tooltip. **SIZE** The size of the tooltip from Small to Large. **PLACEMENT** Here you can choose the placement of the tooltip. Top, Right, Bottom and Left. **ANIMATION** Here you can choose different types of animation for your tooltip. **URL Opens** Here you can choose whether or not your link opens in a new window. #### Link Type for Button #2 Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram) **Email** This option will show up only when using Email Type. Enter the Email Address for Button #2. **Download File** Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library. **CC** Enter the carbon copy email address for Button #2. **BCC** Enter the blind carbon copy email address for Button #2. **SUBJECT** Enter the default subject of the email for Button #2. **MESSAGE** Enter the default body message of the email for Button #2. **Phone Number** Enter the phone number to call for Button #2 (This will usually work on mobile phones) **SMS** Enter the phone number to SMS for Button #2 (This will usually work on mobile phones) **Facebook Messenger** ---**USERNAME** This option will show up only when using Facebook Messenger. Enter a person, page, or bot username. **Skype** ---**USERNAME** This option will show up only when using Skype. Enter the Skype username for Button #2. **ACTION TYPE** Choose the action type for Skype. You can choose to chat or call. **WhatsApp** ---**NUMBER** This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #2. **ACTION TYPE** Enter the default body message of the WhatsApp for Button #2. **Telegram** ---TELEGRAM USERNAME This option will show up only when using Telegram. Enter the Telegram Username. **MESSAGE** Enter the default body message of the Telegram for Button #2. **Button #2 URL** Input the destination URL for your button #2. **Open as Image Lightbox** Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, URL options below will be ignored. **Open as Video Lightbox** Put the Video link on the Button #2 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. **Use Tooltip** This will show a tooltip on your Button #2 **TOOLTIP CONTENT** Input your desired tooltip content for button #2. **SHOW ARROW** If enabled, then an arrow will be added to the tooltip. **SIZE** The size of the tooltip from Small to Large. **PLACEMENT** Here you can choose the placement of the tooltip. Top, Right, Bottom and Left. **ANIMATION** Here you can choose different types of animation for your tooltip. **URL Opens** Here you can choose whether or not your link opens in a new window. ## Separator **Separator Text** Input your desired separator text, or leave blank for no separator text in between the both buttons. **Make Separator Text Fullwidth On Mobile** This will make the Separator Text as fullwidth instead of inline-block on mobile devices. **Remove Separator Text On Mobile** This will remove the Separator Text on mobile devices. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Alignment Here you can choose to have your Button Wrapper aligned to the left, right or center. ## Lightbox If you've added an Image/Video Overlay to the button, then here you can change the settings of the Overlay. **Overlay color** Choose any color for the Overlay **Max Width** Here you can choose the Maximum width of the Overlay. ## Separator Text Here you can style the Spearator text's font, size, color and more. ## Tooltip Text If you've added Tooltip to the buttons you can easily style it here. You can have different styling for each button by going to each tab. You can style the Tooltip text's font size, color, and much more. ## Sizing **Separator Gap Text** The gap spacing between both buttons. ## Button One This is where you can style your Button #1 the same way you style other button in Divi. ## Button Two This is where you can style your Button #2 the same way you style other button in Divi. ## Animation **Button Hover #1 Animation** Here you can select one hover animation from the dropdown list for Button #1. You can select any from over 29 Animations. The Lite version of Divi Supreme will have only few of them. **Button Hover #2 Animation** Here you can select one hover animation from the dropdown list for Button #2. You can select any from over 29 Animations. The Lite version of Divi Supreme will have only few of them. **Button Icon Hover #1 Animation** If you've added Icon to the Button #1 and disable the switch called "**Only Show Icon on Hover for Button One**" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations. **Button Icon Hover #2 Animation** If you've added Icon to the Button #2 and disable the switch called "**Only Show Icon on Hover for Button Two**" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations. # 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.

Allow you to have two buttons with a separator text in between. 10 types of hover animation to choose from, image/video lightbox that supports: YouTube, Vimeo and Dailymotion! Not only that, we added URL link type that supports: URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp and Telegram! # Content Options Within the content tab, you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab. ## Text **Button #1 Text** Input your desired button #1 text. **Button #2 Text** Input your desired button #2 text. ## Links #### Link Type for Button #1 Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram) **Email** This option will show up only when using Email Type. Enter the Email Address for Button #1. **Download File** Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library. **CC** Enter the carbon copy email address for Button #1. **BCC** Enter the blind carbon copy email address for Button #1. **SUBJECT** Enter the default subject of the email for Button #1. **MESSAGE** Enter the default body message of the email for Button #1. **Phone Number** Enter the phone number to call for Button #1 (This will usually work on mobile phones) **SMS** Enter the phone number to SMS for Button #1 (This will usually work on mobile phones) **Facebook Messenger** ---**USERNAME** This option will show up only when using Facebook Messenger. Enter a person, page, or bot username. **Skype** ---**USERNAME** This option will show up only when using Skype. Enter the Skype username for Button #1. **ACTION TYPE** Choose the action type for Skype. You can choose to chat or call. **WhatsApp** ---**NUMBER** This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #1. **ACTION TYPE** Enter the default body message of the WhatsApp for Button #1. **Telegram** ---**TELEGRAM USERNAME** This option will show up only when using Telegram. Enter the Telegram Username. **MESSAGE** Enter the default body message of the Telegram for Button #1. **Button #1 URL** Input the destination URLfor your button #1. **Open as Image Lightbox** Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, URL options below will be ignored. **Open as Video Lightbox** Put the Video link on the Button #1 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. **Use Tooltip** This will show a tooltip on your Button #1 **TOOLTIP CONTENT** Input your desired tooltip content for button #1. **SHOW ARROW** If enabled, then an arrow will be added to the tooltip. **SIZE** The size of the tooltip from Small to Large. **PLACEMENT** Here you can choose the placement of the tooltip. Top, Right, Bottom and Left. **ANIMATION** Here you can choose different types of animation for your tooltip. **URL Opens** Here you can choose whether or not your link opens in a new window. #### Link Type for Button #2 Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram) **Email** This option will show up only when using Email Type. Enter the Email Address for Button #2. **Download File** Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library. **CC** Enter the carbon copy email address for Button #2. **BCC** Enter the blind carbon copy email address for Button #2. **SUBJECT** Enter the default subject of the email for Button #2. **MESSAGE** Enter the default body message of the email for Button #2. **Phone Number** Enter the phone number to call for Button #2 (This will usually work on mobile phones) **SMS** Enter the phone number to SMS for Button #2 (This will usually work on mobile phones) **Facebook Messenger** ---**USERNAME** This option will show up only when using Facebook Messenger. Enter a person, page, or bot username. **Skype** ---**USERNAME** This option will show up only when using Skype. Enter the Skype username for Button #2. **ACTION TYPE** Choose the action type for Skype. You can choose to chat or call. **WhatsApp** ---**NUMBER** This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #2. **ACTION TYPE** Enter the default body message of the WhatsApp for Button #2. **Telegram** ---TELEGRAM USERNAME This option will show up only when using Telegram. Enter the Telegram Username. **MESSAGE** Enter the default body message of the Telegram for Button #2. **Button #2 URL** Input the destination URL for your button #2. **Open as Image Lightbox** Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, URL options below will be ignored. **Open as Video Lightbox** Put the Video link on the Button #2 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. **Use Tooltip** This will show a tooltip on your Button #2 **TOOLTIP CONTENT** Input your desired tooltip content for button #2. **SHOW ARROW** If enabled, then an arrow will be added to the tooltip. **SIZE** The size of the tooltip from Small to Large. **PLACEMENT** Here you can choose the placement of the tooltip. Top, Right, Bottom and Left. **ANIMATION** Here you can choose different types of animation for your tooltip. **URL Opens** Here you can choose whether or not your link opens in a new window. ## Separator **Separator Text** Input your desired separator text, or leave blank for no separator text in between the both buttons. **Make Separator Text Fullwidth On Mobile** This will make the Separator Text as fullwidth instead of inline-block on mobile devices. **Remove Separator Text On Mobile** This will remove the Separator Text on mobile devices. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Alignment Here you can choose to have your Button Wrapper aligned to the left, right or center. ## Lightbox If you've added an Image/Video Overlay to the button, then here you can change the settings of the Overlay. **Overlay color** Choose any color for the Overlay **Max Width** Here you can choose the Maximum width of the Overlay. ## Separator Text Here you can style the Spearator text's font, size, color and more. ## Tooltip Text If you've added Tooltip to the buttons you can easily style it here. You can have different styling for each button by going to each tab. You can style the Tooltip text's font size, color, and much more. ## Sizing **Separator Gap Text** The gap spacing between both buttons. ## Button One This is where you can style your Button #1 the same way you style other button in Divi. ## Button Two This is where you can style your Button #2 the same way you style other button in Divi. ## Animation **Button Hover #1 Animation** Here you can select one hover animation from the dropdown list for Button #1. You can select any from over 29 Animations. The Lite version of Divi Supreme will have only few of them. **Button Hover #2 Animation** Here you can select one hover animation from the dropdown list for Button #2. You can select any from over 29 Animations. The Lite version of Divi Supreme will have only few of them. **Button Icon Hover #1 Animation** If you've added Icon to the Button #1 and disable the switch called "**Only Show Icon on Hover for Button One**" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations. **Button Icon Hover #2 Animation** If you've added Icon to the Button #2 and disable the switch called "**Only Show Icon on Hover for Button Two**" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations. # 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.

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

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

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.

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.

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

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

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

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.

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.

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.

To grab the attention of your visitors, you need something more appealing. Put the focus on the important part of your text with an animated hand-drawn look and feel. 7 types of styles to choose from. ## Content Options **Before Text** Here you can specify anything you want to show Before the Notation Text. **Notation Text** Add the Notation text here, the Animation effects will be added to this Text. **After Text** Here you can specify anything you want to show After the Notation Text. ### Notation Settings **Type** Choose the Type of the Animation around the Text here from 7 different Animation effects. * Underline * Box * Circle * Hightlight * Strike Through * Crossed Off * Bracket **Color** Choose the Color of the Notation Animation here. **Stroke Width** Change the width of the annotation Stroke here. **Iterations** By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations. **Animate in Viewport** Here you can set a custom value for the Animation to play at a specific Viewport. **Delay** Add a delay to the Notation Effect to start after the time you'll set. # Design Options ### Heading Settings **Heading HTML Tag** Here you can change the Heading HTML Tag of the Notation text and Before/After Text. ## Main 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 Notation Text and Before/After Text. ## Before, Notation and After Text You can easily style the Before, Notation 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 Notation Text Module to style the text’s background, padding and stuff. **Background Color**: Here you can add color to the Background of the Before, Notation and After text. **Margin and Spacing**: Add some Margin and Spacing to the Before, Notation and After text, if you want to add some spacing on both sides of Before, Notation 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. * **Inline** is very similar to Inline Block but it helps your text to remain on the same line when added Padding to the Before, Notation and After Text. Margin will not work with this Display Property. * **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, Notation and After text by adding different colors, text-shadows, border, border-radius and more to each text. # Notation Text Module Advanced Options Use the advanced options to give your Notation Text custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

To grab the attention of your visitors, you need something more appealing. Put the focus on the important part of your text with an animated hand-drawn look and feel. 7 types of styles to choose from. ## Content Options **Before Text** Here you can specify anything you want to show Before the Notation Text. **Notation Text** Add the Notation text here, the Animation effects will be added to this Text. **After Text** Here you can specify anything you want to show After the Notation Text. ### Notation Settings **Type** Choose the Type of the Animation around the Text here from 7 different Animation effects. * Underline * Box * Circle * Hightlight * Strike Through * Crossed Off * Bracket **Color** Choose the Color of the Notation Animation here. **Stroke Width** Change the width of the annotation Stroke here. **Iterations** By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations. **Animate in Viewport** Here you can set a custom value for the Animation to play at a specific Viewport. **Delay** Add a delay to the Notation Effect to start after the time you'll set. # Design Options ### Heading Settings **Heading HTML Tag** Here you can change the Heading HTML Tag of the Notation text and Before/After Text. ## Main 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 Notation Text and Before/After Text. ## Before, Notation and After Text You can easily style the Before, Notation 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 Notation Text Module to style the text’s background, padding and stuff. **Background Color**: Here you can add color to the Background of the Before, Notation and After text. **Margin and Spacing**: Add some Margin and Spacing to the Before, Notation and After text, if you want to add some spacing on both sides of Before, Notation 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. * **Inline** is very similar to Inline Block but it helps your text to remain on the same line when added Padding to the Before, Notation and After Text. Margin will not work with this Display Property. * **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, Notation and After text by adding different colors, text-shadows, border, border-radius and more to each text. # Notation Text Module Advanced Options Use the advanced options to give your Notation Text custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

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.

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.

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.

Add Your Facebook Page Feed easily without having to embed them again. # Content Options **APP ID** Enter the Facebook App ID here. You can go to https://developers.facebook.com/ and click on Create New App to get one. It is a must to provide a Facebook App ID which required to use this module. **Facebook Page URL** The URL of the Facebook Page **Tabs** Using this option you can add more tabs to the Facebook Feed Module. You can add these tabs: * Timeline * Events * Messages You can even uncheck any of them if you don't want to display them. **Hide Cover Photo** Hide cover photo in the header **Use Small Header** Use the small header instead **Show Face Pile** Show profile photos when friends like this ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Alignment Here you can choose to have your facebook feed aligned to the left, right or center. ## Sizing **Height** Adjust the height of your Facebook Feed. The pixel height of the plugin. Min. is 70. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices. # Setup Facebook App ID You will need your own Facebook account in order to create the Facebook App ID so ensure that you have created a free account by going to http://www.facebook.com first before starting this guide. Step 1: Login to Facebook and go to developers site Ensure you are logged into your Facebook account and go http://www.facebook.com/developers Step 2: Create Facebook Application To create your App ID, head to the Facebook Developers site. As long as you’re logged into your regular Facebook account, you should see the button to Add a New App: ### Step 3: Give it a name, like “Divi Supreme” and click Create App ID: ### Step 4: Navigate to Settings > Basic Fill up the forms required such as Domain(Make sure it’s your domain), Privacy Policy URL, Terms of Service URL and etc. Then Click Save Changes ### Step 5: Obtain Facebook APP ID Before copying the APP ID, make sure you also change the status to LIVE. That’s all!

Add Your Facebook Page Feed easily without having to embed them again. # Content Options **APP ID** Enter the Facebook App ID here. You can go to https://developers.facebook.com/ and click on Create New App to get one. It is a must to provide a Facebook App ID which required to use this module. **Facebook Page URL** The URL of the Facebook Page **Tabs** Using this option you can add more tabs to the Facebook Feed Module. You can add these tabs: * Timeline * Events * Messages You can even uncheck any of them if you don't want to display them. **Hide Cover Photo** Hide cover photo in the header **Use Small Header** Use the small header instead **Show Face Pile** Show profile photos when friends like this ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Alignment Here you can choose to have your facebook feed aligned to the left, right or center. ## Sizing **Height** Adjust the height of your Facebook Feed. The pixel height of the plugin. Min. is 70. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices. # Setup Facebook App ID You will need your own Facebook account in order to create the Facebook App ID so ensure that you have created a free account by going to http://www.facebook.com first before starting this guide. Step 1: Login to Facebook and go to developers site Ensure you are logged into your Facebook account and go http://www.facebook.com/developers Step 2: Create Facebook Application To create your App ID, head to the Facebook Developers site. As long as you’re logged into your regular Facebook account, you should see the button to Add a New App: ### Step 3: Give it a name, like “Divi Supreme” and click Create App ID: ### Step 4: Navigate to Settings > Basic Fill up the forms required such as Domain(Make sure it’s your domain), Privacy Policy URL, Terms of Service URL and etc. Then Click Save Changes ### Step 5: Obtain Facebook APP ID Before copying the APP ID, make sure you also change the status to LIVE. That’s all!

When you hover over the image, you will see the an overlay slide from the left to hide the image with the revealing text and when you move the move away from the image, the image slide out of view to the right. There are plenty of animation for the revealing text too! # Content Options **Reveal Text** This field is where you can enter the reveal text. **Image** Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Overlay **Reveal Overlay Color** This option allows you to customize the reveal overlay color. ## Animation Here you can choose more than 30 animation for the revealing text. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

When you hover over the image, you will see the an overlay slide from the left to hide the image with the revealing text and when you move the move away from the image, the image slide out of view to the right. There are plenty of animation for the revealing text too! # Content Options **Reveal Text** This field is where you can enter the reveal text. **Image** Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Overlay **Reveal Overlay Color** This option allows you to customize the reveal overlay color. ## Animation Here you can choose more than 30 animation for the revealing text. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

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.

Icon List module is like the Divi Blurb Module but more enhanced and well-aligned. If you want to create a list with icons then this module is helpful. # Content Options **Adding Icon List** Click on + Add new Item to add your first Icon List . Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Icon List. See below for individual Icon List Item settings. After you add your first Icon List, you will see a gray bar appear with the title of your Icon List shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Icon List. # Design Options ## Text **Text Indent** Here you can add padding between the text and icon. And you can play with the text by changing its font, size, color and weight and even add shadow to the text. ## Icon **Icon Color** Here can define a custom color for the icon. **Icon Background** Here you can define a custom background color for the icon. **Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Icon Font Size** Here you can change the actual size of the Icon by increasing or decreasing the Icon font size. **Icon Rounded Corners** Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each. **Border** Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well. ## Image **Background** Here you can define a custom background color for the Image. **Image Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Image Width** Adjust the width of the image by sliding the slider or enter your own value to change the size of the image. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image ## List Items **Alignment** Change the alignment of the Icon List Item to Right, Center or Left. **Vertical Alignment** The List can be placed either above, below or in the center of the module. **Direction** Here you can choose the direction of the Icon, if you'll select **Left to Right** the icon will be on Left and the text on Right. And same goes for the **Right to Left** option, text on left and icon on right. **Space Between** Add some Space between Icon List Items. **Background Color** Add a Background color to all Icon List Items here. **Padding** Here you can define custom padding for the icon list item. **List Item Rounded Corners, Border and Box Shadow** Here you can add Corner Radius, Border and Box Shadow to the List Item. # Advanced Options Use the advanced options to give your Icon List module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # Icon List Item Content Options ## Content **Text** Add text to the icon list here. **Use Icon** You can enable this switch to use Icon and browse from hundreds of Icon from Divi Icon Library. Disabling this switch will show (+) button to add an image to the list rather than Icon. ## Tooltip **Use Tooltip** Enable this switch to enable the Use of Tooltip and show a tooltip when Hover to Icon List item. **Content** After enabling the use of Tooltip, you'll see a field to enter the Content you want to show when Hover to Icon list item. # Icon List Item Content Options ## Icon **Icon Color** Here can define a custom color for the icon. **Icon Background** Here you can define a custom background color for the icon. **Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Icon Font Size** Here you can change the actual size of the Icon by increasing or decreasing the Icon font size. **Icon Rounded Corners** Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each. **Border** Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well. ## Image **Background** Here you can define a custom background color for the Image. **Image Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Image Width** Adjust the width of the image by sliding the slider or enter your own value to change the size of the image. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image ## Tooltip **Placement** Here you can change the Placement of the Tooltip to: * Top * Right * Bottom * Left **Background Color** Here you can change the Color of the Tooltip. **Tooltip Padding** You can define a custom padding inside of the Tooltip content here. **Tooltip Max width** To increase the width of the Tooltip change the **max width** of the Tooltip here. And else you can play around with Tooltip text's font, size, color, weight and more. ## Text And you can play with the text by changing its font, size, color and weight and even add shadow to the text. # List Item Advanced Options Use the advanced options to give your Icon List Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Icon List module is like the Divi Blurb Module but more enhanced and well-aligned. If you want to create a list with icons then this module is helpful. # Content Options **Adding Icon List** Click on + Add new Item to add your first Icon List . Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Icon List. See below for individual Icon List Item settings. After you add your first Icon List, you will see a gray bar appear with the title of your Icon List shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Icon List. # Design Options ## Text **Text Indent** Here you can add padding between the text and icon. And you can play with the text by changing its font, size, color and weight and even add shadow to the text. ## Icon **Icon Color** Here can define a custom color for the icon. **Icon Background** Here you can define a custom background color for the icon. **Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Icon Font Size** Here you can change the actual size of the Icon by increasing or decreasing the Icon font size. **Icon Rounded Corners** Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each. **Border** Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well. ## Image **Background** Here you can define a custom background color for the Image. **Image Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Image Width** Adjust the width of the image by sliding the slider or enter your own value to change the size of the image. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image ## List Items **Alignment** Change the alignment of the Icon List Item to Right, Center or Left. **Vertical Alignment** The List can be placed either above, below or in the center of the module. **Direction** Here you can choose the direction of the Icon, if you'll select **Left to Right** the icon will be on Left and the text on Right. And same goes for the **Right to Left** option, text on left and icon on right. **Space Between** Add some Space between Icon List Items. **Background Color** Add a Background color to all Icon List Items here. **Padding** Here you can define custom padding for the icon list item. **List Item Rounded Corners, Border and Box Shadow** Here you can add Corner Radius, Border and Box Shadow to the List Item. # Advanced Options Use the advanced options to give your Icon List module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # Icon List Item Content Options ## Content **Text** Add text to the icon list here. **Use Icon** You can enable this switch to use Icon and browse from hundreds of Icon from Divi Icon Library. Disabling this switch will show (+) button to add an image to the list rather than Icon. ## Tooltip **Use Tooltip** Enable this switch to enable the Use of Tooltip and show a tooltip when Hover to Icon List item. **Content** After enabling the use of Tooltip, you'll see a field to enter the Content you want to show when Hover to Icon list item. # Icon List Item Content Options ## Icon **Icon Color** Here can define a custom color for the icon. **Icon Background** Here you can define a custom background color for the icon. **Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Icon Font Size** Here you can change the actual size of the Icon by increasing or decreasing the Icon font size. **Icon Rounded Corners** Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each. **Border** Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well. ## Image **Background** Here you can define a custom background color for the Image. **Image Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Image Width** Adjust the width of the image by sliding the slider or enter your own value to change the size of the image. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image ## Tooltip **Placement** Here you can change the Placement of the Tooltip to: * Top * Right * Bottom * Left **Background Color** Here you can change the Color of the Tooltip. **Tooltip Padding** You can define a custom padding inside of the Tooltip content here. **Tooltip Max width** To increase the width of the Tooltip change the **max width** of the Tooltip here. And else you can play around with Tooltip text's font, size, color, weight and more. ## Text And you can play with the text by changing its font, size, color and weight and even add shadow to the text. # List Item Advanced Options Use the advanced options to give your Icon List Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

The Divi before after image slider module allows you to display the before and after versions of an image by simply sliding over them. Users will be able to move a slider to easily compare the two images. # Content Options **Note**: Make sure that the images that you’ll place in before and after image section should be the same size, or it will make it look bad. ## Images The Image you’ll add in the first section will be the Before Image and the second one will be the After image. When you’ll add images you’ll see these options for before and after images: **Before/After Image Alternative text** This defines the HTML ALT text. A short description of your image can be placed here. **Before/After Image Title Text** This defines the HTML Title text. ## Labels **Before Label text** Here you can define a custom Label text for the Before label text. **After Label text** Here you can define a custom Label text for the After label text. ## Settings **Default Offset Percentage** Here you control the position of the handle (that you use to see before and after) when the page loads. For example, If you set the offset to 0 the handle will be on the very left, and if it’s 0.5 the handle will be in the center. **Orientation** Here you can control the orientation for the handle to either Horizontal or Vertical. **No Overlay** When you hover to the Before After Image module you see an Overlay, enabling this option will remove the overlay when you hover. **Move Slider on Hover** If enabled, when you’ll hover over to the image the handle will move as the mouse moves. **Move Slider with Handle** Allow a user to swipe anywhere on the image to control the handle movement. **Click to Move slider** Allow a user to click (or tap) anywhere on the image to move the handle to that location. # Design Options ## Before and After Label This is where you can design the Before and After Label, you can add a custom background color, you can change the label font, size, color, and more. ## Overlay Here you can define a custom color for the overlay that shows when you hover over the image. ## Handle Slider Here you can design the Handle that is used to see before and after image. **Handle Border Color** You can change the color of the Handle border to your custom one. **Handle Border Radius** You can add some Corner radius to the Icon that you see in the center of the slider. **Handle Background Color** This is where you can change the background color of the handle icon. **Handle Arrow Color** This is where you can change the color of the handle icon. And even you can add Some box-shadow, corner radius and Border to the module in the design settings the same way you do with other Divi modules. # Advanced Options Use the advanced options to give your Before After Image 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 before after image slider module allows you to display the before and after versions of an image by simply sliding over them. Users will be able to move a slider to easily compare the two images. # Content Options **Note**: Make sure that the images that you’ll place in before and after image section should be the same size, or it will make it look bad. ## Images The Image you’ll add in the first section will be the Before Image and the second one will be the After image. When you’ll add images you’ll see these options for before and after images: **Before/After Image Alternative text** This defines the HTML ALT text. A short description of your image can be placed here. **Before/After Image Title Text** This defines the HTML Title text. ## Labels **Before Label text** Here you can define a custom Label text for the Before label text. **After Label text** Here you can define a custom Label text for the After label text. ## Settings **Default Offset Percentage** Here you control the position of the handle (that you use to see before and after) when the page loads. For example, If you set the offset to 0 the handle will be on the very left, and if it’s 0.5 the handle will be in the center. **Orientation** Here you can control the orientation for the handle to either Horizontal or Vertical. **No Overlay** When you hover to the Before After Image module you see an Overlay, enabling this option will remove the overlay when you hover. **Move Slider on Hover** If enabled, when you’ll hover over to the image the handle will move as the mouse moves. **Move Slider with Handle** Allow a user to swipe anywhere on the image to control the handle movement. **Click to Move slider** Allow a user to click (or tap) anywhere on the image to move the handle to that location. # Design Options ## Before and After Label This is where you can design the Before and After Label, you can add a custom background color, you can change the label font, size, color, and more. ## Overlay Here you can define a custom color for the overlay that shows when you hover over the image. ## Handle Slider Here you can design the Handle that is used to see before and after image. **Handle Border Color** You can change the color of the Handle border to your custom one. **Handle Border Radius** You can add some Corner radius to the Icon that you see in the center of the slider. **Handle Background Color** This is where you can change the background color of the handle icon. **Handle Arrow Color** This is where you can change the color of the handle icon. And even you can add Some box-shadow, corner radius and Border to the module in the design settings the same way you do with other Divi modules. # Advanced Options Use the advanced options to give your Before After Image Module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Create an attractive and stunning Price List for your business with easy options. Perfect for menus, catalogs, product lists and any other list of featured items. [See the Demo page](https://divisupreme.com/features/price-list-module/) for more Design of Price lists. # Content Options **Adding Price List** Click on + Add new Item to add your first Price List. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Price List. See below for individual Price List Item settings. After you add your first Price List, you will see a gray bar appear with the title of your Price List shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Price List. # Design Options ## Text **Vertical Alignment** This setting determines the vertical alignment of your Price List Text. Your content can either be aligned to the top, vertically centered, or aligned to the bottom. **Text Shadow** Here add nice shadow to the Pirce list text. ## Title Text Change the title text font, color, size, weight and more of the Price List item. ## Description Text Change the Description text font, color, size, weight and more of the Price List item. ## Price Text **Background Color** Define a custom background color for the price text. **Padding** Add some padding around the Price text. And else you can change the price text font, color, size and weight and more. **Price Text Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Price Text. 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 Price text. ## Image **Image Width** Adjust the width of the image by sliding the slider or enter your own value to change the size of the image. **Image Gap Spacing** Add some spacing between Image and Texts. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. You can play around with adding borders and Box Shadow to the Image ## Separator **Style** Change the style of the line between Title text and Price text from 8 different styles. **Weight** Change the weight of the Line here. **Color** Change the color of the separator line to your own one. **Gap Spacing** Change the spacing of the line between Price text and Title text. ## Sizing **Item Bottom Spacing** Add some bottom spacing between other Price list items. # 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. # Price List Item Content Options ## Text **Price** Add your Pricing here. **Title** Add your title here. **Content** Put in your description text here. # Image Add your image to here add in your price list item. # Price List Item Design Options ## Image **Image Width** Adjust the width of the image by sliding the slider or enter your own value to change the size of the image. **Image Gap Spacing** Add some spacing between Image and Texts. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. You can play around with adding borders and Box Shadow to the Image # Price List Item Advanced Options Use the advanced options to give your Price List Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Create an attractive and stunning Price List for your business with easy options. Perfect for menus, catalogs, product lists and any other list of featured items. [See the Demo page](https://divisupreme.com/features/price-list-module/) for more Design of Price lists. # Content Options **Adding Price List** Click on + Add new Item to add your first Price List. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Price List. See below for individual Price List Item settings. After you add your first Price List, you will see a gray bar appear with the title of your Price List shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Price List. # Design Options ## Text **Vertical Alignment** This setting determines the vertical alignment of your Price List Text. Your content can either be aligned to the top, vertically centered, or aligned to the bottom. **Text Shadow** Here add nice shadow to the Pirce list text. ## Title Text Change the title text font, color, size, weight and more of the Price List item. ## Description Text Change the Description text font, color, size, weight and more of the Price List item. ## Price Text **Background Color** Define a custom background color for the price text. **Padding** Add some padding around the Price text. And else you can change the price text font, color, size and weight and more. **Price Text Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Price Text. 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 Price text. ## Image **Image Width** Adjust the width of the image by sliding the slider or enter your own value to change the size of the image. **Image Gap Spacing** Add some spacing between Image and Texts. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. You can play around with adding borders and Box Shadow to the Image ## Separator **Style** Change the style of the line between Title text and Price text from 8 different styles. **Weight** Change the weight of the Line here. **Color** Change the color of the separator line to your own one. **Gap Spacing** Change the spacing of the line between Price text and Title text. ## Sizing **Item Bottom Spacing** Add some bottom spacing between other Price list items. # 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. # Price List Item Content Options ## Text **Price** Add your Pricing here. **Title** Add your title here. **Content** Put in your description text here. # Image Add your image to here add in your price list item. # Price List Item Design Options ## Image **Image Width** Adjust the width of the image by sliding the slider or enter your own value to change the size of the image. **Image Gap Spacing** Add some spacing between Image and Texts. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. You can play around with adding borders and Box Shadow to the Image # Price List Item Advanced Options Use the advanced options to give your Price List Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

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.

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.

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

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

FAQs and documentation for Divi Supreme Products

Divi Supreme Button Module

Divi Caldera Forms Module

Divi Image Module

I can't update through my WordPress dashboard updates

How to Create Facebook APP ID

Divi Supreme Pro Plugin Update

Divi Text Rotator Module

Divi Shapes Module

Divi Text Notation Module

Divi Image Hover Reveal Module

Divi Animated Gradient Text Module

Divi Facebook Feed Module

Divi Image Text Reveal Module

Divi Block Reveal Text Module

Divi Icon List Module

Divi Before After Image Slider Module

Divi Price List Module

License Key Activation Issue

How to Download Divi Supreme Pro

Before and After Image Module images are not loading correctly

Divi Supreme

Need Help?