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

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.

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

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

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

Using this extension you can easily schedule the visibility of any Element like Section/Row/Module in Divi. **Awesome Features:** * You can choose who to show or hide based on the user’s logged-in status. Apply condition to show it for All Users, Logged In Users or Visitors. * Select any user roles which is available to you from your WordPress site. You can choose to show or hide for author or all user roles. * Select days of the week. Monday to Friday or even weekend with your preferred opening & closing time. * And More... This will extend the **Visibility Option** in all the Module settings that will allow you to use the Scheduled Element Extension. This feature is only available for Pro Users. Currently, the available supported modules are listed below: * All Divi Default Modules * All Divi Supreme Pro Modules(Pro Version). ### Before Using Scheduled Content Element Extension: Before you start using the Scheduled Content Element Extension you first make sure that’s active or Enabled from the Divi Supreme Settings. Go to Divi Supreme > Divi Supreme Pro and Enable the use of Scheduled Element Extension ## Usage To use Scheduled Element Extension, go to any of the supported module’s (listed above) settings and navigate to the** Advanced Tab** Scroll to **Visibility** and look for **Use Scheduled Element** Switch. **Use Scheduled Element** Enable this option if you want to use this extension for any module. **Show or Hide Module** * **Show Option** - This option is very important. If you’ll select Show Option from the dropdown and will set the date and time then the module will be hidden till then but when the time arrives the Module appears which means you’ll not have to worry about the module visibility at a particular time If you don’t get time to change its visibility. * **Hide Option** - The same things go for the Hide Option. But your module will be visible till that time but when the time arrives the module will disappear. **Schedule a Date/Time** Enter your Desired date and time for the Module visibility to show or hide when the time arrives that you set here. **Use Between Date/Time** When you'll enable this option you'll see another Date/Time picker so you can show/hide an element between that date/time. * **Schedule a Date/Time** is the time of start. * **Use Between Date/Time** is the time of end. **Use Business Hour/Time** Enable this option if you want to show a Module only then when your business is open. **Select Day** Select your desired days here. **Opening Time** Add the Opening time of your business here so the module will be shown on your given time. **Closing Time** Add the Closing time of your business here so the module will be gone on your given time. The time format here will be 24 hours. **Apply To** From here you can control the visibility of the module for specific roles. * **All Users** - Choose this option if you want to show the module to everyone e.g Logged-In Users and Visitors and all others. * **Logged In Users** - Choose this option if you want to show this module to only logged in users only, you’ll also get the options to select specific roles or select all for everyone who’s logged In on your site. * **Visitor Users** - Choose this option if you want to show this module to only visitors, which means this module will not be visible to Logged in Members it will be only visible to those users who they’re logged out from your site. **Disable On** This will disable the Module on selected Devices.

Using this extension you can easily schedule the visibility of any Element like Section/Row/Module in Divi. **Awesome Features:** * You can choose who to show or hide based on the user’s logged-in status. Apply condition to show it for All Users, Logged In Users or Visitors. * Select any user roles which is available to you from your WordPress site. You can choose to show or hide for author or all user roles. * Select days of the week. Monday to Friday or even weekend with your preferred opening & closing time. * And More... This will extend the **Visibility Option** in all the Module settings that will allow you to use the Scheduled Element Extension. This feature is only available for Pro Users. Currently, the available supported modules are listed below: * All Divi Default Modules * All Divi Supreme Pro Modules(Pro Version). ### Before Using Scheduled Content Element Extension: Before you start using the Scheduled Content Element Extension you first make sure that’s active or Enabled from the Divi Supreme Settings. Go to Divi Supreme > Divi Supreme Pro and Enable the use of Scheduled Element Extension ## Usage To use Scheduled Element Extension, go to any of the supported module’s (listed above) settings and navigate to the** Advanced Tab** Scroll to **Visibility** and look for **Use Scheduled Element** Switch. **Use Scheduled Element** Enable this option if you want to use this extension for any module. **Show or Hide Module** * **Show Option** - This option is very important. If you’ll select Show Option from the dropdown and will set the date and time then the module will be hidden till then but when the time arrives the Module appears which means you’ll not have to worry about the module visibility at a particular time If you don’t get time to change its visibility. * **Hide Option** - The same things go for the Hide Option. But your module will be visible till that time but when the time arrives the module will disappear. **Schedule a Date/Time** Enter your Desired date and time for the Module visibility to show or hide when the time arrives that you set here. **Use Between Date/Time** When you'll enable this option you'll see another Date/Time picker so you can show/hide an element between that date/time. * **Schedule a Date/Time** is the time of start. * **Use Between Date/Time** is the time of end. **Use Business Hour/Time** Enable this option if you want to show a Module only then when your business is open. **Select Day** Select your desired days here. **Opening Time** Add the Opening time of your business here so the module will be shown on your given time. **Closing Time** Add the Closing time of your business here so the module will be gone on your given time. The time format here will be 24 hours. **Apply To** From here you can control the visibility of the module for specific roles. * **All Users** - Choose this option if you want to show the module to everyone e.g Logged-In Users and Visitors and all others. * **Logged In Users** - Choose this option if you want to show this module to only logged in users only, you’ll also get the options to select specific roles or select all for everyone who’s logged In on your site. * **Visitor Users** - Choose this option if you want to show this module to only visitors, which means this module will not be visible to Logged in Members it will be only visible to those users who they’re logged out from your site. **Disable On** This will disable the Module on selected 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.

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.

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

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

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

A better and unique way to showcase multiple images to your visitors by using Floating Multi Images module. You can also change the animation either up/down or left/right. # Content Options **+ Image Item** This is where you add image to your Floating Multi Images Module. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new image. See below for individual image settings. After you add your first image, you will see a gray bar appear with the title of your pin shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the image. ## Animation This is where you can change the floating animation effect. **Floating Effect** There are two types of Floating Animation Effect. * Up Down * Left Right * See [Floating Multi Images here](https://divisupreme.com/features/floating-multi-images-module/). The left column with Up Down animation and the right column with Left Right animation. **Image animation delay interval (in ms)** You can add a delay for the Animation to start in ms here. **Animation Speed** Here you can change the speed of the Floating Images Animation. ## Image Item **Image** Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Sizing Here you can change the placement and the width of the image. **Horizontal Align** Here you can change the horizontal alignment(left/right) of the image in percentage. **Vertical Align** Here you can change the vertical alignment(up/down) of the image in percentage. **Width** You can adjust the width of image. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

A better and unique way to showcase multiple images to your visitors by using Floating Multi Images module. You can also change the animation either up/down or left/right. # Content Options **+ Image Item** This is where you add image to your Floating Multi Images Module. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new image. See below for individual image settings. After you add your first image, you will see a gray bar appear with the title of your pin shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the image. ## Animation This is where you can change the floating animation effect. **Floating Effect** There are two types of Floating Animation Effect. * Up Down * Left Right * See [Floating Multi Images here](https://divisupreme.com/features/floating-multi-images-module/). The left column with Up Down animation and the right column with Left Right animation. **Image animation delay interval (in ms)** You can add a delay for the Animation to start in ms here. **Animation Speed** Here you can change the speed of the Floating Images Animation. ## Image Item **Image** Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Sizing Here you can change the placement and the width of the image. **Horizontal Align** Here you can change the horizontal alignment(left/right) of the image in percentage. **Vertical Align** Here you can change the vertical alignment(up/down) of the image in percentage. **Width** You can adjust the width of image. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

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.

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

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.

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.

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.

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

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

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.

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!

Create engaging and fresh interactions using Divi Block Reveal Image Module. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers image underneath. You get 4 types of animation to choose from. # Content Options ## Image Add the Actual Image here that will be shown after a cool animation. ## Link **Open in Lightbox** Here you can choose whether or not the image should open in Lightbox. Note: if you select to open the image in Lightbox, URL options below will be ignored. **Open as Video Popup** Put the Video link on the Image URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. Then If you click on the Image a video Popup will be shown. ## Block Reveal Animation **Block Reveal Animation style** Here you can set Animation Direction. You can select where it will start from and where it will be ending. You Have Four Options to choose from: * Left to Right * Right to Left * Top to Bottom * Bottom to Top **Block Reveal Color** Here you can change the color of the Block which will be shown first with an animation. **Delay** Adjust the Delay of the Block Reveal Animation here. **Animate in Viewport** The Text Animation will only be shows at a specific Viewport. # Design Options ## Overlay **Image Overlay** Enable this switch if you want to add overlay color or icon or both to the image. **Overlay Color** Change the color of the overlay on the image to your own one. **Use Icon** You can enable this option if you want to show an icon in the overlay. And then can choose any icon from the Divi Icon Library and Change it’s color as well. **Overlay Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image Overlay. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image Overlay. ## Add Rounded Corners, Border and Box Shadow to Image Here you’ll find options to control the corner radius of the Image. You can play around with adding borders and Box Shadow to the Image under Design Options. # Advanced Options Use the advanced options to give your Block Reveal Image module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Create engaging and fresh interactions using Divi Block Reveal Image Module. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers image underneath. You get 4 types of animation to choose from. # Content Options ## Image Add the Actual Image here that will be shown after a cool animation. ## Link **Open in Lightbox** Here you can choose whether or not the image should open in Lightbox. Note: if you select to open the image in Lightbox, URL options below will be ignored. **Open as Video Popup** Put the Video link on the Image URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. Then If you click on the Image a video Popup will be shown. ## Block Reveal Animation **Block Reveal Animation style** Here you can set Animation Direction. You can select where it will start from and where it will be ending. You Have Four Options to choose from: * Left to Right * Right to Left * Top to Bottom * Bottom to Top **Block Reveal Color** Here you can change the color of the Block which will be shown first with an animation. **Delay** Adjust the Delay of the Block Reveal Animation here. **Animate in Viewport** The Text Animation will only be shows at a specific Viewport. # Design Options ## Overlay **Image Overlay** Enable this switch if you want to add overlay color or icon or both to the image. **Overlay Color** Change the color of the overlay on the image to your own one. **Use Icon** You can enable this option if you want to show an icon in the overlay. And then can choose any icon from the Divi Icon Library and Change it’s color as well. **Overlay Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image Overlay. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image Overlay. ## Add Rounded Corners, Border and Box Shadow to Image Here you’ll find options to control the corner radius of the Image. You can play around with adding borders and Box Shadow to the Image under Design Options. # Advanced Options Use the advanced options to give your Block Reveal Image module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

If you just need a simple Google Map, then this Embed Google Map Module will do the job nicely. This will embed into your Divi’s site easily without having to worry about anything else. # Content Options **Address** Enter an address for the map, and the address will be geocoded and displayed on the map. You can simply type in an address in a standard format, such as “1235 Sunny Road, Some City, State, 88343.” **Zoom** The Zoom level of the map. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

If you just need a simple Google Map, then this Embed Google Map Module will do the job nicely. This will embed into your Divi’s site easily without having to worry about anything else. # Content Options **Address** Enter an address for the map, and the address will be geocoded and displayed on the map. You can simply type in an address in a standard format, such as “1235 Sunny Road, Some City, State, 88343.” **Zoom** The Zoom level of the map. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

page 2 of 3

FAQs and documentation for Divi Supreme Products

Before and After Image Module images are not loading correctly

Divi Supreme Button Module

Where to Put Facebook APP ID

Divi Supreme Pro Plugin Update

Divi Scheduled Element Extension

License Key Activation Issue

Divi Before After Image Slider Module

How to Create Facebook APP ID

Divi Image Carousel Module

Divi Floating Multi Images Module

Divi Caldera Forms Module

Divi Icon List Module

Divi Image Hover Reveal Module

Divi Shapes Module

Divi Image Text Reveal Module

Divi Text Badges Module

Divi Block Reveal Text Module

Divi Facebook Feed Module

Divi Block Reveal Image Module

Divi Embed Google Map Module

Divi Supreme

Need Help?