Question 1

How to Download Divi Supreme Pro

Accepted Answer

You can access the latest version of our products at any time provided you’re still in the license term by logging into [Divi Supreme account](https://divisupreme.com/login/).

![download.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/tfzgjdarOE/download.png)

Once logged in, navigate to downloads and you will see a section containing all of the available downloads for your account along with the details of your past orders:

These links will always point towards the latest version of the product.

If you have any troubles accessing your account, try [resetting your password](https://divisupreme.com/my-account/lost-password/), and if that fails please [contact us](https://divisupreme.com/contact/).

Question 2

How to Create Facebook APP ID

Accepted Answer

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

Question 3

Divi Card Carousel Module

Accepted Answer

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. **Equalize Card Heights** 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. **Disable Touch/Dragging** Use this option to disable touch/drag to slide the Carousel. **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 **Image Alignment** Change the alignment of the Image to Left, Center or Right. And you can 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.

Question 4

Divi Card Module

Accepted Answer

A creative Divi module to display a beautiful combination of texts, links, badge and image. With Image Hover Zoom animation, you can now impress your visitors even more.

# 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. **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. ## Icon If you want to add an Icon to the Card you can do so here. **Use Icon** Enable this switch to enable the Use of Icon for the Card Module. Once you'll enable this you'll see so many Icons to choose from. ## 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. # 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 this layout type you will be able to see these options: 1. **Width**: Change the width of the image 2.** 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). 3. **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 changes to the image here. **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 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 module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 5

General Info - Divi Extensions

Accepted Answer

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.
<img alt="Divi Supreme's Extensions.png" src="https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Bz6IBRbZ3i/Divi%20Supreme%27s%20Extensions.png" align="center">

Question 6

Divi Supreme Masonry Gallery Module

Accepted Answer

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.

**Use Zoom on Hover**

Enable this option to add a cool Zoom effect on Hover on each image in Gallery.

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

Question 7

Divi Shapes Module

Accepted Answer

Shapes are one of the most important elements in Design. So we’ve created this module to make your life easier. Shapes module adds life and creativity to your website. Boost your Divi designs, without having to use image files or custom code.

# Content Options

# Shapes **Type** Here you can change the type of shape from 16 different Shapes. Here are the shapes that you can choose: 1. Square 2. Circle 3. Rectangle 4. Oval 5. Trapezoid 6. Parallelogram 7. Diamond Square 8. Hexagon 9. 8 types of Blob **Size** Adjust the Size of the Shape here. # Design Options

## Shapes **Shape Color** Here you can define a custom color for your shape. **User Border** Enable this option if you want to add Border and Corner Radius to the shape. **Shapes Shadow** Here you can add a nice Drop Shadow to the shape. ## Changing the Position of the Shape Let’s See how we can change the position of the shape. We have three options: **Using Margins** Margin adds extra space to the outside of the shape, increasing the distance between the shape and other items on the page. **Using Transform Translate Options** Under Transform Option, you’ll find the Translate tab and using that you can easily move the Shape anywhere on the screen by moving the box you’ll see under the Translate tab. **Using Position Options** Position Options were added under the Advanced Tab. You can change the position type to Relative or Absolute and shape can be easily moved anywhere on the screen by sliding the controllers or entering your own value. # Shape Module Advanced Options Use the advanced options to give your Shape custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 8

How to show a Popup Globally

Accepted Answer

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!

Question 9

Divi Breadcrumbs Module

Accepted Answer

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.

Question 10

Enable SVG Upload in Divi

Accepted Answer

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. SVG Uploads option in Divi.png

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. SVG Uploads in Divi.png

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.

Question 11

SCRIPT_DEBUG and et_load_unminified_scripts issue

Accepted Answer

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!

Question 12

Divi Supreme Requirement

Accepted Answer

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

Question 13

Internal Error 500 or WordPress Memory Exhausted Error

Accepted Answer

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.

Question 14

Before and After Image Module images are not loading correctly

Accepted Answer

LazyLoad have compatibility issue with most plugin out there especially when:

•Grid layouts that use fixed positioning/fixed widths

•e.g. some implementations of Isotope or Masonry

•JavaScripxs that try to calculate spaces based on image size

•Internet Explorer

•LazyLoad is not supported for IE8 and below

•Certain background images

•Depending on how they are added, not all background images can be LazyLoaded.

### If you're using WP Rocket plugin lazyload, here's the filter function to disable.

Copy and paste this function into your child theme function.php
```
function dsm_rocket_lazyload_exclude_class( $attributes ) {
		$attributes[] = 'class="dsm-before-after-image-slider-before"';
		$attributes[] = 'class="dsm-before-after-image-slider-after"';

return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'dsm_rocket_lazyload_exclude_class' );
```

### If you're using JetPack plugin lazyload, here's the filter function to disable.

Copy and paste this function into your child theme function.php
```
function dsm_exclude_image_class_from_lazy_load( $classes ) {
    $classes[] = 'dsm-before-after-image-slider-before';
    $classes[] = 'dsm-before-after-image-slider-after';
    return $classes;
}
add_filter( 'jetpack_lazy_images_blacklisted_classes', 'dsm_exclude_image_class_from_lazy_load', 999, 1 );
```

Question 15

Divi Supreme Pro Plugin Update

Accepted Answer

# Updating Plugin
<img alt="auto-update.png" src="https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/WYPQbzUo2T/auto-update.png" align="center">
If you activate your license key, you will receive an auto update via your WordPress. You can also FTP to your Divi Supreme folder and replace the previous files with new files you extracted on your remote server. For those do not have auto update via WordPress, either you did not activate your license or your license has expired.

Question 16

Divi Facebook Feed Module

Accepted Answer

Add Your Facebook Page Feed easily without having to embed them again.

# Content Options

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

### Step 3: Give it a name, like “Divi Supreme” and click Create App ID:

### Step 4: Navigate to Settings > Basic

Fill up the forms required such as Domain(Make sure it’s your domain), Privacy Policy URL, Terms of Service URL and etc. Then Click Save Changes ### Step 5: Obtain Facebook APP ID

Before copying the APP ID, make sure you also change the status to LIVE. That’s all!

Question 17

Divi Image Text Reveal Module

Accepted Answer

When you hover over the image, you will see the an overlay slide from the left to hide the image with the revealing text and when you move the move away from the image, the image slide out of view to the right. There are plenty of animation for the revealing text too!

# Content Options

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

Question 18

Divi Price List Module

Accepted Answer

Create an attractive and stunning Price List for your business with easy options. Perfect for menus, catalogs, product lists and any other list of featured items.

[See the Demo page](https://divisupreme.com/features/price-list-module/) for more Design of Price lists.

# Content Options
**Adding Price List**

Click on + Add new Item to add your first Price List. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Price List.

See below for individual Price List Item settings.

After you add your first Price List, you will see a gray bar appear with the title of your Price List shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Price List.

# Design Options
## Text
**Vertical Alignment**

This setting determines the vertical alignment of your Price List Text. Your content can either be aligned to the top, vertically centered, or aligned to the bottom.

**Text Shadow**

Here add nice shadow to the Pirce list text.

## Title Text
Change the title text font, color, size, weight and more of the Price List item.

## Description Text
Change the Description text font, color, size, weight and more of the Price List item.

## Price Text
**Background Color**

Define a custom background color for the price text.

**Padding**

Add some padding around the Price text.

And else you can change the price text font, color, size and weight and more.

**Price Text Rounded Corners, Border and Box Shadow**

Here you can control the corner radius of the Price Text. Enable the link icon to control all four corners at once, or disable to define custom values for each. You can play around with adding borders and Box Shadow to the Price text.

## Image
**Image Width**

Adjust the width of the image by sliding the slider or enter your own value to change the size of the image.

**Image Gap Spacing**

Add some spacing between Image and Texts.

**Image Rounded Corners, Border and Box Shadow**

Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. You can play around with adding borders and Box Shadow to the Image

## Separator
**Style**

Change the style of the line between Title text and Price text from 8 different styles.

**Weight**

Change the weight of the Line here.

**Color**

Change the color of the separator line to your own one.

**Gap Spacing**

Change the spacing of the line between Price text and Title text.

## Sizing
**Item Bottom Spacing**

Add some bottom spacing between other Price list items.

# Advanced Options
Use the advanced options to give your Price List module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

# Price List Item Content Options
## Text
**Price**

Add your Pricing here.

**Title**

Add your title here.

**Content**

Put in your description text here.

# Image
Add your image to here add in your price list item.

# Price List Item Design Options
## Image
**Image Width**

Adjust the width of the image by sliding the slider or enter your own value to change the size of the image.

**Image Gap Spacing**

Add some spacing between Image and Texts.

**Image Rounded Corners, Border and Box Shadow**

Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. You can play around with adding borders and Box Shadow to the Image

# Price List Item Advanced Options
Use the advanced options to give your Price List Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 19

License Key Activation Issue

Accepted Answer

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.

Question 20

Divi Text Divider Module

Accepted Answer

Create an organized and beautiful to read headlines with Supreme Text Divider Module. With many border styles to choose from. You can also put a text in-between the Dividers or align them to suit your design.

# Content Options **Divider Text** This field is where you can enter the content of your text. Text content spans the full width of the column that it is in. ## Background **Background Color** Here you can choose a background color for your module. **Background Image** Here you can choose a background image for your module. ## Admin Label By default, your Supreme Text Divider text module will appear with a label that reads ‘Supreme Text Divider in the builder. The Admin Label allows you to change this label for easy identification. # 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.

## Color You can choose your desired color from the color picker for the divider color. This will be apply a color to the divider only. ## Styles Here’s where you can style the divider appearance. **Divider Style** Here you can choose your divider style such as solid, dotted, dashed and etc. **Divider Position** This controls the vertical alignment of the Text Divider. ## Text **Text Alignment** This controls the text alignment of the Text Divider. ## Divider Text You can change the Heading level of the Divider text here. And then you can style it the same way you style text in Divi. ## Sizing Here’s where you can style the Text Divider appearance. **Divider Weight** You can input a custom weight for the Divider which also refers to the thickness of the line. **Text Gap** The Gap space between the main text and the divider. **Height** Define how much vertical space you would like your text divider module to create (in pixels). # 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

Need Help?