Question 1

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 2

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 3

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 4

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 5

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 6

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 7

Divi Icon List Module

Accepted Answer

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

Content Options

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

Adding Icon List

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

See below for individual Icon List Item settings.

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

Design Options

Text

Text Indent

Here you can add padding between the text and icon.

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

Icon

Icon Color

Here can define a custom color for the icon.

Icon Background

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

Padding

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

Icon Font Size

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

Icon Rounded Corners

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

Border

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

Image

Background

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

Image Padding

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

Image Width

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

Image Rounded Corners, Border and Box Shadow

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

List Items

Layout

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

Alignment

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

Vertical Alignment

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

Direction

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

Space Between

Add some Space between Icon List Items.

Background Color

Add a Background color to all Icon List Items here.

Padding

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

List Item Rounded Corners, Border and Box Shadow

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

Advanced Options

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

Icon List Item Content Options

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

Content

Text

Add text to the icon list here.

Use Icon

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

Tooltip

Use Tooltip

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

Content

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

Icon List Item Content Options

Icon

Icon Color

Here can define a custom color for the icon.

Icon Background

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

Padding

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

Icon Font Size

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

Icon Rounded Corners

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

Border

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

Image

Background

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

Image Padding

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

Image Width

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

Image Rounded Corners, Border and Box Shadow

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

Tooltip

Placement

Here you can change the Placement of the Tooltip to:

Top
Right
Bottom
LeftBackground Color

Here you can change the Color of the Tooltip.

Tooltip Padding

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

Tooltip Max width

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

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

Text

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

List Item Advanced Options

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

Question 8

Divi Supreme Masonry Gallery Module

Accepted Answer

With Divi Supreme’s Masonry Gallery Module you can easily showcase your Images in an interesting way. Showcase your Portfolio in style whether you’re Web Designer, Photographer, etc this Module is made for you.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/NO90dSfCVX/dsm-masonry-gallery-content-options.png (dsm-masonry-gallery-content-options.png)Gallery

Add Images from Media Library to show in the Gallery.

Settings

Use Overlay

This will enable the Overlay on each image Hover and will use the "Title" and "Description" option from Media Library. You'll need to add Title and Description to each image in Media Library to show the Overlay.

Use Lightbox

Enable this option If you want to open each Image in Lightbox/Popup and then you'll be able to switch the Image by clicking on Arrows in the Lightbox.

Use Horizontal Order

Enable this option if you want to change the Images to Horizontal Order.

Use Zoom on Hover

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

Design Options

Grid Layout

Here you'll be able to style the Images in the Gallery.

Columns

Here you can change the number columns you want to show for the Masonry Images. You can enable the Responsive Option to set column number for Mobile Devices.

Columns Gaps

Increase or decrease the Value to change the Column Gap.

Grid Items

Grid Item Rounded Corners and Border

Here you can add Rounded Corners and Border to each Image in the Gallery.

Grid Item Box Shadow

Set a custom Box shadow for each Image in the Gallery.

Overlay

You can Design the Overlay text here.

Show Image Overlay Title

Disable this option If you don't want to show the Image Overlay Title.

Show Image Overlay Description

Same goes here, disable it If you don't want to show Overlay Description.

Overlay Color

You can change the color of the Overlay here.

And further you can style the Title/Description text, You can change Font, Size, Weight and much more of Title and Description text.

How to change the Overlay's title and description?

You can edit the image title and description via the WordPress Media Library. Simply just put in your custom Title and Description text into the input field. This will shows up in the Overlay.

You can also set a custom URL to each image by inserting a custom URL in the "LINK URL" input field under "Divi Supreme Modules Only".

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Te5CaSuPBf/masonry%20galleryimg-min.png (masonry galleryimg-min.png)

Advanced Options

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

Question 9

Divi Menu Module

Accepted Answer

Display your WordPress menu and design it in whatever way you want. Use it for Footer or Sidebar.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/kHUh9yrPUD/footer-1024x427.png (footer-1024x427.png)

Content Options

Menu Title

This field is where you can enter the title of your menu.

Menu

Select a menu that should be used in the module. You can create new menus using the Appearances > Menus page in your WordPress Dashboard. Each time you create a new menu, the menu will be selectable in this dropdown menu.

Collapse Sub Menu

Enable this Option If you'd like to collapse the Sub Menu and that will reveal when you click on the Parent Menu Item.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/pPt7En8bRB/dsm-menu-711x1024.png (dsm-menu-711x1024.png)

An example how we use the menu module with the Footer Template to design our Footer

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/kHUh9yrPUD/footer-1024x427.png (footer-1024x427.png)

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Layout

Menu Layout

Currently the available Menu Layout is vertical.

Title

Here you can style the Title text of the Menu Module

Bottom Gap

Add some spacing under the Title text of the Module.

And you can then change the color, font, weight and more of the Title text.

Sub Menu

If there's a sub menu in the Menu you've added, then you can style those submenus here.

Left Spacing

Add some spacing on Left of of the Sub Menu Item(s).

And then you play around with changing Font, size, weight and more of the Sub Menu Items.

Sub Menu Collapse

From here you'll be able to style the Sub Menu Collapse Icon easily.

Arrow Color

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

Arrow Background Color

You can change the Arrow Background color from here.

Arrow Gap

Change the Arrow gap between the Menu Item and Arrow Icon.

Arrow Padding

You can add Padding to the Icon from here, Useful If you've added Background to the Icon.

Arrow Font Size

You can change the Icon font size from here.

Arrow Border, Border Radius and Box Shadow

And else you can add border radius, boc shadow and Border to the Icon easily.

Animation

Use Link Hover Animation

Enable this option to add a Hover animation to Menu Items.

Animation Type

Change the Type of the animation of the Animation here. Currently there's only Underline available we'll be adding more in upcoming updates.

Underline Animation

Here you can change the direction of the Underline Animation. You can change the direction of the Underline from 3 different types:

Left to Right
Right to Left
Center Out

Link Color

Change the color of the Underline here.

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 10

Divi Embed Google Map Module

Accepted Answer

If you just need a simple Google Map, then this Embed Google Map Module will do the job nicely. This will embed into your Divi’s site easily without having to worry about anything else.

The Maps JavaScript API v2 is deprecated and will has turned off on May 26, 2021. As a result, all site's v2 embed maps will stop working, and will return JavaScript errors. Google Embed now required a API key even for embed map. https://developers.google.com/maps/documentation/embed/get-started

However, old method using copy/paste method does work for now, however we cannot confirm this method is stable or will be deprecated in the future as well(Google is known to change things):

Obtain a Google embed code

Go to Google Maps
Enter the business address in the search bar, then click the search button
Click on the Share icon
Choose "Embed map"
Select the size of the map from the drop down
Select and copy the HTML iframe embed code

Even thought having API for embed is free and has unlimited usage(https://developers.google.com/maps/documentation/embed/usage-and-billing).

You can read more on how to create the free API for the embed google map: https://developers.google.com/maps/documentation/embed/get-api-key

Make sure Maps Embed API in the Library is enabled as well.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/2HnJ7wvEJq/Maps%20Embed%20API.png (Maps Embed API.png)

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/aniq3Rx4ot/showcase-5-1024x747.png (showcase-5-1024x747.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/ssYQ5siTYC/dsm-embed-google-map-768x893.png (dsm-embed-google-map-768x893.png)

Google Map API Key

Address

Enter an address for the map, and the address will be geocoded and displayed on the map. You can simply type in an address in a standard format, such as “1235 Sunny Road, Some City, State, 88343.”

Zoom

The Zoom level of the map.

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

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.