Question 1

Divi Supreme Pro License

Accepted Answer

License

Q: Divi Supreme Pro License

License Important: If you've purchased from Divi Marketplace, you don't need an account on our site because you'll get updates automatically without adding a License key. The Divi Marketplace plugins are linked to your ElegantThemes account. That's the only difference between our version and the Marketplace version and the 30% off renewal through our website.> Getting License Key You can obtain your license key by logging in to Your Account -> Orders -> License Manager. You will also receive an email regarding the license key for your Divi Supreme Pro. License Activation Right after activating the plugin, you will see a notification “Divi Supreme Pro: Please enter your license key to get regular update”. The license activation is only required to receive automatic updates. https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Zq7ywr54C0/license-activate-1536x740.png (license-activate-1536x740.png) Deactivate License You can either login to Your Account -> Orders -> License Manager and deactivate from there or simply just login to your WordPress site and from the admin menu, navigate to Divi Supreme Pro -> License. Check License Key Expiry Login to Your Account -> Orders -> License Manager and from there you will able to see your license expiry date. Renew License Key Login to Your Account -> Orders -> License Manager/View and from there you will able to see a renew button.

Q: PCLZIP_ERR_BAD_FORMAT (-10) - Error Message Solution

The PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature error is usually displayed by WordPress as a result of one of three things: There's an issue with the zip file you're uploading WordPress doesn't have enough memory on the web server to unzip and upload the contents of the zip file or even your hosting Server Disk Space Issue(To confirm this, try to upload other files to your sites, such as an image, video or other Plugin. If you're not able to upload large files, then storage space is likely the issue). An error being thrown by a plugin or script on your site We can exclude out No.1 and No.3. You might want to try to install the zip manually, then it may mean that there's not enough storage space on your host for WordPress to be able to unzip and upload the contents of the file. We suggest talking to your hosting support to see what they can do about the space that needed to unzip.

Important: If you've purchased from Divi Marketplace, you don't need an account on our site because you'll get updates automatically without adding a License key. The Divi Marketplace plugins are linked to your ElegantThemes account. That's the only difference between our version and the Marketplace version and the 30% off renewal through our website.>

Getting License Key

You can obtain your license key by logging in to Your Account -> Orders -> License Manager. You will also receive an email regarding the license key for your Divi Supreme Pro.

License Activation

Right after activating the plugin, you will see a notification “Divi Supreme Pro: Please enter your license key to get regular update”. The license activation is only required to receive automatic updates.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Zq7ywr54C0/license-activate-1536x740.png (license-activate-1536x740.png)

Deactivate License

You can either login to Your Account -> Orders -> License Manager and deactivate from there or simply just login to your WordPress site and from the admin menu, navigate to Divi Supreme Pro -> License.

Check License Key Expiry

Login to YourAccount -> Orders -> License Manager and from there you will able to see your license expiry date.

Renew License Key

Login to Your Account -> Orders -> License Manager/View and from there you will able to see a renew button.

Question 2

Supreme Progress Bar Module

Accepted Answer

If you’re looking for a way to add a little extra flair to your Divi site, then look no further than the Supreme Progress Bar Module. This nifty little module allows you to add a sleek and stylish reading progress bar to your pages, Not only does it look great, but it’s completely Customizable, helping your readers keep track of their progress as they read through your content.

Content Options

General

Tracker Type

Here you can select the Tracker Type, you can either select "Horizontal" or "Circular".

Progress Relative To

Here you can select the Relative to for Progress Bar. You can choose from:

Entire Page - Progress Bar will be relative to Entire Page.
Selector - You can add a class here for a Module/Row/Section (That Module/Row/Section must contain the class added here) and enter the class. Then the Progress Bar will be relative to that Module/Row/Section and will start when that Module/Row/Section comes in viewport and will reach 100% when that Module/Row/Section goes out of Viewport.

Direction

Here you can change the Direction of the Progress, you can change to "Left" or "Right".

Percentage

Enable this option If you'd like to show Percentage in Progress Bar.

Size

If you select "Circular" type, then here you can change the size of the Circle.

Design Options

Progress Indicator

For Horizontal Type

Background

Here you can change the Background/Progress Bar Color, you can even create Gradient If you like.

For Circular Type

Width

You can control the width of the Circular Type Tracker here.

Color

Here you can change the color of the Tracker.

Else you can customize the Progress Indicator by adding Border, Border Radius & Box Shadow etc.

Tracker

For Horizontal type

Background

Change the Background of the Tracker here.

Height

Here you can control the Height of the Progress Bar.

For Circular type

Width

You can control the width of the Circular Type Tracker here.

Color

Here you can change the color of the Tracker.

Else you can customize the Tracker by adding Border, Border Radius & Box Shadow etc.

Percentage Text

Here you can customize the Percentage Text font, size, color and weight etc.

Advanced Options

Use the advanced options to give your Progress Bar module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.

Question 3

Divi Social Share Buttons Module

Accepted Answer

The Divi Supreme Social Share Buttons Module provides an easy way to add Social Media Sharing Icons to your Divi website. The module includes a variety of Social icons and allows you to customize the look and feel of these icons. You can also choose where to place the icons on your page within the Divi Builder.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/7FIwmaimLv/2022-07-14%20at%2022.05.27.png (2022-07-14 at 22.05.27)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/vBzdxEkiUf/2022-06-25-at-20.49.00.png (2022-06-25-at-20.49.00)

Adding Social Share Icons

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

See below for individual Social Share Item settings.

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

General

View

Here you can change the View of the Social Share Items, you can choose:

Icon & Text
Icon Only
Text only

Skin

Here you can choose the Skin type for Social Share Items, you can choose from below options:

Gradient
Minimal
Framed
Boxed Icon
Flat

Shape

You can change the Shape of the Social Share Items from here, you can choose:

Square
Rounded
Circle

Columns

Here you can change the column structure of the Social Share Items, you can change it to "Auto" which will automatically do it for you or you can select customer numbers of Column from 1 to 6.

Alignment

Change the Alignment of the Items here.

Target URL

You can change the Target URL of the Social Share Items to "Current" or "Custom". If you plan to use "Custom", you'll see a new field to add the custom URL.

Hover Animation

Here you can add a Hover Animation of the Social Share Items.

Design Options

Share Button

Columns Gap

Here you can change the Column gap between the Social Share Items.

Row Gap

Here you can change the Row gap between the Social Share Items.

Button Size

Change the Button Size here.

Icon Size

This is where you can change the Icon Size.

Button Height

Here you can change the Button Height

Color

You can use Official Color or select "Custom" option to use Custom Colors for all the Social Share Items.

Label

Here you can play with the Label by changing its font, size, color and weight and even add shadow to the text.

Advanced Options

Use the advanced options to give your Social Share Buttons module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Social Share Item Content Options

General

Network

Change the Network here you can select from below available Networks:

Facebook
Twitter
Linkedin
Pinterest
Reddit
Vk
Tumblr
Digg
Skype
Stumbleupon
Mix
Telegram
Pocket
Xing
WhatsApp
Email
Print

Custom Label

If you want to use a Custom Label for this Social Share Item, you can do so here.

Social Share Item Design Options

Social Button

Here you can set a Custom Color for this Social Share Item, you can set a different color for each item.

List Item Advanced Options

Use the advanced options to give your Social Share Item 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 Popup Extension

Accepted Answer

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.
By ID: Select this Trigger Type to open the Popup from any element click If It has that ID.
By Class: Select this Trigger Type to open the Popup from any element click If It has that Class.
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/Helpful Links for you to get started with Divi Popup Extension:

How to create Popups using Divi Popup Extension - Complete look at all the Features

How to Create Beautiful Popup with Divi Supreme - A simple popup + Free Layout

10 Beautiful Popup Layouts to Get Started with Our Popup Extension

How to Open Popup from Menu Item Click

So we've been getting a lot of requests on this from Customers to open the Popup from the Menu Item. So Finally, there's a way to Open It from any Menu Item you wish.

Step 1: Go to Divi -> Theme Builder -> Edit Global Footer and here add an empty Text Module.

Step 2: Then Set up your Popup in this Module the way you wish. And make sure to change the Trigger type to "By Class" and then enter the class "open-popup" (You can add any class here).

Step 3: Now go to Appearance -> Menus and here click the "Screen Option" at the top and check the "CSS Classes" option.

Step 4: Now add that class to any Menu Item you wish to Open the Popup from.

Video Walkthrough:

Question 5

Using Dynamic Assets with Divi Supreme.

Accepted Answer

⚡ Dynamic Assets Now available in Divi Supreme Pro version 4.8! This eliminates all file bloat and greatly improves load times. Divi Supreme is now more clean, lean and bloat-free.

All supreme modules and extensions CSS are broken up into individual files. Only load CSS/JS files when they are needed on the page on all Supreme Modules and Extension. Unused CSS is never loaded. Same goes to JavaScript assets.

No-one cares about your Divi sites like Divi Supreme do.

How To Enable Dynamic Assets

To enable Dynamic Assets, Navigate to Divi Supreme Settings Page -> Misc Tab -> Enable Dynamic Assets.

You need to clear "Static CSS File Generation" under Divi -> Theme Options -> Builder -> Advanced Tab. Re-saving page might be required where the Divi Supreme Modules and Extension are being used if it does not work.

You also need to Enable "Dynamic CSS" under Divi -> Theme Options -> Performance.

Video Walkthrough

Question 6

Divi Custom Attributes

Accepted Answer

What are HTML Attributes

You need HTML attributes to store various information associated with different pages elements, this information might not be essential for readers, but many JavaScript libraries and bots depends on it to run correctly. Many of them allow you to tweak their behavior by defining custom data attributes with given values.

You'll learn more on how to use these Attributes here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Now you can easily add Custom HTML Attributes in Divi with Divi Supreme's Custom Attributes Extension. With Custom Attributes extension, you can add attributes to the Wrapper of the Section/Row/Column/Module or Button.

Before Using

To use the Divi Supreme Custom Attributes Extension, you must first enable it from Divi Supreme Settings.

How to use Custom Attributes

You can find the Custom Attributes Settings by going in Settings Modal -> Advanced Tab -> Custom Attributes.

Go to any Section/Row/Column/Module settings -> Advanced tab -> Custom Attributes and enable "Use Custom Attributes".
Then you can choose whether you'd like to add the Attribute to the Wrapper or a Button in that Wrapper.
Then you can add a Title/Label to your Attribute and click the check-mark to enable the Attribute.
To add your attribute click the "Link" Icon.
Now, you'll see a Popup where you can add your Attribute Name and Value.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/k7cer8P636/2021-12-20%20at%2017.51.45.png (2021-12-20 at 17.51.45.png)

This is how the Attribute should look like on Frontend.

And that's it, if you want to add more Attributes, simply click the + Icon and you'll be able to add as many Attributes as you wish.

You'll learn more about Attributes References here: https://www.tutorialspoint.com/html5/html5_attributes.htm

Question 7

Divi Icon List Module

Accepted Answer

Icon List module is like the Divi Blurb Module but more enhanced and well-aligned. If you want to create a list with icons then this module is helpful.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/einuPIZNLD/icon-list-content-options.png (icon-list-content-options.png)

Adding Icon List

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

See below for individual Icon List Item settings.

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

Design Options

Text

Text Indent

Here you can add padding between the text and icon.

And you can play with the text by changing its font, size, color and weight and even add shadow to the text.

Icon

Icon Color

Here can define a custom color for the icon.

Icon Background

Here you can define a custom background color for the icon.

Padding

Here you can add padding in the icon to make to look perfect if you are using the background color.

Icon Font Size

Here you can change the actual size of the Icon by increasing or decreasing the Icon font size.

Icon Rounded Corners

Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each.

Border

Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well.

Image

Background

Here you can define a custom background color for the Image.

Image Padding

Here you can add padding in the icon to make to look perfect if you are using the background color.

Image Width

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

Image Rounded Corners, Border and Box Shadow

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

List Items

Layout

Here you'll be able to change the Layout of the Icon List to either Vertical or Horizontal.

Alignment

Change the alignment of the Icon List Item to Right, Center or Left.

Vertical Alignment

The List can be placed either above, below or in the center of the module.

Direction

Here you can choose the direction of the Icon, if you'll select Left to Right the icon will be on Left and the text on Right. And same goes for the Right to Left option, text on left and icon on right.

Space Between

Add some Space between Icon List Items.

Background Color

Add a Background color to all Icon List Items here.

Padding

Here you can define custom padding for the icon list item.

List Item Rounded Corners, Border and Box Shadow

Here you can add Corner Radius, Border and Box Shadow to the List Item.

Advanced Options

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

Icon List Item Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/7pB7Zvimc4/Icon-List-Item-Content-Options.png (Icon-List-Item-Content-Options.png)

Content

Text

Add text to the icon list here.

Use Icon

You can enable this switch to use Icon and browse from hundreds of Icon from Divi Icon Library. Disabling this switch will show (+) button to add an image to the list rather than Icon.

Tooltip

Use Tooltip

Enable this switch to enable the Use of Tooltip and show a tooltip when Hover to Icon List item.

Content

After enabling the use of Tooltip, you'll see a field to enter the Content you want to show when Hover to Icon list item.

Icon List Item Content Options

Icon

Icon Color

Here can define a custom color for the icon.

Icon Background

Here you can define a custom background color for the icon.

Padding

Here you can add padding in the icon to make to look perfect if you are using the background color.

Icon Font Size

Here you can change the actual size of the Icon by increasing or decreasing the Icon font size.

Icon Rounded Corners

Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each.

Border

Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well.

Image

Background

Here you can define a custom background color for the Image.

Image Padding

Here you can add padding in the icon to make to look perfect if you are using the background color.

Image Width

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

Image Rounded Corners, Border and Box Shadow

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

Tooltip

Placement

Here you can change the Placement of the Tooltip to:

Top
Right
Bottom
LeftBackground Color

Here you can change the Color of the Tooltip.

Tooltip Padding

You can define a custom padding inside of the Tooltip content here.

Tooltip Max width

To increase the width of the Tooltip change the max width of the Tooltip here.

And else you can play around with Tooltip text's font, size, color, weight and more.

Text

And you can play with the text by changing its font, size, color and weight and even add shadow to the text.

List Item Advanced Options

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

Question 8

PCLZIP_ERR_BAD_FORMAT (-10) - Error Message Solution

Accepted Answer

The PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature error is usually displayed by WordPress as a result of one of three things:

There's an issue with the zip file you're uploading
WordPress doesn't have enough memory on the web server to unzip and upload the contents of the zip file or even your hosting Server Disk Space Issue(To confirm this, try to upload other files to your sites, such as an image, video or other Plugin. If you're not able to upload large files, then storage space is likely the issue).
An error being thrown by a plugin or script on your site

We can exclude out No.1 and No.3.

You might want to try to install the zip manually, then it may mean that there's not enough storage space on your host for WordPress to be able to unzip and upload the contents of the file. We suggest talking to your hosting support to see what they can do about the space that needed to unzip.

Question 9

Divi Read More Extension

Accepted Answer

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.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/oJb6m3Rcv6/readmore%20content%20enable.png (readmore content enable.png)

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

Question 10

Popup styling issue on Frontend

Accepted Answer

If you're facing such issue then here's a quick solution. All you've to do is to make sure that the Layout type in Library is set to "Layout". This is a bug in Divi so that's the only solution for now.

How to Change Layout Type

To change the layout type, you first need to create a new Layout by clicking the "Add New" button and choose "Layout" from the Dropdown and then copy the content from the previous layout and paste in this newly created Layout. Once this Layout is saved, you can then go to Popup settings, and change the Layout from there as well.

So that's it, now the Popup on Front end will load without any styling issue, Cheer!