If you want to show a Popup Globally on your site then you must follow this guide. We'll see how to show the Popup you've created Globally on your site. It could be a Sale Notice Popup, Important Notice or anything. We can use the Divi's Theme Builder to show the Popup globally. Just Edit your Global Header or Footer as both shows on your whole site so will the Popup. Let's Edit the Global Footer. ![edit global footer.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/H2QYdA9iZJ/edit%20global%20footer.png) Now you can open up any Module settings to set up the Popup. If you don't know how to set up a Popup here's a complete guide on our Popup Extension: [https://divisupreme.com/blog/how-to-create-popups-using-divi-popup-extension/](https://divisupreme.com/blog/how-to-create-popups-using-divi-popup-extension/) Once you've opened the Module settings, you can go to Advanced tab -> Visibility -> Use Popup and set up the Popup the way you like. ![setup your popup.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/4bNxin20sK/setup%20your%20popup.png) Once you're done setting up the Popup, all you need to do now is Save the Changes and now you'll be able to see your Popup on Every Page/Post of your site. Hope you'll found it useful, Let us know If you need any help. Have a great day!

If you want to show a Popup Globally on your site then you must follow this guide. We'll see how to show the Popup you've created Globally on your site. It could be a Sale Notice Popup, Important Notice or anything. We can use the Divi's Theme Builder to show the Popup globally. Just Edit your Global Header or Footer as both shows on your whole site so will the Popup. Let's Edit the Global Footer. ![edit global footer.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/H2QYdA9iZJ/edit%20global%20footer.png) Now you can open up any Module settings to set up the Popup. If you don't know how to set up a Popup here's a complete guide on our Popup Extension: [https://divisupreme.com/blog/how-to-create-popups-using-divi-popup-extension/](https://divisupreme.com/blog/how-to-create-popups-using-divi-popup-extension/) Once you've opened the Module settings, you can go to Advanced tab -> Visibility -> Use Popup and set up the Popup the way you like. ![setup your popup.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/4bNxin20sK/setup%20your%20popup.png) Once you're done setting up the Popup, all you need to do now is Save the Changes and now you'll be able to see your Popup on Every Page/Post of your site. Hope you'll found it useful, Let us know If you need any help. Have a great day!

Display a hierarchical representation of navigation links and make your site’s navigation easier to follow, add breadcrumbs to your site to improve the user’s experience, and yeah It's good for SEO too. ![dsm-breadcrumbs-demo.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/S2ifBw5hVv/dsm-breadcrumbs-demo.png) # Content Options ![dsm-breadcrumbs-content-option.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/kAzqTvHJT7/dsm-breadcrumbs-content-option.png) ### BreadCrumbs **Show Custom Home** Enable this option If you want to show a Custom Text for the Home Link. **Show Home Icon** Enable this option If you want to show an Icon along with the Text of Home link. You'll see an Icon Picker where you can choose any icon from Divi Icon Library for your Home Link. **Custom Separator Icon** Enable this option If you want to set a Custom Icon for the Separator. You'll see an Icon Picker where you can choose any icon from Divi Icon Library for your Separator. # Design Options ### Alignment Here you can change the Alignment of the Breadcrumbs, enable the responsive option to set a different alignment for Mobile Devices. ### Items Here you can design the Items/Links in the Breadcrumbs, you can add Background Color, Padding, Border Radius, Box Shadow and more. **Item Background Color** Here you can define a custom Color for the Links/Items in the Breadcrumb. **Bottome Gap** Add a gap between Breadcrumbs Items/Links if the structure of the Breadcrumbs is longer than the space given to it. **Items Padding** Set a padding around the Item/Link from here, useful If you've added a Background color to the Item. You can design the Item/Link color, font size and more. **Rounded Corners and Borders** Add Rounded Corners or Borders to the Item/Link here. **Box Shadow** Set a custom Shadow to show for the Links/Items in the Breadcrumbs. Enable Hover option to show shadow on Hover. ### Home Icon Here you'll be able to design the Home Icon If you've enabled it. **Icon Color** Here you can change the Color of the Home Icon. If you've enabled the option (Show Home Icon) in the Content tab. **Icon Size** Here can define a custom size for the Home Icon. ### Separators Here you'll be able to design the Separator in the Breadcrumbs. **Separators Background Color** Here you can define a custom Color for the Separator in the Breadcrumb. **Bottome Gap** Add a gap to Separator if you feel there is a need of it. **Items Padding** Set a padding around the Separator from here, useful If you've added a Background color to the Separator. You can design the Item/Link color, font size and more. **Rounded Corners and Borders** Add Rounded Corners or Borders to the Separator here. **Box Shadow** Set a custom Shadow to show for the Separators in the Breadcrumbs. ### Current Here you'll be able to set custom design values for the Current Item in the breadcrumbs. **Item Background Color** Here you can define a custom Color for the Current Links/Items in the Breadcrumb. **Bottome Gap** Add a gap between Breadcrumbs Current Items/Links if the structure of the Breadcrumbs is longer than the space given to it. **Items Padding** Set a padding around the Current Item/Link from here, useful If you've added a Background color to the Item. You can also design the Current Item/Link color, font size and more. **Rounded Corners and Borders** Add Rounded Corners or Borders to the Current Item/Link here. **Box Shadow** Set a custom Shadow to show for the Current Links/Items in the Breadcrumbs. Enable Hover option to show shadow on Hover. # Advanced Options Use the advanced options to give your Breadcrumbs module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Display a hierarchical representation of navigation links and make your site’s navigation easier to follow, add breadcrumbs to your site to improve the user’s experience, and yeah It's good for SEO too. ![dsm-breadcrumbs-demo.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/S2ifBw5hVv/dsm-breadcrumbs-demo.png) # Content Options ![dsm-breadcrumbs-content-option.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/kAzqTvHJT7/dsm-breadcrumbs-content-option.png) ### BreadCrumbs **Show Custom Home** Enable this option If you want to show a Custom Text for the Home Link. **Show Home Icon** Enable this option If you want to show an Icon along with the Text of Home link. You'll see an Icon Picker where you can choose any icon from Divi Icon Library for your Home Link. **Custom Separator Icon** Enable this option If you want to set a Custom Icon for the Separator. You'll see an Icon Picker where you can choose any icon from Divi Icon Library for your Separator. # Design Options ### Alignment Here you can change the Alignment of the Breadcrumbs, enable the responsive option to set a different alignment for Mobile Devices. ### Items Here you can design the Items/Links in the Breadcrumbs, you can add Background Color, Padding, Border Radius, Box Shadow and more. **Item Background Color** Here you can define a custom Color for the Links/Items in the Breadcrumb. **Bottome Gap** Add a gap between Breadcrumbs Items/Links if the structure of the Breadcrumbs is longer than the space given to it. **Items Padding** Set a padding around the Item/Link from here, useful If you've added a Background color to the Item. You can design the Item/Link color, font size and more. **Rounded Corners and Borders** Add Rounded Corners or Borders to the Item/Link here. **Box Shadow** Set a custom Shadow to show for the Links/Items in the Breadcrumbs. Enable Hover option to show shadow on Hover. ### Home Icon Here you'll be able to design the Home Icon If you've enabled it. **Icon Color** Here you can change the Color of the Home Icon. If you've enabled the option (Show Home Icon) in the Content tab. **Icon Size** Here can define a custom size for the Home Icon. ### Separators Here you'll be able to design the Separator in the Breadcrumbs. **Separators Background Color** Here you can define a custom Color for the Separator in the Breadcrumb. **Bottome Gap** Add a gap to Separator if you feel there is a need of it. **Items Padding** Set a padding around the Separator from here, useful If you've added a Background color to the Separator. You can design the Item/Link color, font size and more. **Rounded Corners and Borders** Add Rounded Corners or Borders to the Separator here. **Box Shadow** Set a custom Shadow to show for the Separators in the Breadcrumbs. ### Current Here you'll be able to set custom design values for the Current Item in the breadcrumbs. **Item Background Color** Here you can define a custom Color for the Current Links/Items in the Breadcrumb. **Bottome Gap** Add a gap between Breadcrumbs Current Items/Links if the structure of the Breadcrumbs is longer than the space given to it. **Items Padding** Set a padding around the Current Item/Link from here, useful If you've added a Background color to the Item. You can also design the Current Item/Link color, font size and more. **Rounded Corners and Borders** Add Rounded Corners or Borders to the Current Item/Link here. **Box Shadow** Set a custom Shadow to show for the Current Links/Items in the Breadcrumbs. Enable Hover option to show shadow on Hover. # Advanced Options Use the advanced options to give your Breadcrumbs module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

When your WordPress code requires more memory than the default allocated memory, you get to see this error such as `Internal Error 500` or `Allowed memory size of … bytes exhausted (tried to allocate … bytes) in /… on line …` By default, WordPress automatically tries to increase PHP memory limit if it is less than 64MB. However, 64MB is often not high enough. ### Increase PHP Memory Limit in WordPress First you need to edit the wp-config.php file on your WordPress site. It is located in your WordPress site’s root folder, and you will need to use an FTP client or file manager in your web hosting control panel. Next, you need to paste this code in wp-config.php file just before the line that says ‘That’s all, stop editing! Happy blogging.’ `define('WP_MEMORY_LIMIT', '256M');` > WP_MEMORY_LIMIT increases the default memory for front-end and back-end operations. `define( 'WP_MAX_MEMORY_LIMIT', '256M' );` > This way you don’t allocate too much memory to frontend operations that could end up affecting performance This should solve the issue you're having. Remember, this can happen to any themes or plugin out there. It also depends on your hosting.

When your WordPress code requires more memory than the default allocated memory, you get to see this error such as `Internal Error 500` or `Allowed memory size of … bytes exhausted (tried to allocate … bytes) in /… on line …` By default, WordPress automatically tries to increase PHP memory limit if it is less than 64MB. However, 64MB is often not high enough. ### Increase PHP Memory Limit in WordPress First you need to edit the wp-config.php file on your WordPress site. It is located in your WordPress site’s root folder, and you will need to use an FTP client or file manager in your web hosting control panel. Next, you need to paste this code in wp-config.php file just before the line that says ‘That’s all, stop editing! Happy blogging.’ `define('WP_MEMORY_LIMIT', '256M');` > WP_MEMORY_LIMIT increases the default memory for front-end and back-end operations. `define( 'WP_MAX_MEMORY_LIMIT', '256M' );` > This way you don’t allocate too much memory to frontend operations that could end up affecting performance This should solve the issue you're having. Remember, this can happen to any themes or plugin out there. It also depends on your hosting.

With Divi Supreme’s Masonry Gallery Module you can easily showcase your Images in an interesting way. Showcase your Portfolio in style whether you’re Web Designer, Photographer, etc this Module is made for you. ![DSM Masonry Gallery Module - Demo Image.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/g4JYU85yxa/DSM%20Masonry%20Gallery%20Module%20-%20Demo%20Image.png) ## Content Options ![dsm-masonry-gallery-content-options.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/NO90dSfCVX/dsm-masonry-gallery-content-options.png) **Gallery** Add Images from Media Library to show in the Gallery. ### Settings **Use Overlay** This will enable the Overlay on each image Hover and will use the "Title" and "Description" option from Media Library. You'll need to add Title and Description to each image in Media Library to show the Overlay. **Use Lightbox** Enable this option If you want to open each Image in Lightbox/Popup and then you'll be able to switch the Image by clicking on Arrows in the Lightbox. **Use Horizontal Order** Enable this option if you want to change the Images to Horizontal Order. ## Design Options ### Grid Layout Here you'll be able to style the Images in the Gallery. **Columns** Here you can change the number columns you want to show for the Masonry Images. You can enable the Responsive Option to set column number for Mobile Devices. **Columns Gaps** Increase or decrease the Value to change the Column Gap. ### Grid Items **Grid Item Rounded Corners and Border** Here you can add Rounded Corners and Border to each Image in the Gallery. **Grid Item Box Shadow** Set a custom Box shadow for each Image in the Gallery. ### Overlay You can Design the Overlay text here. **Show Image Overlay Title** Disable this option If you don't want to show the Image Overlay Title. **Show Image Overlay Description** Same goes here, disable it If you don't want to show Overlay Description. **Overlay Color** You can change the color of the Overlay here. And further you can style the Title/Description text, You can change Font, Size, Weight and much more of Title and Description text. ### How to change the Overlay's title and description? You can edit the image title and description via the WordPress Media Library. Simply just put in your custom Title and Description text into the input field. This will shows up in the Overlay. #### You can also set a custom URL to each image by inserting a custom URL in the "LINK URL" input field under "Divi Supreme Modules Only". ![divi_masonry_overlay_title_description.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/GANWoVT70t/divi_masonry_overlay_title_description.png) ## Advanced Options Use the advanced options to give your Masonry Gallery custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

With Divi Supreme’s Masonry Gallery Module you can easily showcase your Images in an interesting way. Showcase your Portfolio in style whether you’re Web Designer, Photographer, etc this Module is made for you. ![DSM Masonry Gallery Module - Demo Image.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/g4JYU85yxa/DSM%20Masonry%20Gallery%20Module%20-%20Demo%20Image.png) ## Content Options ![dsm-masonry-gallery-content-options.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/NO90dSfCVX/dsm-masonry-gallery-content-options.png) **Gallery** Add Images from Media Library to show in the Gallery. ### Settings **Use Overlay** This will enable the Overlay on each image Hover and will use the "Title" and "Description" option from Media Library. You'll need to add Title and Description to each image in Media Library to show the Overlay. **Use Lightbox** Enable this option If you want to open each Image in Lightbox/Popup and then you'll be able to switch the Image by clicking on Arrows in the Lightbox. **Use Horizontal Order** Enable this option if you want to change the Images to Horizontal Order. ## Design Options ### Grid Layout Here you'll be able to style the Images in the Gallery. **Columns** Here you can change the number columns you want to show for the Masonry Images. You can enable the Responsive Option to set column number for Mobile Devices. **Columns Gaps** Increase or decrease the Value to change the Column Gap. ### Grid Items **Grid Item Rounded Corners and Border** Here you can add Rounded Corners and Border to each Image in the Gallery. **Grid Item Box Shadow** Set a custom Box shadow for each Image in the Gallery. ### Overlay You can Design the Overlay text here. **Show Image Overlay Title** Disable this option If you don't want to show the Image Overlay Title. **Show Image Overlay Description** Same goes here, disable it If you don't want to show Overlay Description. **Overlay Color** You can change the color of the Overlay here. And further you can style the Title/Description text, You can change Font, Size, Weight and much more of Title and Description text. ### How to change the Overlay's title and description? You can edit the image title and description via the WordPress Media Library. Simply just put in your custom Title and Description text into the input field. This will shows up in the Overlay. #### You can also set a custom URL to each image by inserting a custom URL in the "LINK URL" input field under "Divi Supreme Modules Only". ![divi_masonry_overlay_title_description.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/GANWoVT70t/divi_masonry_overlay_title_description.png) ## Advanced Options Use the advanced options to give your Masonry Gallery custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

If you're getting this error Notice after Installing Divi Supreme than this guide will help you to solve this issue. This is a bug in Divi and we're hoping that it will be solved very soon. > Error Message: Divi uses uncombined and unminified javascript files because "SCRIPT_DEBUG" constant on wp-config.php has been set to "true". Other plugin can enforce Divi to use uncombined and unminified javascript files by filtering "et_load_unminified_scripts" filter as well. To Solve: 1. Deactivate Divi Supreme Plugin, If you've installed both Pro/Free than deactivate both. 2. Go to Divi -> Theme Options -> and Turn On "Minify And Combine Javascript Files" and Save the Changes. 3. Now Reactivate Divi Supreme Pro/Lite and you'll not face this issue. Have a great day!

If you're getting this error Notice after Installing Divi Supreme than this guide will help you to solve this issue. This is a bug in Divi and we're hoping that it will be solved very soon. > Error Message: Divi uses uncombined and unminified javascript files because "SCRIPT_DEBUG" constant on wp-config.php has been set to "true". Other plugin can enforce Divi to use uncombined and unminified javascript files by filtering "et_load_unminified_scripts" filter as well. To Solve: 1. Deactivate Divi Supreme Plugin, If you've installed both Pro/Free than deactivate both. 2. Go to Divi -> Theme Options -> and Turn On "Minify And Combine Javascript Files" and Save the Changes. 3. Now Reactivate Divi Supreme Pro/Lite and you'll not face this issue. Have a great day!

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

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

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

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!

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

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

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

This happens when you move to a new hosting or deleted the Plugin without deactivating License. To solve this, simply login to your Divi Supreme Account > Orders > License Manage and deactivate that domain you're having problem with currently. Then go to your WordPress Admin Dashboard -> Divi Supreme -> License and activate the license again. That's it. Good luck.

This happens when you move to a new hosting or deleted the Plugin without deactivating License. To solve this, simply login to your Divi Supreme Account > Orders > License Manage and deactivate that domain you're having problem with currently. Then go to your WordPress Admin Dashboard -> Divi Supreme -> License and activate the license again. That's it. Good luck.

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.

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

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

## Setup Facebook App ID You will need your own Facebook account in order to create the Facebook App ID so ensure that you have created a free account by going to [Facebook](http://www.facebook.com) first before starting this guide. ### Step 1: Login to Facebook and go to developers site Ensure you are logged into your Facebook account and go http://www.facebook.com/developers ### Step 2: Create Facebook Application To create your App ID, [head to the Facebook Developers site](https://developers.facebook.com/apps/). As long as you’re logged into your regular Facebook account, you should see the button to Add a New App. ### Step 3: Give it a name, like “Divi Supreme” and click Create App ID: ### Step 4: Navigate to Settings -> Basic Fill up the forms required such as Domain(Make sure it’s your domain), Privacy Policy URL, Terms of Service URL and etc. Then Click Save Changes ### Step 4: Obtain Facebook APP ID Before copying the APP ID, make sure you also change the status to LIVE. That’s all!

## Setup Facebook App ID You will need your own Facebook account in order to create the Facebook App ID so ensure that you have created a free account by going to [Facebook](http://www.facebook.com) first before starting this guide. ### Step 1: Login to Facebook and go to developers site Ensure you are logged into your Facebook account and go http://www.facebook.com/developers ### Step 2: Create Facebook Application To create your App ID, [head to the Facebook Developers site](https://developers.facebook.com/apps/). As long as you’re logged into your regular Facebook account, you should see the button to Add a New App. ### Step 3: Give it a name, like “Divi Supreme” and click Create App ID: ### Step 4: Navigate to Settings -> Basic Fill up the forms required such as Domain(Make sure it’s your domain), Privacy Policy URL, Terms of Service URL and etc. Then Click Save Changes ### Step 4: Obtain Facebook APP ID Before copying the APP ID, make sure you also change the status to LIVE. That’s all!

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

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

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.

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.

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

FAQs and documentation for Divi Supreme Products

How to show a Popup Globally

Divi Breadcrumbs Module

Internal Error 500 or WordPress Memory Exhausted Error

Divi Supreme Masonry Gallery Module

SCRIPT_DEBUG and et_load_unminified_scripts issue

How to Install Divi Supreme Pro

How to translate Divi Supreme Plugin

How to Import Layouts

Divi Supreme Requirement

Divi Text Notation Module

License Key Activation Issue

Enable SVG Upload in Divi

Where to Put Facebook APP ID

How to Create Facebook APP ID

Divi Library Shortcodes Extension

Divi Read More Extension

Divi Responsive Viewer Extension

Divi Easy Theme Builder Extension

Divi Scheduled Element Extension

Divi Popup Extension