Question 1

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

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 2

Divi Typing Effect Module

Accepted Answer

Add a nice and cool typing effect to your website using the Typing Effect for Divi. Write the text that you want to show and it will appear letter by letter like if you were typing with an old typewriter. This module automatically types out sentences and then deletes them to type the following sentence. You can configure settings such as how quickly the typing effect and backspacing takes place, then delays before starting a sentence with just a few clicks, set the animation to loop infinitely or randomise the order of the sentences.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/jiAFDTf7Bo/showcase-4.gif (showcase-4.gif)

Content Options

Text

Before Text

This will add a static text before the typing effect. Only available in the Pro version.

Typing Effect Text

This will have an animated typing effect on your Title. To seperate the words in typing effect, you will need to add “|” e.g text1|word|animating

Typing Text on a new Line

Enable this option If you'd like to have the Typing text on a new line.

After Text

This will add a static text after the typing effect. Only available in the Pro version.

After Text on a new Line

Enable this option If you'd like to have the After text on a new line.

Typing Effect

This is where you can configure the typing settings such as how quickly the typing effect and backspacing takes place, then delays before starting a sentence with just a few clicks, set the animation to loop infinitely or randomise the order of the sentences.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/QpJWGElmVA/dsm-typing-effect-517x1024.png (dsm-typing-effect-517x1024.png)

Use Loop

If enabled, typing effect will loop infinite.

Remove Cursor After Completed

This option will show up only when you disable ‘Use Loop’. This will remove the cursor after typing finish looping their effect.

Typing Speed (in ms)

Here you can control the speed of the typing effect. Lesser value will have faster typing effect.

Typing Backspacing (in ms)

Delay before backspacing.

Back Delay (in ms)

Here you can delay before backspacing.

Use Typing FadeOut

This will have fade out animation instead of backspacing.

Use Typing Shuffle

Here you can choose to shuffle your Typing Effect text strings.

Cursor Character

You can have your own custom Cursor Character here. The character is “|” by default. You can put in any characters, letters or numbers.

Animate in Viewport

Choose when you'd like to start the Typing effect when it comes to Viewport e.g 50% or 80% etc

Repeat Animation in Viewport

Enable this option to repeat the Typing effect when it comes to Viewport again.

Admin Label

By default, your typing effect module will appear with a label that reads ‘Supreme Typing’ in the builder. The Admin Label allows you to change this label for easy identification.

Design Options

Here you can find the option to style the Before Text, Typing Effect and the After text. You can style and/or position your text just how you want it by choosing the text color, orientation, font, font size, font spacing, and line height.

You can also designate a border style, set a max width for your module, and add custom margin and padding.

Before Text

Background Color

If you like to have a Background color to the text which is showing Before the Typing text then specify it here.

Padding

Add Some padding around the Before Text. Useful If you've added Background color to the Typing text.

And else you can play around with changing the Font, Size, Color, Wieght and more of the Before Text

After Text

Background Color

If you like to have a Background color to the text which is showing After the Typing text then specify it here.

Padding

Add Some padding around the After Text. Useful If you've added Background color to the Typing text.

And else you can play around with changing the Font, Size, Color, Wieght and more of the After Text

Typing Styles

Cursor Color

By default, the cursor color in typing effect will appear the same as your title font color. If you would like to change the color of your cursor color, choose your desired color from the color picker using this option.

Background Color

If you like to have a Background color to the text which is Typing then specify it here.

Padding

Add Some padding around the Typing Text. Useful If you've added Background color to the Typing text.

Advanced Options

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

Question 3

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 4

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 5

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 6

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 7

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 8

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 9

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.

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 10

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.