Question 1

Divi Floating Multi Images Module

Accepted Answer

A better and unique way to showcase multiple images to your visitors by using Floating Multi Images module. You can also change the animation either up/down or left/right.

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

Content Options

+ Image Item

This is where you add image to your Floating Multi Images Module. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new image. See below for individual image settings.

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

Animation

This is where you can change the floating animation effect.

Floating Effect

There are two types of Floating Animation Effect.

Up Down
Left Right
See Floating Multi Images here. The left column with Up Down animation and the right column with Left Right animation.

Image animation delay interval (in ms)

You can add a delay for the Animation to start in ms here.

Animation Speed

Here you can change the speed of the Floating Images Animation.

Image Item

Image

Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image.

Link

Open in Lightbox

Enable this switch to open the Image in Lightbox/Overlay.

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.

Sizing

Here you can change the placement and the width of the image.

Horizontal Align

Here you can change the horizontal alignment(left/right) of the image in percentage.

Vertical Align

Here you can change the vertical alignment(up/down) of the image in percentage.

Width

You can adjust the width of image.

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

Divi Text Notation Module

Accepted Answer

To grab the attention of your visitors, you need something more appealing. Put the focus on the important part of your text with an animated hand-drawn look and feel. 7 types of styles to choose from.

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/UWmk1dXVyj/text%20notation%20Module%20conent%20options.PNG (text notation Module conent options.PNG)

Before Text

Here you can specify anything you want to show Before the Notation Text.

Notation Text

Add the Notation text here, the Animation effects will be added to this Text.

After Text

Here you can specify anything you want to show After the Notation Text.

Notation Settings

Type

Choose the Type of the Animation around the Text here from 7 different Animation effects.

Underline
Box
Circle
Hightlight
Strike Through
Crossed Off
Bracket

Color

Choose the Color of the Notation Animation here.

Stroke Width

Change the width of the annotation Stroke here.

Iterations

By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations.

Animate in Viewport

Here you can set a custom value for the Animation to play at a specific Viewport.

Delay

Add a delay to the Notation Effect to start after the time you'll set.

Design Options

Heading Settings

Heading HTML Tag

Here you can change the Heading HTML Tag of the Notation text and Before/After Text.

Main Text

You can play around with the text Design settings here. The changes you’ll make here will be applied to all the texts i.e Notation Text and Before/After Text.

Before, Notation and After Text

You can easily style the Before, Notation and After text in the same way you style text in the Text Module(came with Divi Builder). And we’ll only discuss those options which are added by Notation Text Module to style the text’s background, padding and stuff.

Background Color: Here you can add color to the Background of the Before, Notation and After text.

Margin and Spacing: Add some Margin and Spacing to the Before, Notation and After text, if you want to add some spacing on both sides of Before, Notation and After Text.

Display: You can change the display property of the text to Inline Block and Block.

Inline Block displays the text in the same line as other texts.
Inline is very similar to Inline Block but it helps your text to remain on the same line when added Padding to the Before, Notation and After Text. Margin will not work with this Display Property.
Block Displays the text by making it a block means other texts will not be displayed in the same line.

And you can play around with Before, Notation and After text by adding different colors, text-shadows, border, border-radius and more to each text.

Notation Text Module Advanced Options

Use the advanced options to give your Notation Text 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 Shapes Module

Accepted Answer

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

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/AiAexCqfdk/dsm_shapes_module_showcase-1024x466.png (dsm_shapes_module_showcase-1024x466.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/jN35hh9nNG/shapes-module-content-options.png (shapes-module-content-options.png)

Shapes

Type

Here you can change the type of shape from 16 different Shapes. Here are the shapes that you can choose:

Square
Circle
Rectangle
Oval
Trapezoid
Parallelogram
Diamond Square
Hexagon
8 types of Blob

Size

Adjust the Size of the Shape here.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/eQvwcHv7Gw/shapes-module-designoptions.png (shapes-module-designoptions.png)

Shapes

Shape Color

Here you can define a custom color for your shape.

User Border

Enable this option if you want to add Border and Corner Radius to the shape.

Shapes Shadow

Here you can add a nice Drop Shadow to the shape.

Changing the Position of the Shape

Let’s See how we can change the position of the shape. We have three options:

Using Margins

Using Transform Translate Options

Using Position Options

Shape Module Advanced Options

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

Question 5

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 6

Divi Block Reveal Image Module

Accepted Answer

Create engaging and fresh interactions using Divi Block Reveal Image Module. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers image underneath. You get 4 types of animation to choose from.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/IwjnfgDeSm/showcase-block-reveal-image-module.gif (showcase-block-reveal-image-module.gif)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/xSzxD8AwfS/block-reveal-image-module.png (block-reveal-image-module.png)

Image

Add the Actual Image here that will be shown after a cool animation.

Link

Open in Lightbox

Here you can choose whether or not the image should open in Lightbox. Note: if you select to open the image in Lightbox, URL options below will be ignored.

Open as Video Popup

Put the Video link on the Image URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. Then If you click on the Image a video Popup will be shown.

Block Reveal Animation

Block Reveal Animation style

Here you can set Animation Direction. You can select where it will start from and where it will be ending. You Have Four Options to choose from:

Left to Right
Right to Left
Top to Bottom
Bottom to Top

Block Reveal Color

Here you can change the color of the Block which will be shown first with an animation.

Delay

Adjust the Delay of the Block Reveal Animation here.

Animate in Viewport

The Text Animation will only be shows at a specific Viewport.

Design Options

Overlay

Image Overlay

Enable this switch if you want to add overlay color or icon or both to the image.

Overlay Color

Change the color of the overlay on the image to your own one.

Use Icon

You can enable this option if you want to show an icon in the overlay. And then can choose any icon from the Divi Icon Library and Change it’s color as well.

Overlay Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Image Overlay. 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 Overlay.

Add Rounded Corners, Border and Box Shadow to Image

Here you’ll find options to control the corner radius of the Image. You can play around with adding borders and Box Shadow to the Image under Design Options.

Advanced Options

Use the advanced options to give your Block Reveal Image 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 Icon Divider Module

Accepted Answer

Create an organized and unique Icon Divider with Supreme Icon Divider Module. With many border styles to choose from. You can put an icon in-between the Dividers or align them to suit your design.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/PCIZhhEfzY/showcase-9-1024x605.png (showcase-9-1024x605.png)

Content Options

Use Icon

When using Icon Divider, you can choose to either use an Icon or and Image with your text. If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customize your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead.

Icon

If you chose “yes” for the “Use Icon” setting, then this option will appear. This options presents you with a list of available icons that you can use with your Perky Animate text. Simply click on the con that you would like to use and it will appear in your Icon Divider.

Image

If you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. However, your image will never scale larger than its original upload size. The height of the Icon Divider image is determined by the aspect ratio of your original image, so making all of your Icon Divider images the same height is a good idea if you are placing them side by side.

Background

Background Color

Here you can choose a background color for your module.

Background Image

Here you can choose a background image for your module.

Admin Label

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

Design Options

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

Image & Icon

Icon Color

If you chose “yes” for the “Use Icon” setting, then this option will appear. This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color.

Circle Icon

If you chose “yes” for the “Use Icon” setting, then this option will appear. This options allows you to place your icon within a colored circle. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border.

CIRCLE COLOR

If you chose “yes” for the “Circle Icon” setting, then this option will appear. Here you can pick a color to use for your circle. This color is independent from your Icon color selected earlier. You icon, in it’s color, will appear inside this a circle with the color you select here.

Show Circle Border

If you chose “yes” for the “Circle Icon” setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color.

CIRCLE BORDER COLOR

If you chose “yes” for the “Show Circle Border” setting, then this option will appear. Here you can adjust the color of the circle border.

Use Icon Font Size

If enabled, you can input a custom size for the icon that is displayed.

Alignment

This controls the divider alignment of the Icon Divider.

Color

You can choose your desired color from the color picker for the divider color. This will be apply a color to the divider only.

Styles

Here’s where you can style the divider appearance.

Divider Style

Here you can choose your divider style such as solid, dotted, dashed and etc.

Divider Position

This controls the vertical alignment of the Icon Divider.

Sizing

Here’s where you can style the Text Divider appearance.

Divider Weight

You can input a custom weight for the Divider which also refers to the thickness of the line.

Icon Gap

The Gap space between the icon and the divider.

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 8

Divi Image Hover Reveal Module

Accepted Answer

When you hover over the image, you will see the top image sliced into 5 pieces and revealing the image again with zoomed in animation. There are 4 types of animation to choose from. A unique way to showcase!

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

Content Options

Image

Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image.

Admin Label

This will change the label of the module in the builder for easy identification. When using the 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.

Sizing

Height

Default at 260px. Here you can define a height for your Image Hover Reveal.

Animation

Image Reveal Animation

Here you can choose 4 types of animation. Vertical Slide Down, Vertical Slide Up, Horizontal Slide Right and Horizontal Slide Left.

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 visibility on certain devices.

Question 9

Divi Star Rating Module

Accepted Answer

A must for all Divi sites and website owners. An important feature for many in order to get trust from your visitors. The star rating module is built with Google Schema in mind, and it’s fully customizable!

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/H1ldKHajdm/dsm-star-rating-709x1024.png (dsm-star-rating-709x1024.png)

Rating

Rating Scale

Default at 0 – 5. Choose a scale from 0 to 5 or 0 to 10

Rating

Here you can assign the rating based on the scale chosen.

Title

Enter the title for the rating.

Title Inline Position

From here you'll be able to position the Title to "left" or "right" of the Stars, If in any case you need to.

Display Type

Here you can choose whether you want your Title to be stacked or to be displayed as inline.

Show Rating Number

This will show the rating number text after the star icons.

Schema

By implementing Schema Support, you can display star ratings in search engine results, enhancing your visibility on platforms such as Google.

Enable Schema Support

Enable this If you'd like to enable the Schema Markup for this Star Rating module.

Author

Add the name of the Author here, you may leave this empty. Use Dynamic Content option to display dynamic info.

Product Item Name

Add the name of the Product here, you may leave this empty. Use Dynamic Content option to display dynamic info.

Number of Rating

Enter the Number of Rating here to display in Search Engines, you may leave this empty. Use Dynamic Content option to display dynamic info.

Design Options

Here you can style and/or position your text or header 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.

Stars

Size

Change the size of the stars

Gap

Control the gap between each star.

Color

Choose the color of the star icons.

Title

Gap

Here you can control the space between the title and the star icons.

And else you can play around with the Title text by changing Font, Size, Weight and more of it.

Rating Number Text

Here you can play around with the Rating Number text by changing Font, Size, Weight and more of it.

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

How to Download Divi Supreme Pro

Accepted Answer

You can access the latest version of our products at any time provided you’re still in the license term by logging into Divi Supreme account.

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

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

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

If you have any troubles accessing your account, try resetting your password, and if that fails please contact us.

Question 11

Divi Glitch Text Module

Accepted Answer

The glitch effect can bring some very unique style to your site, but can be also very distracting if you overuse it. So Glitch responsibly!

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

Content Options

Glitch Text

This field is where you can enter the content of your text. Text content spans the full width of the column that it is in.

Glitch Effect

This is where you can choose different types of animation for the glitch effect.

Background

Background Color

Here you can choose a background color for your text module.

Background Image

Here you can choose a background image for your text module.

Admin Label

By default, your glitch text module will appear with a label that reads ‘Glitch Text’ in the builder. The Admin Label allows you to change this label for easy identification.

Design Options

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

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 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 Responsive Viewer Extension

Accepted Answer

Introducing Responsive Viewer Extension for Divi. Want to create even more responsive websites with Divi then this extension is made for you.

Breakpoint Presets Preview

Save your precious time and preview all your responsive design in different breakpoint with just a few clicks.

Custom Breakpoint Preview

Besides choosing from the presents, You can also set your own custom responsive sizes right in the Divi Builder.

Perfect Responsive

It’s time to make your mobile Divi sites even better. Preview your beautiful design for iPhone, iPad, Android devices or even the biggest or smallest mobile devices.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/sxcCVjYWLd/dsm-responsive-viewer.gif (dsm-responsive-viewer.gif)

Before you start using

Make sure that the extension is enabled from Divi Supreme’s Settings page for it to work.

How it Works?

After enabling the extension you’ll now be able to see more responsive sizes when you’re editing your page using Visual Builder, Backend Divi Builder, and Theme Builder. When you’ll go to Mobile view you’ll now see some more screen sizes and a field where you can set your own custom size.

Backend Builder Preview

Here’s a quick look at how it Looks like in the Backend Divi Builder. If you love to use the Divi Backend builder that don’t worry this extension also work perfectly there.

Theme Builder Preview

This extension also works with the Divi’s Theme Builder helping you to create more responsive Header, Footer, Archive pages and more. Here’s a quick look

Question 14

Divi Facebook Like Button Module

Accepted Answer

Add a Facebook Like Button in your posts, so your visitors are encouraged to Like/Recommend or even share your content on Facebook. A single click on the Like button will ‘like’ pieces of content on the web and share them on Facebook. You can also display a Share button next to the Like button to let people add a personal message and customize who they share with.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/91srggkieJ/dsm_showcase_facebook_like_button_module.png (dsm_showcase_facebook_like_button_module.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/z2zccqzDCp/dsm-fb-like-button-module-showcase-467x1024.png (dsm-fb-like-button-module-showcase-467x1024.png)

Facebook APP ID

The Facebook Like Button module uses the Facebook APP ID and requires a Facebook APP ID to function. Before using all Facebook module, please make sure you have added your Facebook APP ID inside the Divi Supreme Plugin Page. You can go to Facebook Developer and click on Create New App to get one. You can also see this guide for more help here.

URL

Here enter the URL of your Facebook Page

Layout

Change the type of Layout from 4 Different Layouts:

Standard - Will show the like button and number of likes separated.
Button Count - Will show the Like button and Like counts in the same box.
**Button **- Will only show the like button.
Box Count - Wil show the Like button and count on top and bottom separated.
Color Scheme - Change the Color Scheme of the Like Button to Light or Dark.

Show Faces

Choose whether to show faces or not(Only Standard Layout).

Action

The verb to display on the button. It can be either like or recommend.

Show Share Button

Specifies whether to include a share button beside the Like button.

Size

Change the Size of the button to either small or Large.

Design Options

There’s no option for this module in the Design Options. But you can still add Border, Corner Radius, Box Shadow and more…

Advanced Options

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

Question 15

Divi Easy Theme Builder Extension

Accepted Answer

Introducing Easy Theme Builder, the only extension to fix your issues with the Theme Builder while creating Header, using this extension you can easily enhance the Functionality of Header Providing you easy switches to turn on or off a specific feature.

You can easily create have these functionalities using this extension:

Fixed Header – Turn your Theme Builder header into a fixed one. With just a few clicks, you can turn your static custom-built header into a fixed one that follows your visitors throughout their stay on your website.
Shrink On Scroll – Shrink the Theme Builder header’s height when your visitors are scrolling. It helps reduce the space the Theme Builder header takes up in your visitors’ viewport height. No coding required!
Switching Logo On Scroll – You can switch your header logo when your visitors are scrolling. With just a few clicks, you can have a different logo customized specially for header, This gives you more control over the design of your site.

How to use

Let’s see where we can find this extension settings and how to use it.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/SvkuN7EJyE/Easy%20Theme%20Builder.png (Easy Theme Builder.png)

Theme Builder Header

Configure Theme Builder Header settings here.

Enable Fixed Header

Obviously, this will make your Header always Fixed on top even when you scroll down. For developers, the fixed header CSS Class Selector is “.dsm_fixed_header“

Disable on

You can select on which device you don’t want to make your Header Fixed. You can even select Tablet or Mobile.

Push Body Down

This will calculate the Divi Theme Builder Header height automatically and apply the height to the body to prevent the first section from overlapping. This will push the first section down based on the header height. This is not needed if you have a transparent background for the header.

On Scroll Threshold

You can define when the header should take effect after viewport. (Default: 200)

Scrolling

Here you can make changes to the element on scroll.

Enable Scrolling Options

This will enable the scrolling elements configured below. For developers, the active scroll CSS Class Selector is ".dsm_fixed_header_scroll_active"

#1 Section Background Color

Change the background color for the first section in the Header on scroll.

#2 Section Background Color

Change the background color for the second section in the Header on scroll.

Show Box Shadow on Scroll

This will hide the box shadow on page load and show on shrink threshold. You should define the Shadow in the Theme Builder section settings.

Shrink

Here you can make changes to the shrink elements.

Enable Shrink on Scroll

This will shrink your Divi Theme Builder Header and stays fixed by decreasing the height of the Header when you scroll down. For developers, the active shrink CSS Class Selector is “.dsm_fixed_header_shrink_active“

Shrink Section Padding (px)

If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the section in the Header when shrinked.

Shrink Row Padding (px)

If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the row in the Header when shrinked.

Shrink Menu Module Padding (px)

If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the menu module when shrinked.

Let’s see how this Padding works, Let’s say you’ve 20px padding added to the section of the Header and when you’ll put 10px in the “Shrink Section Padding (px)” field it will remove that 20px from the section and will add 10px there. That’s how it works.

Shrink Image (%)

If Shrink on Scroll is enabled, you can define a max-width in percentage(%) value when shrinked for the Logo Image.

Shrink Logo Image

If Shrink on Scroll is enabled, you can change the logo image when shrinked. So you’ll have a different logo when scrolling down.

Question 16

How to show a Popup Globally

Accepted Answer

If you want to show a Popup Globally on your site then you must follow this guide. We'll see how to show the Popup you've created Globally on your site. It could be a Sale Notice Popup, Important Notice or anything.

We can use the Divi's Theme Builder to show the Popup globally. Just Edit your Global Header or Footer as both shows on your whole site so will the Popup. Let's Edit the Global Footer.

Once you've opened the Module settings, you can go to Advanced tab -> Visibility -> Use Popup and set up the Popup the way you like.

Hope you'll found it useful, Let us know If you need any help. Have a great day!

Question 17

Divi Business Hours Module

Accepted Answer

Want to add Business hours to Divi? And you are looking for some Plugin in the WordPress Repository? Divi Supreme got a new Module Called Business Hours, with this Module for Divi you can easily add business hours to Divi Builder without installing any sort of plugin. The setup is very simple and you can easily make attractive Business hours Section in Divi.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/N7sgAnVHGu/Showcase.png (Showcase.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/DTuF0iZTkT/dsm_bussiness_hours_module.png (dsm_bussiness_hours_module.png)

Business Hours

You can make Business hours of your choice just click on +Add New Item and then Choose Days and Time of your Business. You can add as many items you want by clicking on the +Add New Item button.

Design Options

Every Divi module has a long list of design settings that you can use to change just about anything.

In the Design Option, you can style your module in different ways that came by default with Divi but some options that are added by Divi Supreme plugin are these:

Day Text:

This is where you can style the Day text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Day Text looks.

Time Text

This is where you can style the Time text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Time Text looks.

Separator

You can add a separator line between Day and time from 8 different selections.

Weight: You can change the weight of the line i.e 2px

Color: You can change the color of the line

Gap Spacing: You can change the gap spacing between the Day and Time Text.

Divider

You can add a Divider underneath every Business hours item.

Spacing

Item Spacing: This is where you will choose how much spacing should be added to business hours. Padding is the space added inside of your business hours items.

Advanced Options

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

Business Hours Item Content

Text

Time

Here put the time period you want to set for your business.

Day

Here put the Day name.

Business Hours Design Options

In the Design option, you can change font, colors and many more of a particular item.

Day Text:

This is where you can style Day text. As mentioned before.

Time Text

This is where you can style the Time text. As mentioned before.

Business Hours Item Advanced Options

Use the advanced options to give your Business Hours Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling.

Question 18

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 19

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 20

Divi Library Widget Extension

Accepted Answer

At times, you wish to add Divi modules right inside Sidebar Widget and with this extension, you can add any Divi Library Layout to Your Widget Area – Sidebars, Footer or any that you’ve created.

Before Using

Make sure to activate the extension by going to Divi Supreme -> "Enable Divi Library Widget" and enable it.

Usage

To use the Divi Library Widget extension, go to Appearance -> Widgets and there you'll find a new widget "Divi Library Widget". Just drag it and drop it to the place where you want to show It can be Sidebar, Footer etc.

Cheers!