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

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

Introducing Easy Theme Builder, the only extension to fix your issues with the Theme Builder while creating Header, using this extension you can easily enhance the Functionality of Header Providing you easy switches to turn on or off a specific feature. You can easily create have these functionalities using this extension: * **Fixed Header** – Turn your Theme Builder header into a fixed one. With just a few clicks, you can turn your static custom-built header into a fixed one that follows your visitors throughout their stay on your website. * **Shrink On Scroll** – Shrink the Theme Builder header’s height when your visitors are scrolling. It helps reduce the space the Theme Builder header takes up in your visitors’ viewport height. No coding required! * **Switching Logo On Scroll** – You can switch your header logo when your visitors are scrolling. With just a few clicks, you can have a different logo customized specially for header, This gives you more control over the design of your site. ### How to use Let’s see where we can find this extension settings and how to use it. ### Theme Builder Header Configure Theme Builder Header settings here. **Enable Fixed Header** Obviously, this will make your Header always Fixed on top even when you scroll down. For developers, the fixed header CSS Class Selector is “.dsm_fixed_header“ **Disable on** You can select on which device you don’t want to make your Header Fixed. You can even select Tablet or Mobile. **Push Body Down** This will calculate the Divi Theme Builder Header height automatically and apply the height to the body to prevent the first section from overlapping. This will push the first section down based on the header height. This is not needed if you have a transparent background for the header. **On Scroll Threshold** You can define when the header should take effect after viewport. (Default: 200) ### Scrolling Here you can make changes to the element on scroll. **Enable Scrolling Options** This will enable the scrolling elements configured below. For developers, the active scroll CSS Class Selector is ".dsm_fixed_header_scroll_active" **#1 Section Background Color** Change the background color for the first section in the Header on scroll. **#2 Section Background Color** Change the background color for the second section in the Header on scroll. **Show Box Shadow on Scroll** This will hide the box shadow on page load and show on shrink threshold. You should define the Shadow in the Theme Builder section settings. ### Shrink Here you can make changes to the shrink elements. **Enable Shrink on Scroll** This will shrink your Divi Theme Builder Header and stays fixed by decreasing the height of the Header when you scroll down. For developers, the active shrink CSS Class Selector is “.dsm_fixed_header_shrink_active“ **Shrink Section Padding (px)** If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the section in the Header when shrinked. **Shrink Row Padding (px)** If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the row in the Header when shrinked. **Shrink Menu Module Padding (px)** If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the menu module when shrinked. Let’s see how this Padding works, Let’s say you’ve 20px padding added to the section of the Header and when you’ll put 10px in the “Shrink Section Padding (px)” field it will remove that 20px from the section and will add 10px there. That’s how it works. **Shrink Image (%)** If Shrink on Scroll is enabled, you can define a max-width in percentage(%) value when shrinked for the Logo Image. **Shrink Logo Image** If Shrink on Scroll is enabled, you can change the logo image when shrinked. So you’ll have a different logo when scrolling down.

Introducing Easy Theme Builder, the only extension to fix your issues with the Theme Builder while creating Header, using this extension you can easily enhance the Functionality of Header Providing you easy switches to turn on or off a specific feature. You can easily create have these functionalities using this extension: * **Fixed Header** – Turn your Theme Builder header into a fixed one. With just a few clicks, you can turn your static custom-built header into a fixed one that follows your visitors throughout their stay on your website. * **Shrink On Scroll** – Shrink the Theme Builder header’s height when your visitors are scrolling. It helps reduce the space the Theme Builder header takes up in your visitors’ viewport height. No coding required! * **Switching Logo On Scroll** – You can switch your header logo when your visitors are scrolling. With just a few clicks, you can have a different logo customized specially for header, This gives you more control over the design of your site. ### How to use Let’s see where we can find this extension settings and how to use it. ### Theme Builder Header Configure Theme Builder Header settings here. **Enable Fixed Header** Obviously, this will make your Header always Fixed on top even when you scroll down. For developers, the fixed header CSS Class Selector is “.dsm_fixed_header“ **Disable on** You can select on which device you don’t want to make your Header Fixed. You can even select Tablet or Mobile. **Push Body Down** This will calculate the Divi Theme Builder Header height automatically and apply the height to the body to prevent the first section from overlapping. This will push the first section down based on the header height. This is not needed if you have a transparent background for the header. **On Scroll Threshold** You can define when the header should take effect after viewport. (Default: 200) ### Scrolling Here you can make changes to the element on scroll. **Enable Scrolling Options** This will enable the scrolling elements configured below. For developers, the active scroll CSS Class Selector is ".dsm_fixed_header_scroll_active" **#1 Section Background Color** Change the background color for the first section in the Header on scroll. **#2 Section Background Color** Change the background color for the second section in the Header on scroll. **Show Box Shadow on Scroll** This will hide the box shadow on page load and show on shrink threshold. You should define the Shadow in the Theme Builder section settings. ### Shrink Here you can make changes to the shrink elements. **Enable Shrink on Scroll** This will shrink your Divi Theme Builder Header and stays fixed by decreasing the height of the Header when you scroll down. For developers, the active shrink CSS Class Selector is “.dsm_fixed_header_shrink_active“ **Shrink Section Padding (px)** If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the section in the Header when shrinked. **Shrink Row Padding (px)** If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the row in the Header when shrinked. **Shrink Menu Module Padding (px)** If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the menu module when shrinked. Let’s see how this Padding works, Let’s say you’ve 20px padding added to the section of the Header and when you’ll put 10px in the “Shrink Section Padding (px)” field it will remove that 20px from the section and will add 10px there. That’s how it works. **Shrink Image (%)** If Shrink on Scroll is enabled, you can define a max-width in percentage(%) value when shrinked for the Logo Image. **Shrink Logo Image** If Shrink on Scroll is enabled, you can change the logo image when shrinked. So you’ll have a different logo when scrolling down.

### Getting License Key You can obtain your license key by logging in to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager. You will also receive an email regarding the license key for your Divi Supreme Products. ### License Activation Right after activating the plugin, you will see a notification “Divi Supreme Pro: Please enter your license key to get regular update”. The license activation is only required to receive automatic updates. ![license-activate.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Epk58buO4e/license-activate.png) ### Deactivate License You can either login to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager and deactivate from there or simply just login to your WordPress site and from the admin menu, navigate to Divi Supreme Pro -> License. ### Check License Key Expiry Login to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager and from there you will able to see your license expiry date. ### Renew License Key Login to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager/View and from there you will able to see a renew button.

### Getting License Key You can obtain your license key by logging in to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager. You will also receive an email regarding the license key for your Divi Supreme Products. ### License Activation Right after activating the plugin, you will see a notification “Divi Supreme Pro: Please enter your license key to get regular update”. The license activation is only required to receive automatic updates. ![license-activate.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Epk58buO4e/license-activate.png) ### Deactivate License You can either login to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager and deactivate from there or simply just login to your WordPress site and from the admin menu, navigate to Divi Supreme Pro -> License. ### Check License Key Expiry Login to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager and from there you will able to see your license expiry date. ### Renew License Key Login to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager/View and from there you will able to see a renew button.

Lottie is an iOS, macOS, Android, and React Native library that renders After Effects animations in any native app. And we’re bringing it to Divi with a Custom Module that’ll let you add beautiful animations with ease. [Click here](https://divisupreme.com/features/divi-lottie-module/) to see live demo. # Content Options **Lottie JSON File** Here you’ll need to upload the .JSON File that you’ll download from LottieFiles and you don’t have to worry about uploading a .JSON File because Divi Supreme already did it for you. **Loop** If you want to keep running/Looping enable this option. **Direction** Here you can change the direction of the animation it maybe either Normal or Reverse. **Speed (More is Faster)** Here you can change the speed of the animation the more value you’ll enter here the more speed of the animation will be. **Play Animation on Mouse Hover/Mouse over** Enabling this switch will only play the animation when you’ll hover or mouse over to the animation. **Animate in Viewport** Here you can play around with animation to play at a specific viewport. # Design Options Because It’s an animation you don’t need to do any design settings here. But if you want then you can add a Box Shadow, Corner Radius and Play around with other settings here. # Advanced Options Use the advanced options to give your Lottie Module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Lottie is an iOS, macOS, Android, and React Native library that renders After Effects animations in any native app. And we’re bringing it to Divi with a Custom Module that’ll let you add beautiful animations with ease. [Click here](https://divisupreme.com/features/divi-lottie-module/) to see live demo. # Content Options **Lottie JSON File** Here you’ll need to upload the .JSON File that you’ll download from LottieFiles and you don’t have to worry about uploading a .JSON File because Divi Supreme already did it for you. **Loop** If you want to keep running/Looping enable this option. **Direction** Here you can change the direction of the animation it maybe either Normal or Reverse. **Speed (More is Faster)** Here you can change the speed of the animation the more value you’ll enter here the more speed of the animation will be. **Play Animation on Mouse Hover/Mouse over** Enabling this switch will only play the animation when you’ll hover or mouse over to the animation. **Animate in Viewport** Here you can play around with animation to play at a specific viewport. # Design Options Because It’s an animation you don’t need to do any design settings here. But if you want then you can add a Box Shadow, Corner Radius and Play around with other settings here. # Advanced Options Use the advanced options to give your Lottie 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 ever wanted to use a Divi Module inside another module then this extension will be helpful. Using this Extension you can easily put a Divi Layout(Saved in your Library) inside of any module where you can write text. When you’ll enable this extension you’ll then see a Shortcode added for your Layout you’ve saved in Divi Library. This is a free extension which means it can also be found in our Free Plugin. ## Before Using Divi Popups: Before you start using the shortcode extension make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable Divi Library Shortcodes and the Click on the Save Changes button. ## Usage When you’ll enable this extension from the plugin settings you can open up the Divi Library and you’ll see shortcode for each layout in the Library. Now you’ll simply have to copy the shortcode and put it inside of any module you want such as Tab, Blurb, Toggle, Accordion and more. You can also use the shortcode to put any module in your sidebar or Footer.

If you ever wanted to use a Divi Module inside another module then this extension will be helpful. Using this Extension you can easily put a Divi Layout(Saved in your Library) inside of any module where you can write text. When you’ll enable this extension you’ll then see a Shortcode added for your Layout you’ve saved in Divi Library. This is a free extension which means it can also be found in our Free Plugin. ## Before Using Divi Popups: Before you start using the shortcode extension make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable Divi Library Shortcodes and the Click on the Save Changes button. ## Usage When you’ll enable this extension from the plugin settings you can open up the Divi Library and you’ll see shortcode for each layout in the Library. Now you’ll simply have to copy the shortcode and put it inside of any module you want such as Tab, Blurb, Toggle, Accordion and more. You can also use the shortcode to put any module in your sidebar or Footer.

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

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

A creative and fully customizable Divi Carousel module to display a beautiful combination of texts, links, badge and image in a Carousel Slider. Control and customize almost everything in this powerful carousel module. It comes with image and video lightbox/popup for Image and Button and many more Carousel Settings. You can design an unlimited number of carousels with this module. # Content Options ## Adding Carousel Items Click on + Add new Item to add your first Carousel. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Carousel. See below for individual Carousel Item settings. After you add your first Carousel, you will see a gray bar appear with the title of your Carousel shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Carousel. ## Carousel Settings **Carousel Effect** Choose a Carousel effect from 4 Different Effects and more to add soon. * 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** If enabled, then the active slide will be centered, not always on the left side. **Slides to Show** Change the number of slides you want to show in the carousel. You can enable the responsive option to adjust it for different screen sizes. **Slides to Scroll** Change the number of slides you want to scroll when click on the arrow key to see the next slides. **Slides Speed** Adjust the speed of the slider when changing the slides. **Autoplay** You can enable this option to slide Carousel Items automatically. **Autoplay Change interval** Change the time interval for the slides to change after that time. **Pause on Hover** Enable this option if you want to stop the Autoplay when Hover over to Carousel. **Spacing** Add some spacing between carousel Items. **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. **Equal Height** Equalize the carousel Items height. Carousel Card Items will be 100% in Height. **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 change the mouse icon to grab cursor icon. # Design Options ## Layout & Alignment **Layout** Change the type of layout to Stacked or Inline. * **Stacked** will place the image on top and content on the bottom. * **Inline** will place the content Inline which means Image and content both in the same line. **Layout type Inline Settings** If you’ll select your layout type you will be able to see these options: * **Width**: Change the width of the image * **Order Alignment**: Change the alignment of the image to Left(Places the image on the left side of the content) or Right (Places the image on the right side of the content). * **Horizontal Content Alignment** - This option will let you align the content to Top, Center or Bottom, most helpful while using the inline layout type. * ## Image Make design changes to the image here. 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. ## Badge Change badge’s position color, background color and more here. **Position** Change the position of the badge anywhere on the Image. **Background Color** Change the background color of the badge to your desired one. **Padding** Add padding to the badge here to expand it more. And you can play with the badge text by changing its font, size, color and weight and even add shadow to the badge text. **Add Rounded Corners, Border and Box Shadow to Badge** 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. ## Arrow Element This is the place where you can add custom styles to the arrow icons. **Arrow Position** Change the position of the arrow inside or outside of the carousel. **Mobile Arrow Position** Change the position of the arrow inside or outside of the carousel for Mobile only. **Use Arrow Custom position** Enable this option if you want to add both arrow icons to your custom position. **Use Custom Previous Arrow Icon** Enabling this option will let you use a custom icon for the Previous Arrow. You can browse many Icons from Divi Icon Library. **Use Custom Next Arrow Icon** Enabling this option will let you use a custom icon for the Next Arrow. You can browse many Icons from Divi Icon Library. **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. **Arrow Rounded Corners** Add Rounded corners to the Arrow Icons. **Arrow Border and Box Shadow** Add Border and Shadow to the arrow Icons. ## Pagination Element **Pagination Horizontal Placement** Change the horizontal position of the pagination dots. **Pagination Active Color** Change the color of the current pagination dot. **Pagination In-Active Color** Change the color of all the other pagination dots. ## Other Titles, Subtitle, and Body Texts And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels. ## Button Enable Use Custom Styles for the button to add custom stylings to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button. ## Border Card Corner Radius - Add Rounded corners to the single card item. **Card Border ** Add Border - Change its color and width for the single card item. ## Box Shadow Add Shadow to the Single Card Item to make it look more natural. # Advanced Options Use the advanced options to give your Card Carousel module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # Carousel Item Content Options ## Text **Title** Enter your title text here. You can take out the text if you don’t want the Title text. **Subtitle** Enter your subtitle text here. You can take out the text if you don’t want the subtitle text. **Content** Enter your description text here. You can take out the text if you don’t want the description text. ## Image & Badge Manage your Image and Badge text here. **Image** Add an image from your Library here. **Use Image as background** Enable this option to use the image as the background so you can play around with the position and Height of the image and even add hover animation to the image. **Image Height** Change the height of the image by sliding the slider. **Background Image animation** Add animation to the image from 4 different animations and to even add more in upcoming updates. **Open as Image Lightbox** Enable this option if you want to open the image in the lightbox when clicked. When you’ll enable this option you’ll then add an image from your library which will be opened in Lightbox. **Open as VideoLightbox** Enable this option if you want to show a video in an overlay. When you’ll enable this option you’ll then asked to put the URL of the video in field and module will do the rest. **Badge Text** Add text to the Badge here. You can take out the text if you don’t want the badge text. You can also add a link to the badge under the link panel. ## Button **Button text** Add text to the button here you can always remove the text of the element which you don’t want. **Button URL** Add a URL to the button here. **Open as Image Lightbox** Enable this option if you want to open an image in the lightbox. When you’ll enable this option you’ll then add an image from your library which will be opened in Lightbox. And when you’ll click the button an image will be shown in Lightbox. **Open as Video Lightbox** Enable this option if you want to show a video in an overlay. Make sure you’ve added the video link to the Button URL field. And when you’ll click the button the video will be shown in Lightbox. # Item Design Options ## Image **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. **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. ## Badge Change badge’s position color, background color and more here. **Position** Change the position of the badge anywhere on the Image. **Use Custom Position** Enabling this switch will let you position the badge on your own custom position on the image. **Background Color** Change the background color of the badge to your desired one. **Padding** Add padding to the badge here to expand it more. And you can play with the badge text by changing its font, size, color and weight and even add shadow to the badge text. **Add Rounded Corners, Border and Box Shadow to Badge** 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. ## Other Titles, Subtitle, and Body Texts And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels. ## Button Enable Use Custom Styles for the button to add custom stylings to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button. # Advanced Options Use the advanced options to give your Card Carousel module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

A creative and fully customizable Divi Carousel module to display a beautiful combination of texts, links, badge and image in a Carousel Slider. Control and customize almost everything in this powerful carousel module. It comes with image and video lightbox/popup for Image and Button and many more Carousel Settings. You can design an unlimited number of carousels with this module. # Content Options ## Adding Carousel Items Click on + Add new Item to add your first Carousel. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Carousel. See below for individual Carousel Item settings. After you add your first Carousel, you will see a gray bar appear with the title of your Carousel shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Carousel. ## Carousel Settings **Carousel Effect** Choose a Carousel effect from 4 Different Effects and more to add soon. * 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** If enabled, then the active slide will be centered, not always on the left side. **Slides to Show** Change the number of slides you want to show in the carousel. You can enable the responsive option to adjust it for different screen sizes. **Slides to Scroll** Change the number of slides you want to scroll when click on the arrow key to see the next slides. **Slides Speed** Adjust the speed of the slider when changing the slides. **Autoplay** You can enable this option to slide Carousel Items automatically. **Autoplay Change interval** Change the time interval for the slides to change after that time. **Pause on Hover** Enable this option if you want to stop the Autoplay when Hover over to Carousel. **Spacing** Add some spacing between carousel Items. **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. **Equal Height** Equalize the carousel Items height. Carousel Card Items will be 100% in Height. **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 change the mouse icon to grab cursor icon. # Design Options ## Layout & Alignment **Layout** Change the type of layout to Stacked or Inline. * **Stacked** will place the image on top and content on the bottom. * **Inline** will place the content Inline which means Image and content both in the same line. **Layout type Inline Settings** If you’ll select your layout type you will be able to see these options: * **Width**: Change the width of the image * **Order Alignment**: Change the alignment of the image to Left(Places the image on the left side of the content) or Right (Places the image on the right side of the content). * **Horizontal Content Alignment** - This option will let you align the content to Top, Center or Bottom, most helpful while using the inline layout type. * ## Image Make design changes to the image here. 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. ## Badge Change badge’s position color, background color and more here. **Position** Change the position of the badge anywhere on the Image. **Background Color** Change the background color of the badge to your desired one. **Padding** Add padding to the badge here to expand it more. And you can play with the badge text by changing its font, size, color and weight and even add shadow to the badge text. **Add Rounded Corners, Border and Box Shadow to Badge** 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. ## Arrow Element This is the place where you can add custom styles to the arrow icons. **Arrow Position** Change the position of the arrow inside or outside of the carousel. **Mobile Arrow Position** Change the position of the arrow inside or outside of the carousel for Mobile only. **Use Arrow Custom position** Enable this option if you want to add both arrow icons to your custom position. **Use Custom Previous Arrow Icon** Enabling this option will let you use a custom icon for the Previous Arrow. You can browse many Icons from Divi Icon Library. **Use Custom Next Arrow Icon** Enabling this option will let you use a custom icon for the Next Arrow. You can browse many Icons from Divi Icon Library. **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. **Arrow Rounded Corners** Add Rounded corners to the Arrow Icons. **Arrow Border and Box Shadow** Add Border and Shadow to the arrow Icons. ## Pagination Element **Pagination Horizontal Placement** Change the horizontal position of the pagination dots. **Pagination Active Color** Change the color of the current pagination dot. **Pagination In-Active Color** Change the color of all the other pagination dots. ## Other Titles, Subtitle, and Body Texts And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels. ## Button Enable Use Custom Styles for the button to add custom stylings to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button. ## Border Card Corner Radius - Add Rounded corners to the single card item. **Card Border ** Add Border - Change its color and width for the single card item. ## Box Shadow Add Shadow to the Single Card Item to make it look more natural. # Advanced Options Use the advanced options to give your Card Carousel module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # Carousel Item Content Options ## Text **Title** Enter your title text here. You can take out the text if you don’t want the Title text. **Subtitle** Enter your subtitle text here. You can take out the text if you don’t want the subtitle text. **Content** Enter your description text here. You can take out the text if you don’t want the description text. ## Image & Badge Manage your Image and Badge text here. **Image** Add an image from your Library here. **Use Image as background** Enable this option to use the image as the background so you can play around with the position and Height of the image and even add hover animation to the image. **Image Height** Change the height of the image by sliding the slider. **Background Image animation** Add animation to the image from 4 different animations and to even add more in upcoming updates. **Open as Image Lightbox** Enable this option if you want to open the image in the lightbox when clicked. When you’ll enable this option you’ll then add an image from your library which will be opened in Lightbox. **Open as VideoLightbox** Enable this option if you want to show a video in an overlay. When you’ll enable this option you’ll then asked to put the URL of the video in field and module will do the rest. **Badge Text** Add text to the Badge here. You can take out the text if you don’t want the badge text. You can also add a link to the badge under the link panel. ## Button **Button text** Add text to the button here you can always remove the text of the element which you don’t want. **Button URL** Add a URL to the button here. **Open as Image Lightbox** Enable this option if you want to open an image in the lightbox. When you’ll enable this option you’ll then add an image from your library which will be opened in Lightbox. And when you’ll click the button an image will be shown in Lightbox. **Open as Video Lightbox** Enable this option if you want to show a video in an overlay. Make sure you’ve added the video link to the Button URL field. And when you’ll click the button the video will be shown in Lightbox. # Item Design Options ## Image **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. **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. ## Badge Change badge’s position color, background color and more here. **Position** Change the position of the badge anywhere on the Image. **Use Custom Position** Enabling this switch will let you position the badge on your own custom position on the image. **Background Color** Change the background color of the badge to your desired one. **Padding** Add padding to the badge here to expand it more. And you can play with the badge text by changing its font, size, color and weight and even add shadow to the badge text. **Add Rounded Corners, Border and Box Shadow to Badge** 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. ## Other Titles, Subtitle, and Body Texts And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels. ## Button Enable Use Custom Styles for the button to add custom stylings to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button. # Advanced Options Use the advanced options to give your Card Carousel module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

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!

# License ## Getting License Key You can obtain your license key by logging in to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager. You will also receive an email regarding the license key for your Divi Supreme Pro. ## License Activation Right after activating the plugin, you will see a notification “Divi Supreme Pro: Please enter your license key to get regular update”. The license activation is only required to receive automatic updates. ## Deactivate License You can either login to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager and deactivate from there or simply just login to your WordPress site and from the admin menu, navigate to Divi Supreme Pro -> License. ## Check License Key Expiry Login to Your[Account](https://divisupreme.com/login/) -> Orders -> License Manager and from there you will able to see your license expiry date. ## Renew License Key Login to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager/View and from there you will able to see a renew button.

# License ## Getting License Key You can obtain your license key by logging in to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager. You will also receive an email regarding the license key for your Divi Supreme Pro. ## License Activation Right after activating the plugin, you will see a notification “Divi Supreme Pro: Please enter your license key to get regular update”. The license activation is only required to receive automatic updates. ## Deactivate License You can either login to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager and deactivate from there or simply just login to your WordPress site and from the admin menu, navigate to Divi Supreme Pro -> License. ## Check License Key Expiry Login to Your[Account](https://divisupreme.com/login/) -> Orders -> License Manager and from there you will able to see your license expiry date. ## Renew License Key Login to Your [Account](https://divisupreme.com/login/) -> Orders -> License Manager/View and from there you will able to see a renew button.

Add a nice and cool typing effect to your website using the Typing Effect for Divi. Write the text that you want to show and it will appear letter by letter like if you were typing with an old typewriter. This module automatically types out sentences and then deletes them to type the following sentence. You can configure settings such as how quickly the typing effect and backspacing takes place, then delays before starting a sentence with just a few clicks, set the animation to loop infinitely or randomise the order of the sentences. # Content Options ## Text **Before Text** This will add a static text before the typing effect. **Typing Effect Text** This will have an animated typing effect on your Title. To seperate the words in typing effect, you will need to add “|” e.g text1|word|animating **Typing Text on a new Line** Enable this option If you'd like to have the Typing text on a new line. **After Text** This will add a static text after the typing effect. **After Text on a new Line** Enable this option If you'd like to have the After text on a new line. ## Typing Effect This is where you can configure the typing settings such as how quickly the typing effect and backspacing takes place, then delays before starting a sentence with just a few clicks, set the animation to loop infinitely or randomise the order of the sentences. **Use Loop** If enabled, typing effect will loop infinite. **Remove Cursor After Completed** This option will show up only when you disable ‘Use Loop’. This will remove the cursor after typing finish looping their effect. **Typing Speed (in ms)** Here you can control the speed of the typing effect. Lesser value will have faster typing effect. **Typing Backspacing (in ms)** Delay before backspacing. **Back Delay (in ms)** Here you can delay before backspacing. **Use Typing FadeOut** This will have fade out animation instead of backspacing. **Use Typing Shuffle** Here you can choose to shuffle your Typing Effect text strings. **Cursor Character** You can have your own custom Cursor Character here. The character is “|” by default. You can put in any characters, letters or numbers. ## Admin Label By default, your typing effect module will appear with a label that reads ‘Supreme Typing’ in the builder. The Admin Label allows you to change this label for easy identification. # Design Options Here you can find the option to style the Before Text, Typing Effect and the After text. You can style and/or position your text just how you want it by choosing the text color, orientation, font, font size, font spacing, and line height. You can also designate a border style, set a max width for your module, and add custom margin and padding. ## Before Text **Background Color** If you like to have a Background color to the text which is showing **Before** the Typing text then specify it here. **Padding** Add Some padding around the **Before** Text. Useful If you've added Background color to the Typing text. And else you can play around with changing the Font, Size, Color, Wieght and more of the **Before** Text ## After Text **Background Color** If you like to have a Background color to the text which is showing **After** the Typing text then specify it here. **Padding** Add Some padding around the **After** Text. Useful If you've added Background color to the Typing text. And else you can play around with changing the Font, Size, Color, Wieght and more of the **After** Text ## Typing Styles **Cursor Color** By default, the cursor color in typing effect will appear the same as your title font color. If you would like to change the color of your cursor color, choose your desired color from the color picker using this option. **Background Color** If you like to have a Background color to the text which is **Typing** then specify it here. **Padding** Add Some padding around the **Typing** Text. Useful If you've added Background color to the Typing text. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Add a nice and cool typing effect to your website using the Typing Effect for Divi. Write the text that you want to show and it will appear letter by letter like if you were typing with an old typewriter. This module automatically types out sentences and then deletes them to type the following sentence. You can configure settings such as how quickly the typing effect and backspacing takes place, then delays before starting a sentence with just a few clicks, set the animation to loop infinitely or randomise the order of the sentences. # Content Options ## Text **Before Text** This will add a static text before the typing effect. **Typing Effect Text** This will have an animated typing effect on your Title. To seperate the words in typing effect, you will need to add “|” e.g text1|word|animating **Typing Text on a new Line** Enable this option If you'd like to have the Typing text on a new line. **After Text** This will add a static text after the typing effect. **After Text on a new Line** Enable this option If you'd like to have the After text on a new line. ## Typing Effect This is where you can configure the typing settings such as how quickly the typing effect and backspacing takes place, then delays before starting a sentence with just a few clicks, set the animation to loop infinitely or randomise the order of the sentences. **Use Loop** If enabled, typing effect will loop infinite. **Remove Cursor After Completed** This option will show up only when you disable ‘Use Loop’. This will remove the cursor after typing finish looping their effect. **Typing Speed (in ms)** Here you can control the speed of the typing effect. Lesser value will have faster typing effect. **Typing Backspacing (in ms)** Delay before backspacing. **Back Delay (in ms)** Here you can delay before backspacing. **Use Typing FadeOut** This will have fade out animation instead of backspacing. **Use Typing Shuffle** Here you can choose to shuffle your Typing Effect text strings. **Cursor Character** You can have your own custom Cursor Character here. The character is “|” by default. You can put in any characters, letters or numbers. ## Admin Label By default, your typing effect module will appear with a label that reads ‘Supreme Typing’ in the builder. The Admin Label allows you to change this label for easy identification. # Design Options Here you can find the option to style the Before Text, Typing Effect and the After text. You can style and/or position your text just how you want it by choosing the text color, orientation, font, font size, font spacing, and line height. You can also designate a border style, set a max width for your module, and add custom margin and padding. ## Before Text **Background Color** If you like to have a Background color to the text which is showing **Before** the Typing text then specify it here. **Padding** Add Some padding around the **Before** Text. Useful If you've added Background color to the Typing text. And else you can play around with changing the Font, Size, Color, Wieght and more of the **Before** Text ## After Text **Background Color** If you like to have a Background color to the text which is showing **After** the Typing text then specify it here. **Padding** Add Some padding around the **After** Text. Useful If you've added Background color to the Typing text. And else you can play around with changing the Font, Size, Color, Wieght and more of the **After** Text ## Typing Styles **Cursor Color** By default, the cursor color in typing effect will appear the same as your title font color. If you would like to change the color of your cursor color, choose your desired color from the color picker using this option. **Background Color** If you like to have a Background color to the text which is **Typing** then specify it here. **Padding** Add Some padding around the **Typing** Text. Useful If you've added Background color to the Typing text. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Divi Supreme features a huge collection of custom creative modules and extensions that can be used in the Divi Theme, Extra Theme and the Divi Builder. We will keep on adding and enhance Divi Supreme Pro where you can find extra features for Divi to help you build better websites. Currently, the available extensions are listed below: * Divi Popup * Divi Scheduled Element * Divi Easy Theme Builder * Divi Responsive Viewer * Read More * Divi Library Shortcodes # Enable Extensions To enable Divi Supreme Extensions, login to your WordPress admin panel, then on your admin menu, look for Divi Supreme Pro here you can then choose which extension you'd like to use just enable it to start using it.

Divi Supreme features a huge collection of custom creative modules and extensions that can be used in the Divi Theme, Extra Theme and the Divi Builder. We will keep on adding and enhance Divi Supreme Pro where you can find extra features for Divi to help you build better websites. Currently, the available extensions are listed below: * Divi Popup * Divi Scheduled Element * Divi Easy Theme Builder * Divi Responsive Viewer * Read More * Divi Library Shortcodes # Enable Extensions To enable Divi Supreme Extensions, login to your WordPress admin panel, then on your admin menu, look for Divi Supreme Pro here you can then choose which extension you'd like to use just enable it to start using it.

Introducing Responsive Viewer Extension for Divi. Want to create even more responsive websites with Divi then this extension is made for you. ## Breakpoint Presets Preview Save your precious time and preview all your responsive design in different breakpoint with just a few clicks. ## Custom Breakpoint Preview Besides choosing from the presents, You can also set your own custom responsive sizes right in the Divi Builder. ## Perfect Responsive It’s time to make your mobile Divi sites even better. Preview your beautiful design for iPhone, iPad, Android devices or even the biggest or smallest mobile devices. ## Before you start using Make sure that the extension is enabled from Divi Supreme’s Settings page for it to work. ## How it Works? After enabling the extension you’ll now be able to see more responsive sizes when you’re editing your page using Visual Builder, Backend Divi Builder, and Theme Builder. When you’ll go to Mobile view you’ll now see some more screen sizes and a field where you can set your own custom size. The size of the Mobile view by default in Divi was 479px but using this extension you can change them to 375px, 320px or even small or large, Helping you to create even more Responsive sites with Divi. If you want to add a custom value like 350px just put it in the Field and Press Enter. Make sure you only put the value not px. So there you go that’s how easy it is to use this extension, Saving your time to go to the Browser Inspect tool every time you’re creating your page. We hope that you’ll found it useful for your next project. ## Backend Builder Preview Here’s a quick look at how it Looks like in the Backend Divi Builder. If you love to use the Divi Backend builder that don’t worry this extension also work perfectly there. ## Theme Builder Preview This extension also works with the Divi’s Theme Builder helping you to create more responsive Header, Footer, Archive pages and more. Here’s a quick look

Introducing Responsive Viewer Extension for Divi. Want to create even more responsive websites with Divi then this extension is made for you. ## Breakpoint Presets Preview Save your precious time and preview all your responsive design in different breakpoint with just a few clicks. ## Custom Breakpoint Preview Besides choosing from the presents, You can also set your own custom responsive sizes right in the Divi Builder. ## Perfect Responsive It’s time to make your mobile Divi sites even better. Preview your beautiful design for iPhone, iPad, Android devices or even the biggest or smallest mobile devices. ## Before you start using Make sure that the extension is enabled from Divi Supreme’s Settings page for it to work. ## How it Works? After enabling the extension you’ll now be able to see more responsive sizes when you’re editing your page using Visual Builder, Backend Divi Builder, and Theme Builder. When you’ll go to Mobile view you’ll now see some more screen sizes and a field where you can set your own custom size. The size of the Mobile view by default in Divi was 479px but using this extension you can change them to 375px, 320px or even small or large, Helping you to create even more Responsive sites with Divi. If you want to add a custom value like 350px just put it in the Field and Press Enter. Make sure you only put the value not px. So there you go that’s how easy it is to use this extension, Saving your time to go to the Browser Inspect tool every time you’re creating your page. We hope that you’ll found it useful for your next project. ## Backend Builder Preview Here’s a quick look at how it Looks like in the Backend Divi Builder. If you love to use the Divi Backend builder that don’t worry this extension also work perfectly there. ## Theme Builder Preview This extension also works with the Divi’s Theme Builder helping you to create more responsive Header, Footer, Archive pages and more. Here’s a quick look

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

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

Big fan of Contact Form 7 plugin? Now with Supreme Contact Form 7, you can select your contact Form from the dropdown list without having to go back and forth switching between Visual Builder and Contact Form 7 setting page copying the shortcode and adding to the Divi Code Module. Style your Input Fields, Button, Labels, Validation, Error Messages and more! # Content Options ## Contact Form 7 Select a contact form that should be used in the module. You can create new contact form 7 using the Contact > Add New page in your WordPress Dashboard. Each time you create a new contact form, the form will be selectable in this dropdown menu. ## Show Error & Validation Messages This will show the error and validation messages on the Visual Builder for styling purposes. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Labels This is where you can style your label tag. **Bottom Spacing** The bottom spacing of the label. ### Input, Textarea & Select This is where you can style the Input, Textarea & Select such as background color, fonts, field rounded corners, border and more! ### Placeholder If you are using a placeholder on your Contact Form, this is where you can style the placeholder such as fonts. ### Radio & Checkbox If you are using a Radio & Checkbox on your Contact Form, this is where you can style the Radio & Checkbox such as fonts. ### File If you are using a File on your Contact Form, this is where you can style the File such as fonts, padding and background color. **Padding** Padding is the space added inside of your file wrapper, between the edge of the file and its internal elements. You can add custom padding values to any of the file wrapper’s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields. **Background Color** Here you can choose a background color for your file. ## Error Messages Here you can style the appearance of your Error Message. Make sure you turn on "Show Error & Validation Messages" in the Content Tab in order to view them in Visual Builder. **Background Color** Here you can choose a background color for your Error Messages. ## Validation Error Messages Here you can style the appearance of your Validation Error Messages. Make sure you turn on Show Error & Validation Messages in the Content Tab in order to view them in Visual Builder. **Background Color** Here you can choose a background color for your Validation Error Messages. **Validation Success Messages** Here you can style the appearance of your Validation Success Messages. Make sure you turn on Show Error & Validation Messages in the Content Tab in order to view them in Visual Builder. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Big fan of Contact Form 7 plugin? Now with Supreme Contact Form 7, you can select your contact Form from the dropdown list without having to go back and forth switching between Visual Builder and Contact Form 7 setting page copying the shortcode and adding to the Divi Code Module. Style your Input Fields, Button, Labels, Validation, Error Messages and more! # Content Options ## Contact Form 7 Select a contact form that should be used in the module. You can create new contact form 7 using the Contact > Add New page in your WordPress Dashboard. Each time you create a new contact form, the form will be selectable in this dropdown menu. ## Show Error & Validation Messages This will show the error and validation messages on the Visual Builder for styling purposes. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Labels This is where you can style your label tag. **Bottom Spacing** The bottom spacing of the label. ### Input, Textarea & Select This is where you can style the Input, Textarea & Select such as background color, fonts, field rounded corners, border and more! ### Placeholder If you are using a placeholder on your Contact Form, this is where you can style the placeholder such as fonts. ### Radio & Checkbox If you are using a Radio & Checkbox on your Contact Form, this is where you can style the Radio & Checkbox such as fonts. ### File If you are using a File on your Contact Form, this is where you can style the File such as fonts, padding and background color. **Padding** Padding is the space added inside of your file wrapper, between the edge of the file and its internal elements. You can add custom padding values to any of the file wrapper’s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields. **Background Color** Here you can choose a background color for your file. ## Error Messages Here you can style the appearance of your Error Message. Make sure you turn on "Show Error & Validation Messages" in the Content Tab in order to view them in Visual Builder. **Background Color** Here you can choose a background color for your Error Messages. ## Validation Error Messages Here you can style the appearance of your Validation Error Messages. Make sure you turn on Show Error & Validation Messages in the Content Tab in order to view them in Visual Builder. **Background Color** Here you can choose a background color for your Validation Error Messages. **Validation Success Messages** Here you can style the appearance of your Validation Success Messages. Make sure you turn on Show Error & Validation Messages in the Content Tab in order to view them in Visual Builder. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

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.

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.

We've added a new functionality to Divi Supreme and using that you can easily Enable the SVG Uploads in Divi by simply enabling a switch. ### How to Enable SVG Uploads To enable the SVG Uploads in Divi all you've to do is open up Divi Supreme Settings > Misc > **Allow SVG file Upload** enable this switch and click on Save Changes button. Now when you'll try to upload any SVG to Media Library or from anywhere where you can access media Library, you'll see the SVG file uploads without any restrictions. That's how easily you can enable SVG uploads in Divi using this extra option available in Divi Supreme. Hope you'll find it useful and you'll don't need to add custom code to functions.php or install a separate plugin for this.

We've added a new functionality to Divi Supreme and using that you can easily Enable the SVG Uploads in Divi by simply enabling a switch. ### How to Enable SVG Uploads To enable the SVG Uploads in Divi all you've to do is open up Divi Supreme Settings > Misc > **Allow SVG file Upload** enable this switch and click on Save Changes button. Now when you'll try to upload any SVG to Media Library or from anywhere where you can access media Library, you'll see the SVG file uploads without any restrictions. That's how easily you can enable SVG uploads in Divi using this extra option available in Divi Supreme. Hope you'll find it useful and you'll don't need to add custom code to functions.php or install a separate plugin for this.

Before you install the Divi Supreme Pro On your site make sure that you've already downloaded the Divi Supreme Pro Plugin in your Computer. You can see this guide to see where to download the Divi Supreme Pro: https://docs.divisupreme.com/faqs/downloading-divi-supreme-products After downloading simply follow the steps below: ### Step 1. Install the Plugin To Install Divi Supreme Pro on your site. Go to your WordPress Dashboard -> Plugin -> Add New. ![Click on Add New.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/ZcFTMBcUnr/Click%20on%20Add%20New.png) Now click on "Upload Plugin" button on Top and then in the "Choose File" area choose the download Divi Supreme Pro .Zip file and then click on "Install Now" button. ![Upload the Plugin.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/gIiYGo1a7M/Upload%20the%20Plugin.png) So you've successfully installed the Plugin on your site. ### Step 2. Activate the Plugin After Installing the Plugin you can then Activate the Divi Supreme Pro to see all of its benefits/Features on your Divi Site. Simply click on "Activate" link to activate. ![activate the plugin.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/4uWRFxZ4Sc/activate%20the%20plugin.png) That's it, that's how easily you can Install the Divi Supreme Pro on your site. Let us know If you still face any issue by [Contacting Us](https://divisupreme.com/contact/).

Before you install the Divi Supreme Pro On your site make sure that you've already downloaded the Divi Supreme Pro Plugin in your Computer. You can see this guide to see where to download the Divi Supreme Pro: https://docs.divisupreme.com/faqs/downloading-divi-supreme-products After downloading simply follow the steps below: ### Step 1. Install the Plugin To Install Divi Supreme Pro on your site. Go to your WordPress Dashboard -> Plugin -> Add New. ![Click on Add New.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/ZcFTMBcUnr/Click%20on%20Add%20New.png) Now click on "Upload Plugin" button on Top and then in the "Choose File" area choose the download Divi Supreme Pro .Zip file and then click on "Install Now" button. ![Upload the Plugin.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/gIiYGo1a7M/Upload%20the%20Plugin.png) So you've successfully installed the Plugin on your site. ### Step 2. Activate the Plugin After Installing the Plugin you can then Activate the Divi Supreme Pro to see all of its benefits/Features on your Divi Site. Simply click on "Activate" link to activate. ![activate the plugin.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/4uWRFxZ4Sc/activate%20the%20plugin.png) That's it, that's how easily you can Install the Divi Supreme Pro on your site. Let us know If you still face any issue by [Contacting Us](https://divisupreme.com/contact/).

**Minimum Requirements** * WordPress 4.5 or greater * PHP version 7.0 or greater * MySQL version 5.0 or greater **We recommend your host supports** * PHP version 7.0 or greater * MySQL version 5.6 or greater * WP Memory limit of 64 MB or greater (128 MB or higher is preferred) Divi Supreme recommend and required the following: * Divi Theme >= version 4.1 * Extra Theme >= version 3.1 * Divi Builder >= version 3.1 * PHP version >= 7.0

**Minimum Requirements** * WordPress 4.5 or greater * PHP version 7.0 or greater * MySQL version 5.0 or greater **We recommend your host supports** * PHP version 7.0 or greater * MySQL version 5.6 or greater * WP Memory limit of 64 MB or greater (128 MB or higher is preferred) Divi Supreme recommend and required the following: * Divi Theme >= version 4.1 * Extra Theme >= version 3.1 * Divi Builder >= version 3.1 * PHP version >= 7.0

If you want to install one of our free provided Layout with every Module release in your Divi website then this article will help you out on how to import those Layouts to your site and use them. ### Step 1. Download the Layout First of all, you'll need to download the Layout from the Module Demo page. So for our example we'll download the Layout provided with Card Carousel Module. Simply go here to see all the Modules: https://divisupreme.com/features/ ![download layout.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/ER6ylTYocJ/download%20layout.png) ### Step 2. Import Layout in Divi Library Now you can move to your site's Dashboard -> Divi -> Divi Library and click on Import & Export button on the top. ![click on import button.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/ahMyWkjTUv/click%20on%20import%20button.png) Now you can click on Import Tab and choose the downloaded file in the "Choose File" option and then simply click on Import button to import the Layout to Divi Library ![import the layout to divi library.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/G4P5IRIRxi/import%20the%20layout%20to%20divi%20library.png) ### Step 3. Add that Layout to your Page So lastly, let's see how to implement that Layout to your page. For that you'll first need to open up the Divi Builder on your page and click on + Icon at the bottom and then you'll see a new window, click on Your Saved Layouts Tab and choose the recently Imported Layout. ![Add layout on your page.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/tCkgKpQLU7/Add%20layout%20on%20your%20page.png) And that's it that's how easily you can Import the layouts to your site that we provide you with Every Module.The same method goes for all the other Module Layouts. Hope this will help you out. Have a great day!

If you want to install one of our free provided Layout with every Module release in your Divi website then this article will help you out on how to import those Layouts to your site and use them. ### Step 1. Download the Layout First of all, you'll need to download the Layout from the Module Demo page. So for our example we'll download the Layout provided with Card Carousel Module. Simply go here to see all the Modules: https://divisupreme.com/features/ ![download layout.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/ER6ylTYocJ/download%20layout.png) ### Step 2. Import Layout in Divi Library Now you can move to your site's Dashboard -> Divi -> Divi Library and click on Import & Export button on the top. ![click on import button.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/ahMyWkjTUv/click%20on%20import%20button.png) Now you can click on Import Tab and choose the downloaded file in the "Choose File" option and then simply click on Import button to import the Layout to Divi Library ![import the layout to divi library.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/G4P5IRIRxi/import%20the%20layout%20to%20divi%20library.png) ### Step 3. Add that Layout to your Page So lastly, let's see how to implement that Layout to your page. For that you'll first need to open up the Divi Builder on your page and click on + Icon at the bottom and then you'll see a new window, click on Your Saved Layouts Tab and choose the recently Imported Layout. ![Add layout on your page.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/tCkgKpQLU7/Add%20layout%20on%20your%20page.png) And that's it that's how easily you can Import the layouts to your site that we provide you with Every Module.The same method goes for all the other Module Layouts. Hope this will help you out. Have a great day!

FAQs and documentation for Divi Supreme Products

Divi Popup Extension

Divi Easy Theme Builder Extension

License Key

Divi Lottie Module

Divi Library Shortcodes Extension

Divi Read More Extension

Divi Card Carousel Module

Divi Image Carousel Module

Divi Supreme Pro License

Divi Typing Effect Module

General Info - Divi Extensions

Divi Responsive Viewer Extension

Divi Image Hotspots Module

Divi Contact Form 7 Module

Divi Scheduled Element Extension

Divi Floating Multi Images Module

Enable SVG Upload in Divi

How to Install Divi Supreme Pro

Divi Supreme Requirement

How to Import Layouts

Divi Supreme

Need Help?