Question 1

Gravity Forms Multistep Form Loading Issue

Accepted Answer

Gravity Forms does not allow multiple forms to be placed on the same page. Additionally, if the same form is added to a page more than once, it may cause issues with form functionality and submission duplication.

For more information and a detailed discussion on this issue, refer to the following link: Gravity Forms Community - Displaying the same form in multiple different lightbox popups (submission duplication issue resolved).

Solution:

To address this issue, you have two options:

Duplicate the Form: Create a duplicate form with a different ID. This ensures that each form on the page is treated as a separate entity, avoiding conflicts caused by multiple instances of the same form.
Duplicate the Layout in Divi Library and Trigger: You'll need to duplicate the form layout and trigger it to display in a new layout. This approach allows you to retain the same form ID while avoiding conflicts.

To prevent page refreshes during form submissions, it's important to enable Ajax. For guidance on enabling Ajax for embedded multi-page forms, refer to the following resource: Gravity Forms Community - Embedded multi-page form without refresh (resolved).

Question 2

Divi Supreme Random Image Module

Accepted Answer

Important: For Random Images to work optimally, you'll need to turn off caching on the page that the module is implemented on.

The Divi Supreme Random Image module streamlines the display of a random image on your website. Upload images to the module, and it will automatically select and display a random image. This feature offers an effortless way to showcase a variety of images without the need for manual selection.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/rNNyLS25P6/2023-05-28%20at%2015.57.30.gif (2023-05-28 at 15.57.30)

Content Options

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.

Images

Here you can upload your Images that you want to ranomly show on your page.

Image Size

Choose the Size of the Image here or leave it to "Full Size".

Link

Use Image Link URL

Enable this option If you'd like to enable URL for each image. See below to learn how to add a URL to each image.

Lightbox

Here you can choose whether you want to open the image in Lightbox, simply enable the option If you want to open the image in lightbox.

Image Size

You can also select a different size for the image in lightbox only or leave it to "Full Size" to show the full image.

Design Options

Overlay

Image Overlay

Enable this option If you'd like to show an Image Overlay.

Show Overlay on Hover

If you only want to show the Overlay on hover, enable this option.

Overlay Icon Color

Here you can change the Color of the icon that shows in the Overlay.

Overlay Color

Here you can change the color of the Overlay itself, use the transparency slider to make a transparent overlay effect.

Icon Picker

Choose the Icon to show in the Overlay here.

Image

Here you can style & customize the Image by adding Border Radius, Border, Box Shadow, Filters and more.

Advanced Options

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

Question 3

Fixing Common Issues while using Divi Supreme

Accepted Answer

This guide contains solutions for some of the most common design issues raised to us by our customers.

1. Divi Supreme Dynamic Assets

If you're noticing that the design of your website isn't displaying as it should be, don't worry! We've included a handy "Compatibility" option in Divi Supreme -> Misc to help resolve any issues you may be facing with Dynamic Assets. Simply enable the option and you should see your content properly displayed on the frontend.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Kk98TJjf05/2023-05-27%20at%2020.40.08.png (2023-05-27 at 20.40.08)

You may also try to disable both the options and see If your issue is fixed.

2. Caching Plugins

If your design doesn't appear correctly, chances are the Caching/Performance plugins you are using are the cause. Go ahead and disable any caching plugins you have installed in order to check if this solves the issue. After that, look for the setting which is likely causing it to appear incorrectly - disable it if possible. If you cannot find it, it may be best to reach out to the plugin's support team for help.

For Siteground Users, one option which can often cause issues is the "Defer JS" option in Plugin Settings -> Frontend -> JS. You can try to disable this and see if that fixes the problem.

3. Not Using the Latest Version

It is always best to ensure that you are using the latest version of Divi Theme and Divi Supreme Pro. To view the current version of the Divi theme, head to Dashboard > Appearance. To view the version of Divi Supreme Pro, simply go to Dashboard > Plugins, where the version number will be listed.

For both Divi and Divi Supreme, view the changelogs and ensure you have the latest version installed.

Divi Changelog: https://www.elegantthemes.com/api/changelog/divi.txt

Divi Supreme Pro Changelog: https://divisupreme.com/divi-supreme-pro-changelog/

Hope this helps to solve any issue you may facing.

Question 4

Fix the "Update Package Not Available" Issue!

Accepted Answer

So If you're facing the "Update Package Not Available" that might look like the below image when trying to Update Divi Supreme Plugin:

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/8HHSrXZOnX/divi-supreme-pro-plugin-update-error.png (divi-supreme-pro-plugin-update-error)

Here's a quick Fix

This commonly occurs when you switch to a new host or migrate your site. The issue arises because the license key remains connected to your staging or old site. To resolve this problem, follow the steps below:

Deactivate the License Key: Access License Settings under Dashboard -> Divi Supreme Pro -> License and deactivate the current license key. This is necessary because the license key might still be connected to your staging or old site, leading to update issues.
Activate the License Key Again: After deactivating the license key, reactivate it on your live site. This step ensures that the license is properly connected to your live site, allowing updates to work smoothly.
Clear Your Cache: Clearing your cache can help resolve any caching-related conflicts that might prevent the update from being recognized. Use a caching plugin or the appropriate caching settings in your hosting control panel to clear the cache.

Once you've completed these steps, you should be able to update the Divi Supreme Plugin without encountering the "Update Package Not Available" error.

If the issue persists or you require further assistance, please don't hesitate to contact our support team via email. We are here to help you.

Question 5

Divi Supreme Circle Info Module

Accepted Answer

The Divi Supreme Circle Info Module helps you create beautiful, interactive circle information in Divi. You can use it to display important information about your business, service, or product in an engaging way. The module is easy to use and comes with a variety of customization options. With the Divi Supreme Circle Info Module, you can create a unique and informative way to present your business or product.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/HBsePIxHOp/2022-11-28%20at%2002.43.03.png (2022-11-28 at 02.43.03)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/PS7JxEzGth/2022-11-28%20at%2002.44.08.png (2022-11-28 at 02.44.08)

Adding Circle Info Items

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

See below for individual Circle Info Item settings.

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

General

Enable Autoplay

You can enable the use of Autoplay on Circle Info Items, and items will change after the specified time.

--Speed

Here you can adjust the speed of the Autoplay.

--Delay

Here you can adjust the delay of the Autoplay.

Trigger

Choose whether you want to change Circle Info on Click or Hover.

Circle Size

Here you can adjust the size of the Circle, you can enable Responsive option to adjust the size for Mobile Devices.

Content Animation

Here you can change the Animation of the Content from 30+ Animations.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/JOfqHC2W6q/2022-11-28%20at%2002.49.34.png (2022-11-28 at 02.49.34)

Circle

Here you can customize the Circle by adding Border, Border Radius & Box Shadow etc.

Content - General Tab

Here you can customize the Content Info by adding Padding, Border, Border Radius & Box Shadow etc.

Content - Title Tab

Here you can customize the Title of Content by changing its font, size, color and weight etc.

Content - Description Tab

Here you can customize the Description of Content by changing its font, size, color and weight etc.

Circle Item - General Tab

Circle Size

Here you adjust the size of the Circle Item that shows with the Circle line as a Circle!

Else you can customize the Title of Circle Item by changing its font, size, color and weight etc.

Circle Item - Normal Tab

Background Color

Here you can change the Background color for the Circle Item - Normal State.

** Color**

Here you can change the Title/Icon color for the Circle Item - Normal State.

Else you can customize Normal State by adding Border, Border Radius & Box Shadow etc.

Circle Item - Active Tab

Background Color

Here you can change the Background color for the Circle Item - Active State.

** Color**

Here you can change the Title/Icon color for the Circle Item - Active State.

Else you can customize Active State by adding Border, Border Radius & Box Shadow etc.

Image & Icon - Icon Tab

Icon Size

Here you can adjust the size of the Icon.

Background Color

Here you can change the Background color of the Icon - Normal State.

Active Background Color

Here you can change the Background color of the Icon - Active State.

Color

Here you can change the color of the Icon - Normal State.

Active Color

Here you can change the color of the Icon - Active State.

Else you can customize the Icon by adding Margin/Padding, Border, Border Radius & Box Shadow etc.

Image & Icon - Image Tab

Image Width

Change the Image Width here.

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

Button

Enable Use Custom Styles for the button to add custom styling 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 Circle Info module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.

Circle Info Item Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/QWR5zpbwbH/2022-11-28%20at%2003.01.30.png (2022-11-28 at 03.01.30)

General

Title

Here you can add your Title for the Circle Item.

Use Icon

Enable this option If you'd like to use Icon, you can disable it to use your own custom image.

Content

Title

Your Title for Content goes here.

Content

Here you can add your Description for Content.

Button Text

If you'd like to add a Button, simply add in Button Text here.

Button URL

Change the Button URL here.

Button Link Target

Change the Button Link Target to either open in "Same Window" or in a "New Tab".

Circle Info Item Design Options

Circle Item - General Tab

Here you can customize the Title of Circle Item by changing its font, size, color and weight etc for this specific item.

Circle Item - Normal Tab

Here you can customize Normal State by adding Border, Border Radius & Box Shadow etc for this specific item.

Circle Item - Active Tab

Here you can customize Active State by adding Border, Border Radius & Box Shadow etc for this specific item.

Content - General Tab

Here you can customize the Content Info by adding Padding, Border, Border Radius & Box Shadow etc.

Content - Title Tab

Here you can customize the Title of Content by changing its font, size, color and weight etc.

Content - Description Tab

Here you can customize the Description of Content by changing its font, size, color and weight etc.

Image & Icon - Icon Tab

Icon Size

Here you can adjust the size of the Icon.

Background Color

Here you can change the Background color of the Icon - Normal State.

Active Background Color

Here you can change the Background color of the Icon - Active State.

Color

Here you can change the color of the Icon - Normal State.

Active Color

Here you can change the color of the Icon - Active State.

Else you can customize the Icon by adding Margin/Padding, Border, Border Radius & Box Shadow etc.

Image & Icon - Image Tab

Image Width

Change the Image Width here.

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

Button

Enable Use Custom Styles for the button to add custom styling 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.

Circle Info Item Advanced Options

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

Question 6

Divi Supreme Filterable Gallery Module

Accepted Answer

With Divi Supreme Filterable Gallery Module, you can easily create Beautiful Filterable Galleries in Divi. This module is packed with features and options that allow you to create amazing galleries without having to code. You can also quickly and easily filter your Images by Categories assigned to the image.

Important: To assign a Category to the image, you can open up the image in Media Library and then enter the category that you want to assign to the image. Here's a video guide for help:

Content Options

General

Use Dynamic Images

Images

You can also manually upload your images here as many as you want. The main advantage of this is that you can rearrange the images however you like simply with drag & drop.

Number of Columns

Here you can choose the Number of Columns for Images.

Image Size

You can change the Image Size from here from different presets.

Column Gap

Here you can increase/decrease the Column gap between images.

Row Gap

Here you can increase/decrease the Row gap between images.

Speed

Here you can control the Speed when Filtering Images.

Layout

Here you can select the Layout, either "Card" or "Overlay".

*When using "Overlay", you'll see below options:

Image Height

Here you can change the Height of the Image manually.

Hover

Change the Hover style here, you can select "Fade In" or "Zoom" or "None".

Hover Transition

Change the Transition period of the Hover Effect here.

Elements

Enable Filterable Gallery

Enable/Disable If you want to have Filters at the top.

Show All Images Text

If you want to show the "All" tab, where all the images will be displayed, you can enable this option.

--All Images Text

You can also set a custom Text for "All" tab.

Show Title

Enable this option If you'd like to show Image Title in the Gallery, you can assign this Title in the Media Library for each image.

Show Caption

Enable this option If you'd like to show Image Caption in the Gallery, you can assign this Caption in the Media Library for each image.

Show Description

Enable this option If you'd like to show Image Description in the Gallery, you can assign this Description in the Media Library for each image.

Use Lightbox

You can enable this option If you'd like to show Gallery images in the Lightbox.

Show Pagination

If you got many images and want to pagination so the user won't have to scroll much, you can enable this option. You can change the Type of Pagination in the "Pagination" panel.

Configuration

Items Per Page

Here you can set how many images you'd like to show per page.

Pagination

Pagination Type

Here you can change the Pagination type to either "Load More" button or "Numbered Pagination".

Design Options

Title

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

Caption

This is where you can customize the Content Caption by changing its font, size, color and weight etc.

Description

This is where you can customize the Content Description by changing its font, size, color and weight etc.

Card

There is where you can customize the Layout when using "Card" type.

Background Color

Here you can change the Background color of the Card.

Padding

Here you can add padding to the Card.

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

Image

Margin

Here you can add Margin to the Image

Padding

Here you can add Padding to the Image.

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

Content Wrapper

Margin

Here you can add Margin to the Content Wrapper.

Padding

Here you can add Padding to the Content Wrapper.

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

Overlay

Background Color

Here you can change the Background Color of the Overlay that shows on hover when using "Overlay" type.

Padding

Here you can add Padding to the Overlay.

Category Tab

Alignment

Here you can change the Alignment of the Category Tabs.

Inactive BG Color

Here you can change the Background color for Tabs for "normal" state.

Active BG Color

Here you can change the Background color for Tabs for "Active" state.

Inactive Color

Here you can change the Text color for Tabs for normal state.

Active Color

Here you can change the Text color for Tabs for normal state.

Margin

Here you can add Margin to the Category Tabs.

Padding

Here you can add Padding to the Category Tabs.

Else you can customize the Tabs by changing Font Size, color, weight and even adding Border, Border Radius & Box Shadow etc for "Normal" & "Active" state.

Pagination

Here you can customize the Numbered Pagination.

Inactive BG Color

Here you can change the Background color for Pagination for "normal" state.

Active BG Color

Here you can change the Background color for Pagination for "Active" state.

Inactive Color

Here you can change the Text color for Pagination for normal state.

Active Color

Here you can change the Text color for Pagination for normal state.

Margin

Here you can add Margin to the Pagination.

Padding

Here you can add Padding to the Pagination.

Alignment

Here you can change the Alignment of the Pagination.

Else you can customize the Pagination by changing Font Size, color, weight and even adding Border, Border Radius & Box Shadow etc for "Normal" & "Active" state.

Load More

Here you can customize the Load more button.

Background Color

Change the Background color of the Load more button here.

Margin

Here you can add Margin to the Load More button.

Padding

Here you can add Padding to the Load More button.

Else you can customize the Load More by changing Font Size, color, weight and even adding Border, Border Radius & Box Shadow etc.

Advanced Options

Use the advanced options to give your Step Flow module 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 SVG Animation Module

Accepted Answer

SVG animations are an easy way to add some pizzazz to your Divi website. The Supreme SVG Animation module makes it easy to create these animations, without any coding required. Just select the animation you want to use, and the module will handle the rest. With this module, you can easily add beautiful animated graphics to your website, without any headaches.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/nyRD1BNjmo/2022-10-04%20at%2020.44.43.gif (2022-10-04 at 20.44.43)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/fTAs9Vyk5a/2022-10-03-at-18.54.37.png (2022-10-03-at-18.54.37)

General

Use SVG Code

Enable this option If you'd like to use SVG Code Instead.

SVG File

Here you can upload your SVG File.

Settings

Type

Here you choose the Type of SVG Animation, you've option to choose from below options:

Delayed
Sync
One-by-One

Animate Timing Function

Here you can choose the Speed Curve for your Animation, you can choose whatever option works best for you.

Loop

Enable this option If you'd like the SVG Animation to Loop.

Unlimited

If enabled, the animation will Loop infinitely. You can disable to set a custom number times the animation will Loop.

Trigger

Enable this option to choose a Trigger type for your SVG Animation.

--Trigger Type

Here you can choose the Trigger Type, you can select Triggers from below options:

Start Animation when in Viewport
Start on Hover
Start on Click

Speed

Change the Speed of your SVG Animation here, the lower the value the faster the animation will be.

Delay

If you want to delay your animation, you can do so here.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/OCsGuNpVoh/2022-10-03-at-18.54.52.png (2022-10-03-at-18.54.52)

Alignment

Here you can change the Alignment of your SVG Animation.

SVG

Color

You can change the Color of your Animation here.

Width

Here you can adjust the Width of the Animation.

Advanced Options

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

Question 8

Supreme Step Flow Module

Accepted Answer

Divi Supreme’s Step Flow Module is the perfect way to create stunning step flows in Divi. With this module, you can easily add, remove, and rearrange steps with just a few clicks. Plus, the module comes with a variety of pre-designed templates to choose from, so you can get started right away.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/wcfil2isIJ/2022-09-24%20at%2016.45.05.png (2022-09-24 at 16.45.05)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/xBK7vlFlhD/2022-09-24%20at%2016.46.12.png (2022-09-24 at 16.46.12)

Title

Enter your Title text here.

Badge

Enter the Text for Badge here, which will appear on top of the Card. You can style it & change its position from the Design.

Use Description

Enable/Disable this option to show/hide the Description.

Content:

Your Description Content goes here.

Button Text

Add in your Button Text here.

Button Link URL

Add your Button link here.

Button Link Target

Choose Whether you want to open the Link in the Same Tab or a New Tab.

Show Direction

Enable this option If you'd like to show a Direction Arrow.

Type

Here you can choose the type of Direction. The Default will add an arrow that you can style from the Design tab. Or you can even choose an Arrow from Divi Icon Library or upload your own.

Image & Icon

Use Icon

Enable this Option If you'd like to use an Icon instead of the image. If enabled, you'll see Divi Icon library to choose an icon.

Image

Upload your image for the Step Flow Card here.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/1KexZcJnA7/2022-09-24%20at%2016.48.10.png (2022-09-24 at 16.48.10)

Title

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

Content

This is where you can customize the Content Description by changing its font, size, color and weight etc.

Image & Icon

Icon Color

Here you can change the Icon Color

Background Color

Here you can change the Background Color Of the Icon/Image.

Font Size

Here you can change the Size of the Icon.

Padding

If you want to add Padding to the Image/Icon, you can add it here.

Margin

If you want to add Margin to the Image/Icon, you can add it here.

Alignment

Here you can change the Alignment of the Image/Icon.

Width

Here you can change the Width of the Image.

Else you can customize the Image/Icon by adding Border, Border Radius & Box Shadow etc.

Badge

Position

Here you can Choose the Position of the Badge.

Use Custom Position

If you want to Use Custom position for the badge, you can enable this option.

Background Color

Here you can change the Background color of the badge.

Padding

If you want to add Padding to the Badge, you can add it here.

Margin

If you want to add Margin to the Badge, you can add it here.

Else you can customize the Badge font, size, color and weight etc and even play around with Border, Border Radius, Box Shadow, etc.

Button

Enable Use Custom Styles for the button to add custom styling 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 Step Flow module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.

Question 9

Supreme FAQ Module

Accepted Answer

If you’re tired of dull, boring FAQs on your website, it’s time to try something new. With Divi Supreme FAQ module, you can create stunning FAQs that are both informative and visually appealing. There are many styling and content options available, so you can customize your FAQs to match your website’s look and feel.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/sSdVUG3yiX/2022-09-17%20at%2017.50.57.png (2022-09-17 at 17.50.57)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/axWxoB0raG/2022-09-17%20at%2017.50.30.png (2022-09-17 at 17.50.30)

Adding FAQ Items

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

See below for individual FAQ Item settings.

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

General

Gap

Here you can add a gap between your FAQ Items!

Make Accordion

Enable this option If you'd like to make the FAQs Accordion, with this only one item can be opened at a time, other items will be closed automatically.

Open First Item

Enable this option, If you'd like to have the First Item opened by default.

Enable Schema Support

If you'd like to show your FAQs in Google (& Others) Search Results, then enable this option.

Use Image

If you'd like to use the same Image in the Toggles for all FAQ items, then you can enable this option. A new Panel will appear, where you can add your Image for both states. See In Item settings, If you'd like to have a different image for each item.

Animate Toggle Icons

Enable this option If you'd like to animate the Toggle Icon when you open/close a Toggle.

Toggle Icon

Open FAQ Icon

Select Icon for the FAQ for Open State here.

Close FAQ Icon

Select Icon for the FAQ for Close State here.

Icon Placement

Here you can change the placement of the Icon, If you place it right, It will move the Image to Left (If used) and Icon to right.

Toggle Image

This Panel will only appear If the "Use Image" option is enabled in the "General" Settings.

Open Image

Select Image for the FAQ for Open State here.

Close Image

Select Image for the FAQ for Close State here.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/mjPiOwTET3/2022-09-17%20at%2018.01.54.png (2022-09-17 at 18.01.54)

Open State Title

Margin

Add Margin to the Icon here If you wish - For Open State.

Padding

Add Margin to the Padding here If you wish - For Open State.

Open Icon Font Size

Change the Icon Font Size here - For Open State.

Else you can customize the Icon Open State by adding Border, Border Radius & Box Shadow etc.

Icon Close State

Close Icon BG Color

Change the Background Color of the Icon here - For Close State.

Close Icon Color

Change the Color of the Icon here - For Close State.

Margin

Add Margin to the Icon here If you wish - For Close State.

Padding

Add Margin to the Padding here If you wish - For Close State.

Close Icon Font Size

Change the Icon Font Size here - For Close State.

Else you can customize the Icon Close State by adding Border, Border Radius & Box Shadow etc.

Content

This is where you can customize the Content Description by changing its font, size, color and weight etc.

Advanced Options

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

Supreme FAQ Item Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/CAd6Fddrrj/2022-09-17%20at%2018.14.02.png (2022-09-17 at 18.14.02)

General

Title

Here you can Add Title for your FAQ Item.

Content

Here you can Add Content for your FAQ Item.

Use Image

If you'd like to use Image in the Toggle for this particular item, then you can enable this option. A new Panel will appear, where you can add your Image for both states.

Toggle Icon

Open FAQ Icon

Select Icon for the FAQ for Open State here.

Close FAQ Icon

Select Icon for the FAQ for Close State here.

Toggle Image

This Panel will only appear If the "Use Image" option is enabled in the "General" Settings.

Open Image

Select Image for the FAQ for Open State here.

Close Image

Select Image for the FAQ for Close State here.

Supreme FAQ Item Design Options

Below Styling Options will only apply to this Particular Item and won't be applied to other Items, to have the same styling for all FAQ Items, use Design Options in the Main Settings.

Open State Title

Margin

Add Margin to the Icon here If you wish - For Open State.

Padding

Add Margin to the Padding here If you wish - For Open State.

Open Icon Font Size

Change the Icon Font Size here - For Open State.

Else you can customize the Icon Open State by adding Border, Border Radius & Box Shadow etc.

Icon Close State

Close Icon BG Color

Change the Background Color of the Icon here - For Close State.

Close Icon Color

Change the Color of the Icon here - For Close State.

Margin

Add Margin to the Icon here If you wish - For Close State.

Padding

Add Margin to the Padding here If you wish - For Close State.

Close Icon Font Size

Change the Icon Font Size here - For Close State.

Else you can customize the Icon Close State by adding Border, Border Radius & Box Shadow etc.

Content

This is where you can customize the Content Description by changing its font, size, color and weight etc.

Timeline Item Advanced Options

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

Question 10

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 11

Divi Supreme Advanced Tabs Module

Accepted Answer

The Layout might not show properly in the Divi Builder, Only on the front end It will be 100% accurate. This is something elegant themes will be improving in the near future for rendering divi library layout in visual builder.

The Supreme Advanced Tabs Module is the perfect module to create stunning High-Quality Tabs in Divi. The module features Beautiful Animations and a wide range of customization options & functionalities, allowing you to create tabs that perfectly match your website’s design.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/3Z1r5hXQ0k/2022-07-14%20at%2022.36.17.png (2022-07-14 at 22.36.17)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/GT7dV5KNl5/2022-06-06-at-11.07.48.png (2022-06-06-at-11.07.48 (2023).png)

Adding Tab Items

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

See below for individual Tab Item settings.

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

General

Layout

Here you can change the Layout type of the Tabs. You can change it to:

Horizontal
Vertical
Column

Position

Here you can change the Position of the Tabs, to Top/Bottom or Left/Right, depending upon the Layout you chose.

Trigger

Change the Trigger for Tabs to change, you can set it to "Click" or "Hover".

Show Arrow for Active Tab

Enable this option to show a cool arrow for Active Tab.

Content Animation

Here you can add Animation to the Content from many different Animations. It will apply the animation to the Wrapper.

Inner Content Animation

Here you can add Animation to the Inner Content from many different Animations. It will apply the animation to the Inner Content.

Tabs Alignment

Here you can change the Aligment of the Tabs to where it looks good to you.

Tabs Image/Icon Placement

This is where you can change the Tabs Image/Icon Placement to Left, Right or Top of the tab.

Enable Deeplink

Enabling this option will allow you to open a certain tab just from the URL, Simply enable the option and when you go to the page on frontend, and change to a different tab, you'll see the URL changes in the address bar of the browser. Simply copy and paste it anywhere, and the selected tab will be open by default.

Enable Image Lightbox

If you want to open the Content Image in the lightbox, enable this option.

Make Tabs Stick to Top

If you want your Tabs to be sticky on scroll (Helpful when you've long content in your tabs), simply enable this option. You'll then see the option to control the Top offset value.

Auto Scroll on Mobile

Enabling this option will automatically scroll to the tab content on Mobile If you've many tabs, making it easer for users to see content.

Design Options

Tabs Wrapper

Here you can add stylings to the Tabs Wrapper.

Width

Change the Width of the Tabs Wrapper here.

Margin

Here you can add Margin to the Tabs Wrapper.

Padding

Here you can add Padding to the Tabs Wrapper.

Background

Here you can add Background to the Tabs Wrapper.

Alignment

Change the Alignment of the Tabs Wrapper here.

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

Image & Icon

Here you can style the Image & Icon on the Tabs.

Image Width

If you've selected Image for Tab, then you can change Its width from here.

Icon Font Size

If It's an Icon, you can change its size here.

Icon Color

Change the Icon Color here for Normal State.

Active Icon Color

Change the Icon Color here for Active State.

Margin

Here you can add Margin to the Tabs Image or Icon.

Padding

Here you can add Padding to the Tabs Image or Icon.

Else you can customize the Tabs Image & Icon by adding Border, Border Radius & Box Shadow etc.

Content Image & Icon

Here you can customize the Image & Icon found in the Content area.

Margin

Here you can add Margin to the Content Image or Icon.

Padding

Here you can add Padding to the Content Image or Icon.

Icon Font Size

If you've selected Icon for Tab, you can change its size here.

Image Width

If It's the Image, then you can change Its width from here.

Else you can customize the Content Image & Icon by adding Border, Border Radius & Box Shadow etc.

Tabs

This is where you can style the Tabs, change active/inactive color and more.

Gap

Change the Gap between Tabs here.

Inactive Background

Here you can change the Background color of the Inactive tabs.

Active Background

Here you can change the Background color of the Active tab.

Inactive Color

Here you can change the Text color of the Inactive tabs.

Active Color

Here you can change the Text color of the Active tab.

Else you can customize the Tabs by changing its font, size, color and weight & even add Border, Border Radius & Box Shadow & Active Box Shadow. However you like.

Content

Here you can style the Content the way you like.

Background

Here you can change the Background color of the Content.

Margin

Here you can add Margin to the Content.

Padding

Here you can add Padding to the Content.

Else you can customize the Content area by changing its Title/Body font, size, color and weight & even add Border, Border Radius & Box Shadow to the Content.

Button

Enable Use Custom Styles for the button to add custom styling 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 Advanced Tabs module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.

Advanced Tabs Item Content Options

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

Tabs

Title

Here you can change the Title of the Tab.

Use Image/Icon

If you'd like to use Image/Icon for the Tab, you can enable this option and then you can choose whether to use Image or Icon.

Content

Here you can change the Content of this Tab Item.

Content Type

Here you can change the Content Type, you can choose from:

Content - Will give you options to add Image/Icon, Title, Body etc to the Content.
Divi Library - Will give you the option to choose a Layout from Divi Library for Content.

Below options will show up when using "Content" type.

Title

Change the Title of Content here.

Content

Add Body/Description in the Content here.

Use Image/Icon

If you'd like to use Image/Icon for the Content, you can enable this option and then you can choose whether to use Image or Icon.

Image/Icon Placement

Here you can change the Placement of Image/Icon to "Left" or "Top".

Button Text

If you'd like to add a Button, simply add in Button Text here.

Button URL

Change the Button URL here.

Button Link Target

Change the Button Link Target to either open in "Same Window" or in a "New Tab".

Advanced Tabs Item Design Options

Tabs Image & Icon

Here you can style the Image & Icon on the Tabs.

Image Width

If you've selected Image for Tab, then you can change Its width from here for this item.

Else you can customize this Tab Image & Icon by adding Border, Border Radius & Box Shadow etc.

Content Image & Icon

Here you can customize the Image & Icon found in the Content area for this item.

Margin

Here you can add Margin to the Content Image or Icon.

Padding

Here you can add Padding to the Content Image or Icon.

Else you can customize this Content Image & Icon by adding Border, Border Radius & Box Shadow etc.

Tabs

Here you can customize this Tab by changing its font, size, color and weight etc.

Content

Here you can customize this Tab Content by changing its font, size, color and weight etc.

Button

Enable Use Custom Styles for the button to add custom styling to this Item 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 Tabs Item Advanced Options

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

Question 12

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 13

Divi Text Path Module

Accepted Answer

Adding text to a shape is a great way to add interest and intrigue to your pages. But until now, doing that has been difficult and time consuming. Not anymore! With the Divi Supreme Text Path Module, you can attach your text to any shape in just a few clicks. Choose from a predefined list of shapes, or upload your own, and get creative with your text placement.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/SCZ7tY9ZFk/2022-05-24%20at%2019.10.51.png (2022-05-24 at 19.10.51)

General

Text

Here you can add your Text to show in the Path.

Path Type

Here you can choose your Path type from 6 different types and you can also select "Custom" to show Custom Path. You'll have the ability to add your Custom SVG Code.

Text Direction

If you'd like to change the Direction of the Text, you can do so here.

Show Path

Enable this option If you'd like to show the Path as well.

Design Options

Alignment

Here you can change the aligment of the Module.

Text Path

Here you can style & adjust your Path the way you like.

Path Color

If you've enabled "Show Path" in Content Options, then you can change the color of the path from here.

Path Width

You can change Path width from here, If "Show Path" option is enabled.

Size

Change the Size of the Text Path from here, enable responsive option to change for mobile devices.

Rotate

If you want to rotate your Text Path, this is the place for that.

Word Spacing

Want to add Spacing between words, you can adjust that here.

Starting Point

Here you can adjust the Starting Point to where it looks good to you.

Title Text

Here you can change the font, color, weight and size, etc of the Text in the Path.

Advanced Options

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

Question 14

Divi Content Timeline Module

Accepted Answer

Divi Supreme Content Timeline Module allows you to create beautiful and compelling timelines using your content. With its easy-to-use interface, you can create a timeline in minutes, without any coding required. Plus, the module is fully responsive, so it looks great on any device.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/hHchTOvzqF/2022-05-16%20at%2011.52.38.png (2022-05-16 at 11.52.38)

Content Options

Adding Timeline Items

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

See below for individual Timeline Item settings.

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

General

Style

Choose a style for your Timeline here. You can select Left, Right, or Center.

Mobile/Tablet Style

Here you can choose Style for Mobile/Tablet only. You can select either Left or Right.

Show Card Arrow

Enable this option If you'd like to show Card Arrow pointing to the Pointer Element in the Timeline.

Enable Tree Animation

If you want to show Scroll Animation on Tree, enable this option. You'll be able to customize the colors from the Design tab.

Design Options

Alignment

Here you'll be able to change Content Alignment.

Title Text

This is where you can customize the Title Text by changing its font, size, color and weight and even add shadow to the Title.

Content

This is where you can customize the Content Description by changing its font, size, color and weight etc.

Opposite Text

This is where you'll be able to customize the Opposite Text, If you've added. Opposite text shows Opposite side of the Content Timeline for each item.

Background Color

Change the Background color of the Opposite Text here.

Width

You can adjust the width of the Opposite Text here.

Padding

If you'd like to add Padding to the Opposite text, you can do so here.

Else you can customize the Opposite Text by changing its font, size, color and weight & even add Border, Border Radius & Box Shadow. However you like.

Card

This is where you'll be able to customize the Cards.

Background

You can change the Card Background from here. You can even change Card Background from each item Content Options. If you'd like to have a different color for each or If you decide to use Image for Card Background.

Margin

Here you'll be able to add Margin to the Card If needed.

Padding

Here you can add Padding to the Card If needed.

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

Pointer

This is where you'll be able to customize the Pointer Element.

Background Color

Here you can change Background color of the Pointer - for Normal State.

Active Background Color

Here you can change Background color of the Pointer - for Active State. If Tree Animation Enabled.

Icon Color

Here you can change Icon color of the Pointer - for Normal State. If you've added Icon from Item Content Options.

Active Icon Color

Here you can change Icon color of the Pointer - for Active State. If you've added Icon from Item Content Options.

Icon Font Size

Here you can change the Icon Size If you wish to.

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

Tree

Background

You can change the Tree Background/Line color from here.

Active Background

You can change the Tree Background/Line color from here for Active State. If Tree Animation is enabled.

Width

Here you can change the Tree Line Width If you wish to.

Image & Icon

This is where you'll be able to customize the Image & Icon of the Card.

Icon Color

Here you'll be able to change the Icon Color.

Icon BG Color

This is where you'll be able to change Icon Background color.

Icon Font Size

Here you can change Icon Font Size If you wish to.

Image Width

If you're using Image instead of Icon, you can change Image width from here.

Image/Icon Alignment

Here you'll be able to change Image or Icon Alignment.

Else you can customize the Image/Icon by adding Padding/Margin, Border, Border Radius & Box Shadow etc.

Button

Enable Use Custom Styles for the button to add custom styling 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.

Animation

This part is important, If you'd like to add Entrance Animation to the Cards just as shown in the demo. You can do so here. We're using Divi's Animation Presets to add Animation to the Card the way you like. Just select any animation and adjust it the way you like.

Please Note, the animation will only work on Frontend and might not show correctly in Divi Builder.

Advanced Options

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

Content Timline Item Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/YLTtVsgsby/2022-04-26-at-17.08.44.png (2022-04-26-at-17.08.44)

Content

Use Image/Icon

Enable this option If you'd like to use Image/Icon. Once enabled, you'll see option to add your Image.

Use Icon

Enable this option If you'd like to use Icon Instead.

Image/Icon Placement

Here you can change the Image/Icon Placement to either Top of Content or on Left of the content.

Title

Add Your Title here.

Content

Here you'll be able to add your Content Description.

Use Pointer Image/Icon

Enable this option If you'd like to use Image or Icon in the Pointer. You'll then see a new Panel where you can add your Image or Icon.

Opposite Text

You can add your Opposite text here.

Pointer Image/Icon

You'll see this panel, If you enable "Use Pointer Image/Icon" from the Content Panel. Once enabled, you'll be able to add your Image to the Pointer or add Icon from Divi's Icon Library.

Button

Button text

Add text to the button here you can always remove the text of the element which you don’t want.

Button Link URL

Add a URL to the button here.

Button Link Target

Choose whether you'd like to open the URL in a new Tab or the Same Tab.

Timeline Item Design Options

Alignment

Here you'll be able to change Content Alignment.

Title Text

This is where you can customize the Title Text by changing its font, size, color and weight and even add shadow to the Title.

Content

This is where you can customize the Content Description by changing its font, size, color and weight etc.

Opposite Text

This is where you'll be able to customize the Opposite Text, If you've added. Opposite text shows Opposite side of the Content Timeline for each item.

Background Color

Change the Background color of the Opposite Text here.

Padding

If you'd like to add Padding to the Opposite text, you can do so here.

Else you can customize the Opposite Text by changing its font, size, color and weight & even add Border, Border Radius & Box Shadow. However you like.

Button

Enable Use Custom Styles for the button to add custom styling 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.

Image & Icon

This is where you'll be able to customize the Image & Icon of this Item Card.

Image/Icon Width

You can change Image/Icon width from here.

Image/Icon Alignment

Here you'll be able to change Image or Icon Alignment.

Else you can customize the Image/Icon by adding Padding/Margin, Border, Border Radius & Box Shadow etc.

Card

Here you'll be able to customize this Item's Card. You can customize it by adding Padding/Margin, Border, Border Radius & Box Shadow etc.

Timeline Item Advanced Options

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

Question 15

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 16

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 17

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 18

Divi Blob Shape Image Module

Accepted Answer

Fan of Blob Shaped Images? We got your back!

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/pYkPTQ33pR/blob%20shape%20image%20demo%20image.png (blob shape image demo image.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/FabVU8dRCy/blob%20shape%20image%20moduel%20-%20content%20options.png (blob shape image moduel - content options.png)

Image

Insert your Image here.

Blob Shapes

Choose any Blob Shape from 13 different Shapes.

Overlay Content

If you want to show content on the Image as an Overlay, then you can do so here.

Title

Add your Title here for the Overlay Content.

Description

Your description for the Overlay Content goes here.

Show Content on Hover

Enable this option If you like to show the Overlay Content on Hover.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/wt7Onx9t92/blob%20shape%20image%20module%20-%20Design%20options%20.png (blob shape image module - Design options .png)

Blob Image Settings

Blob Image is placed as a Background so you can change the Size & Position of the Image easily from here and make some other changes.

Size

Change the Size of the Image from here to "Cover" or "Initial".

Position

Change the position of the Image from here the way you like.

Blob Image Height

Change the Height of the Image from here If you need to.

And else you can add Border, Border Radius and Box Shadow to the Image If you like.

Overlay

You can also add Overlay Color or Gradient to the Image from here.

Use Overlay

Enable this Option If you'd like to add an overlay to the Image. And It will ask you to change the Color of the Overlay.

Use Gradient Overlay

Enable this option If you'd like to have a Gradient Overlay. Once enabled it will show different settings to change the Angle and Offset of the Gradient Color and you'll be able to have a Gradient Overlay as you desire.

Overlay Text

Here you'll be able to change the Styling of the Overlay Title, Description and add Spacing to the Overlay Content. Open the tab you'd like to change the styling of and make the changes you like. In the Spacing tab you'll be able to add Spacing around the Content.

Advanced Options

Use the advanced options to give your Blob Shape Image module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Question 19

Divi Post Carousel Module

Accepted Answer

Surprise your Visitors by showing your Posts in a new & creative way using Divi Supreme Post Carousel Module. Add some special post Carousels to your site and take Blogging with Divi to the next level.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/OfosPwxpmA/post%20carousel%20content%20options.png (post carousel content options.png)

Post Type

Choose Post type for the Carousel here. For the Blog you can use the Blog Carousel Module.

Post Count

Enter how many posts you want to show in the Carousel here.

Date Format

Change the Date format from here the way you like.

Elements

Show Featured Image

Enable or Disable this switch to show or hide Post's Featured Images.

Show Title

You can choose whether to display the Post Title or not, Disable it to hide the Post Title.

Show Excerpt

Enable to Disable this switch to show or hide the Post Excerpt.

Excerpt Text

Change the length of the Excerpt text here, enter value in numbers.

Show Date

You can choose whether to display the Post Publish Date or not, Disable it to hide the Date.

Meta Separator

Here you add a custom Meta Separator.

Author

You can choose whether to display the Post Author or not, Disable it to hide the Author Info from the Carousel.

Readmore Button

Enable this switch If you want to show the Readmore button for each Post card in the Carousel.

-Readmore Text

Add a custom Text for Readmore button here.

Show Bottom Meta Elements

This is something really cool, you can enable this option to show a nice looking Author Image and Name and Post Publish date for each Post card.

-Bottom Date

You can disable this switch If you don't want to show Date in this Meta Element.

-Bottom Author

Carousel Settings

Carousel Effect

Choose a Carousel effect from 4 Different Effects and more to add soon.

Slide
Coverflow
Flip
Cube

Columns

Enter how many columns you want to show in the Carousel.

Use Multiple Row

You can enable this option If you want to show multiple rows of Posts, lets say you enter 2 in the "Row Per Slide" field and then you'll see two Rows of Posts, a new one below the first one and It will work the same way. You can change the "Row Per Slide" value to whatever you like.

Centered Mode

If enabled, then active slide will be centered, not always on the left side.

Spacing

Add some spacing between carousel Items.

Transition Duration

Change the duration when sliding the Carousel using the arrows here.

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 Posts and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow.

Autoplay

You can enable this option to slide Carousel Items automatically according to the time you'll set.

-Autoplay Speed

Change the time interval for the slides to change after that time.

-Pause on Hover

Enable this option, If you want to pause the carousel autoplay when the mouse is on the Carousel Module.

Pagination

Enable or Disable this option to show or hide the pagination dots.

Navigation

Enable or Disable this option to show or hide the arrows.

Use Equal Height

Equalize the carousel Items height. Carousel Card Items will be 100% in Height.

Design Options

Post Item

Changes you'll make here will be applied to the Post Items/Cards in the carousel.

Post Item Padding

Add padding around the Post Item here.

Background Color

Add a background color for each post Card in the Carousel here.

And else you can play around with adding Corner Radius, Border and Box Shadow to Post Items/Cards in the Carousel.

Post Thumbnail

Thumbnail Height

You can change the height of the Featured Image here. A really helpful option.

And else you can play around with adding Corner Radius, Border, Box Shadow and Filters to Post Thumbnails in the Carousel.

Post Entry Title

Here you can change the Title styling, you can change the Heading Level, font, size, weight and much more for the Title.

Post Entry Summary

Here you can style the Description/Excerpt text the way you like.

Post Entry Meta

This is where you'll be able to style the Meta text, such as Date, Category, and Author font.

Alignment

Here you can change the alignment of the Meta text to Left, Right or Center.

And below you'll find options to style you Author, Date and Category Text's Font, Weight, Color and much more. You can give different styling to all of them.

Navigation

This is where you can style the Navigation/Arrows of the Carousel.

Navi Vertical Position

You can change the vertical position of the Arrows/Navigation here.

Left Navigation Position

From here you can horizontally change the position of the Left/Prev Arrow.

Right Navigation Position

From here you can horizontally change the position of the Right/Next Arrow.

Navi Arrow Icon Size

Here you can change the Size of the arrows.

Custom Prev Arrow Icon

Enable this option If you want to set a custom Icon for the Prev Arrow, enabling this option will show the Divi Icon Library to choose an icon.

Custom Next Arrow Icon

Same goes here, enable this option If you want to set a custom Icon for the Next Arrow, enabling this option will show the Divi Icon Library to choose an icon.

Arrow Color

Here you can change the Arrow Color.

Arrow Background Color

Change the Arrow Background color from here.

And below you'll find options to add Rounded Corners, Border and Box Shadow to the Arrow Icons.

Pagination

This is where you can style the Pagination/Dots.

Pagination Position

Change Vertical position of the Pagination here.

Pagination Color

Change the color of the Pagination here.

Pagination Active Color

Change the Active Pagination color from here.

Pagination Button Style

Here you can change the Pagination style, you've got 3 different styles to choose from.

Default
Dynamic
Progress Bar

Bottom Meta Items

Here you can play around with Bottom Meta Items styling.

Image Width

Change the Author Image width from here.

And else you can play around with the Author Name and Date Text styling. And add Rounded Corners, Border and Box Shadow to the Author Image.

Overlay

Enable this switch If you want to show an Overlay when hover on Thumbnail. When you'll enable this option It will open some settings and ask you to pick an Icon from Divi Icon Library.

Overlay Icon Color

Change the Icon Color here.

Overlay Icon Size

Change the Size of the Icon from here.

Overlay Background Color

Change the Overlay Background Color here.

Advanced Options

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

Question 20

Divi Image Accordion Module

Accepted Answer

Let's you display all of your images on your Divi website with a stunning hover/click animation and effects. Add as many items as you need providing them with icons, images, titles, descriptions, buttons, and links easily and quickly. It ensures the perfect image quality and combines them beautifully with amazing accordion effects.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/BbJQFpk7nt/Image%20Accordion-min.gif (Image Accordion-min.gif)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/WGFsRyv2NN/image%20accordion%20content%20options.png (image accordion content options.png)

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

See below for individual Image Accordion Item settings.

After you add your first Accordion Item, you will see a gray bar appear with the title of your Image Hotspot shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Image Accordion in the Main Content tab.

Accordion Settings

Accordion Type

Here you can choose whether to open the Image Accordion by Hover or Click.

Accordion Content Animation

Choose any animation from 5 different animations for Content entrance.

Use Sequenced Animation

Enabling this option will add animation separately to all Elements in the Accordion such as Title, Description, Button, Icon etc.

Accordion Direction

You can change the accordion direction to either Horizontal or Vertical.

Accordion Height

Change Accordion height from here.

Design Options

Overlay

Overlay Color

You can add Accordion to each Accordion from here, just change the color to any RGBA Value and it will be applied over your Image. This could be helpful to read your text clearly.

Icon

Icon Color

Change Icon color from her, If you've added in the Accordion.

Use Icon Font Size

Enable this option If you want to change the size of the Icon, you'll then see a handle to control the size of the Icon.

Icon Image

If you've replaced your Icon with an Image then you can manage It's styling from here, you can add Border, Corner radius and Box Shadow.

Title

Title Heading Level

Change the Heading level of the Title from H1 to H6.

And else you can play around with other settings to style the Title text.

Description

Here you can play around with the styling of the Description text the same way you style the paragraph in Default Text Module.

Button

This is where you can style the Button If you've added in Accordion. Enable the switch "Use Custom Styles for Button" and then you'll see options to style the button the same way you design Default Divi Buttons.

Advanced Options

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

Image Accordion Item Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/E7ulEQRwOA/item%20content%20options.png (item content options.png)

Make Item Expanded

As the name suggests, enable this option If you want the Item to be expanded by default.

Image

Add the Main Image for the Accordion here.

Use Icon

Enable this option If you want to add an Icon to the Accordion Content, then disable the switch If you want to use Image instead of icon.

Title

Your Main Title goes here.

Description

Your Description content goes here.

Show Button

Enable this switch If you want to use Button in your Accordion, then It will ask you for the Button Text & URL.

Horizontal Align

Here you can align the Accordion Content Horizontally to Left, Right & Center.

Vertical Align

Here you can align the Accordion Content Vertically to To, Bottom & Center.

Image Accordion Item Design Option

Overlay

Overlay Color

You can add Accordion to each Accordion from here, just change the color to any RGBA Value and it will be applied over your Image. This could be helpful to read your text clearly. Enable Hover option to add a Hover Overlay effect ~ Best for Item settings.

Title

Title Heading Level

Change the Heading level of the Title from H1 to H6.

And else you can play around with other settings to style the Title text.

Description

Here you can play around with the styling of the Description text the same way you style the paragraph in Default Text Module.

Button

This is where you can style the Button If you've added in Accordion. Enable the switch "Use Custom Styles for Button" and then you'll see options to style the button the same way you design Default Divi Buttons.

Sizing

Content Width

Change the Content width from here.

Image Accordion Item Advanced Options

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