Question 1

Divi Facebook Feed Module

Accepted Answer

Add Your Facebook Page Feed easily without having to embed them again.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/c3dV3Y5e7F/showcase-3-768x1017.png (showcase-3-768x1017.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/MXvfmIP55F/dsm-facebook-feed-653x1024.png (dsm-facebook-feed-653x1024.png)

APP ID

Enter the Facebook App ID here. You can go to https://developers.facebook.com/ and click on Create New App to get one. It is a must to provide a Facebook App ID which required to use this module.

Facebook Page URL

The URL of the Facebook Page

Tabs

Using this option you can add more tabs to the Facebook Feed Module. You can add these tabs:

Timeline
Events
Messages

Hide Cover Photo

Hide cover photo in the header

Use Small Header

Use the small header instead

Show Face Pile

Show profile photos when friends like this

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.

Alignment

Here you can choose to have your facebook feed aligned to the left, right or center.

Sizing

Height

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.

Setup Facebook App ID

You will need your own Facebook account in order to create the Facebook App ID so ensure that you have created a free account by going to http://www.facebook.com first before starting this guide.

Step 1: Login to Facebook and go to developers site

Step 2: Create Facebook Application

Step 3: Give it a name, like “Divi Supreme” and click Create App ID:

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/bzA0MebVJB/dsm-facebook-app-name-1024x468.png (dsm-facebook-app-name-1024x468.png)

Step 4: Navigate to Settings > Basic

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/4GnFERpfic/dsm-facebook-app-basic-1024x626.png (dsm-facebook-app-basic-1024x626.png)

Step 5: Obtain Facebook APP ID

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Wxuu6Zqwwq/dsm-facebook-app-id-1024x277.png (dsm-facebook-app-id-1024x277.png)

Before copying the APP ID, make sure you also change the status to LIVE. That’s all!

Question 2

Divi Image Module

Accepted Answer

The Supreme Image allows you to transform the image using 3D transformation. Rotate it like the way you always wanted without coding.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/pIdX7QMo0I/showcase-8-1002x1024.png (showcase-8-1002x1024.png)

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.

Link

Open in Lightbox

Here you can choose whether or not your image will open in a Lightbox when clicked. If enabled, then your image will “zoom in” to their full size when clicked inside a modal window. This is a great feature for portfolios.

Link URL

Place a valid web URL in this field to turn your Image into a link. Leaving this field blank will simply leave your image as a static element.

Use as Video Popup

Enable this option if you want to show a video in overlay when user clicks on the Image. You'll then prompted to enter the URL of the Video you want to show in the overlay

Transform & Rotation

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Q25d9ms6V0/dsm-image-705x1024.png (dsm-image-705x1024.png)

Perspective

The perspective CSS property gives an element a 3D-space. The strength of the effect is determined by the value.

Rotate Y

Defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it.

Rotate X

Defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it.

Rotate Z

Defines a transformation that rotates an element around the z-axis without deforming it.

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.

Overlay

Image Overlay

If enabled, an overlay color and icon will be displayed when a visitors hovers over the image.

Overlay Color

Here define a color for the Overlay.

Use Icon

Enable this option if you also want to show an icon in the overlay of image when hover.

Overlay Icon Color

Here you can define a custom color for the overlay icon

Icon Picker

Select an Icon from Divi Icon library here.

Show overlay on Hover

Enabling this option will only show the Overlay when hover to image. You can disbale this option if you want to always show the Overlay.

Overlay Rounded Corners and Border

You can then add Corner Radius and Border to the overlay if you like

Alignment

Image Alignment

Here you choose which direction your image floats within the column. You can float the image left, right or keep it centered.

Always Center Image On Mobile

Often times small images are more pleasing to the eye on mobile devices when they are centered. As columns break down, images that were aligned the left or right in smaller columns become orphaned when the columns break down and become 100% width. Enabling this column with force images to align to the center of the column on mobile without affecting the image alignment on desktop computers.

Advanced Options

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

Question 3

Divi Breadcrumbs Module

Accepted Answer

Display a hierarchical representation of navigation links and make your site’s navigation easier to follow, add breadcrumbs to your site to improve the user’s experience, and yeah It's good for SEO too.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/kAzqTvHJT7/dsm-breadcrumbs-content-option.png (dsm-breadcrumbs-content-option.png)

BreadCrumbs

Show Custom Home

Enable this option If you want to show a Custom Text for the Home Link.

Show Home Icon

Enable this option If you want to show an Icon along with the Text of Home link. You'll see an Icon Picker where you can choose any icon from Divi Icon Library for your Home Link.

Custom Separator Icon

Enable this option If you want to set a Custom Icon for the Separator. You'll see an Icon Picker where you can choose any icon from Divi Icon Library for your Separator.

Design Options

Alignment

Here you can change the Alignment of the Breadcrumbs, enable the responsive option to set a different alignment for Mobile Devices.

Items

Here you can design the Items/Links in the Breadcrumbs, you can add Background Color, Padding, Border Radius, Box Shadow and more.

Item Background Color

Here you can define a custom Color for the Links/Items in the Breadcrumb.

Bottome Gap

Add a gap between Breadcrumbs Items/Links if the structure of the Breadcrumbs is longer than the space given to it.

Items Padding

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

Question 4

Divi Image Hotspots Module

Accepted Answer

Adding Beautiful Image Hotspots was never easier in Divi Builder but now it’s super easy. Image Hotspots Module will let you add Hotspots to your image, if you ever wondered to add more info to your image then this module will be helpful.

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

Content Options

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

Image

First thing first, you will have to add an image here from your Media Library and then start adding Hotspots to the image.

Adding Hotspots to the Image

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

See below for individual Image Hotspot Item settings.

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

Design Options

If you want to make all your hotspots look the same then you can style them from here not Item Design Options but if you want to make them look different from each other then style each of them from the Item Design Options. All the Designs you’ll do here will be applied to all Hotspots.

Hotspot text

If you have Hotspot type text then here you’ll be able to change its color, size and weight, etc.

Hotspot Settings

Trigger Event

Here you can change the hotspot trigger event. You have two options:

Mouse Enter - Will show the tooltip on hover.
Mouse Enter & Click - Will show the Tooltip on Hover and even If you click on the Hotspot It will keep showing.
Mouse Enter & Focus - Will show the Tooltip on Hotspot Hover and If you click on the hotspost will hide the Tooltip.
Click - Will show the tooltip on click.
Click & Focus - Will show the tooltip on click, Click on hotspost again will hide the Tooltip.

Padding

Here you can add padding to the Hotspot.

Border Radius and Border

Add some border-radius and Simple Borders to the hotspot.

Hotspot Icon

Icon Color

Change the color of the Icon here.

Icon font Size

Change the size of the Icon from here.

Tooltip Settings

Background Color

Add a Background color here to the tooltip.

Tooltip Padding

Add some padding to the tooltip here.

Tooltip Max Width

Change the max-width of the Tooltip here.

Tooltip Delay Show

Add some delay for the tooltip to show by just sliding the slider.

Tooltip Delay Hide

Add some delay for the tooltip to hide by just sliding the slider.

Tooltip Heading Text

If you have added Heading text in the Text of the Tooltip then you can style that here the same you style other Heading texts in Divi.

Tooltip Body Text

Here you can style the Tooltip Body text. You can change the font color, size, weight and more.

Image

Alignment

Change the alignment of the image here.

Image Box Shadow

Add Shadow to the image here.

Sizing

Force Fullwidth

Enabling this option will Force the image to be fullwidth. After that if you want to control the width of the image according to your custom needs you'll then see Width Option to do so.

Hotspot Item Content Options

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

Hotspot

Type

Change the type of the Hotspot button. It can an Icon or Text.

Icon - If you'll select Hotspot type as Icon you can then choose an Icon for the Hotspot from Divi Icon Library.
Image - If you'll select Hotspot type as Icon you can then choose an Image from Media Library to use as Hotspot.
Hotspot Text - If you select Hotspot type to Text a text input field will appear and you’ll be able to add text to Hotspot than Icon.

Tooltip

Use Tooltip

Enable this Option, If you'd like to use Tooltip on Hover. You can disable it If you don't want to show Tooltip on hover.

Content

Here you’ll be able to add text to appear in the tooltip.

Background

Here you can change the background color of the Hotspot, you can add a solid Color, Gradient, Image or Video the Hotspot.

Hotspot Item Design Options

Hotspot Text

If you have chosen the Hotspot type as Text then you’ll be able to style that text here the same way as you always style.

Hotspot Settings

Left Position

Using this Position option you’ll be able to move the Hotspot from right to left or left to right by sliding the slider.

TOP Position

Using this Position option you’ll be able to move the Hotspot from top to bottom or bottom to top by sliding the slider.

Padding

Add some padding to the hotspot to let it take more space on the image.

Border Radius and border

Here you can add border-radius or simple border to the hotspot.

Hotspot Image

If you'll choose Hotspot Type as Image this will appear to style the Image.

Hotspot Image width

Here you can change the width of the Image

Hotspot Image Rounded Corners

Add Rounded corners to Image here.

Hotspot Image Border

Here you can add Border to the Image.

Hotspot Image Box Shadow

Add Shadow to image here to make it look more natural.

Hotspot Icon

If you'll choose Hotspot Type as Icon this will appear to style the Icon.

Icon Color

Change the color of the Icon here.

Icon font Size

Change the size of the Icon from here.

Tooltip Settings

When you’ll hover over to the hotspot a tooltip shows and that can be styled here.

Tooltip Animation

Here you can choose an animation for the Tooltip from 5 different animations.

Background color

Change the tooltip background color here.

Padding

Add some padding to the tooltip here.

Placement

Here you can choose the placement of the tooltip. The Tooltip can be placed on Top, Bottom, Left or Right of the Hotspot.

Tooltip Max Width

Change the max-width of the Tooltip here.

Tooltip Heading Text

If you have added Heading text in the Text of the Tooltip then you can style that here the same you style other Heading texts in Divi.

Tooltip Body Text

Here you can style the Tooltip Body text. You can change the font color, size, weight and more.

Tooltip Item Advanced Options

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

Question 5

Divi Supreme Circle Info Module

Accepted Answer

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

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

Content Options

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

Adding Circle Info Items

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

See below for individual Circle Info Item settings.

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

General

Enable Autoplay

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

--Speed

Here you can adjust the speed of the Autoplay.

--Delay

Here you can adjust the delay of the Autoplay.

Trigger

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

Circle Size

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

Content Animation

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

Design Options

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

Circle

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

Content - General Tab

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

Content - Title Tab

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

Content - Description Tab

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

Circle Item - General Tab

Circle Size

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

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

Circle Item - Normal Tab

Background Color

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

** Color**

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

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

Circle Item - Active Tab

Background Color

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

** Color**

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

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

Image & Icon - Icon Tab

Icon Size

Here you can adjust the size of the Icon.

Background Color

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

Active Background Color

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

Color

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

Active Color

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

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

Image & Icon - Image Tab

Image Width

Change the Image Width here.

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

Button

Enable Use Custom Styles for the button to add custom styling to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button.

Advanced Options

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

Circle Info Item Content Options

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

General

Title

Here you can add your Title for the Circle Item.

Use Icon

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

Content

Title

Your Title for Content goes here.

Content

Here you can add your Description for Content.

Button Text

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

Button URL

Change the Button URL here.

Button Link Target

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

Circle Info Item Design Options

Circle Item - General Tab

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

Circle Item - Normal Tab

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

Circle Item - Active Tab

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

Content - General Tab

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

Content - Title Tab

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

Content - Description Tab

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

Image & Icon - Icon Tab

Icon Size

Here you can adjust the size of the Icon.

Background Color

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

Active Background Color

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

Color

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

Active Color

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

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

Image & Icon - Image Tab

Image Width

Change the Image Width here.

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

Button

Enable Use Custom Styles for the button to add custom styling to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button.

Circle Info Item Advanced Options

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

Enhancing Circle Info Responsiveness for Mobile/Tablet View

To optimize the circle info for mobile and tablet devices, consider enabling the responsive option and manually resizing the Circle Size. For visual guidance, a helpful video has been provided below.

Note: The appearance in Divi Builder may differ, but the circle info should display correctly on the front end.

Question 6

Divi Caldera Forms Module

Accepted Answer

Now with Divi Supreme Caldera Forms module, you can select your contact form from the dropdown list without having to go back and forth switching between Visual Builder and Caldera Forms setting page to copy the shortcode and adding it to the Divi Code Module. Style your Title, Body, Horizontal Ruler (HR Tag), Labels, Field Description, Input, Textarea, Select, Placeholder, Radio, Checkbox, Basic File, Error Messages, Success Message, Submit Button, Advanced File Button and more coming your way.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/F9zi2IKWn5/showcase-1024x638.jpg (showcase-1024x638.jpg)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/MswjMwJv3u/dsm-caldera-forms-content-options.png (dsm-caldera-forms-content-options.png)

That "Note" at the top means that you'll need to disable the Default Caldera Forms styling by going to Caldera Forms and click "General Settings" at the Top and disable all the switches from here.

Caldera Forms

Caldera Form

Select a form from the dropdown all of your forms that you’ve created using the Caldera form plugin will appear in the Dropdown menu. If you haven’t created a form already Hover over to Caldera Form > Forms and click on the New Form button at the top.

Show Error & Validation Messages

This will show the error and validation messages on the Visual Builder for styling purposes.

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

Header Text

Here you can play around with the header text you may have added to the Form while creating the Form.

Body Text

Here you can play around with the body/description text you may have added to the Form while creating the Form.

Horizontal Ruler (HR Tag)

Color

Here you can change the color of the Divider line in the Form.

Gap

You can add spacing to the top and bottom of the Divider line in the form.

Label

Bottom Spacing

Add some spacing to the bottom of the Label.

Required Asterisk Color

Change the color of the (*) with the showing with the label which indicates that this field is Important to be filed.

And else you can change the color, size, font and more of the Label text.

Field Description

If you’ve added a description to the field(Shows down of the field) then you can style it here. You change the background color and size, font, weight and more of the description text.

Input, Textarea and Select

All the changes you’ll make here will be applied to all the form fields including Name, Email, Message box and to the Drodpwn select field as well.

Margin Bottom

Add some spacing at the bottom of all the fields.

Background Color

Change the Background color of the form Fields and Select box.

You can change the input Font, Size, color and more of the text will be entered in the Field.

Field Rounded Corners, Border and Box Shadow

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

Input, Textarea and Select Focus

When you’ll try to write something in the form and wanted to add some attention to the field then use this option to change the size, weight, and more of the text Input.

Placeholder

If you are using a placeholder on your Contact Form, this is where you can style the placeholder such as font, size and more.

Radio & Checkbox

If you are using a Radio & Checkbox on your Contact Form, this is where you can style the Radio & Checkbox such as font, size and more.

Custom Radio/Checkbox Styles
You can switch this option to add custom styles to the Radio/Checkbox.
Checked Color
You can change the color of the circle icon when checked here.
Checked Background Color
You can change the color of the background when checked here.
Background Color
You can change the color of the background for the Radio/Checkbox here.

Basic File

If you’ve added a Basic file uploader to the form then it can style here. You can add Padding, Change the background color, font, size, weight and more.

Error Messages

Here you can change the error message background color, font, size and more. You can also add drop shadow, Rounded corners and Borders to the Error message.

Success Messages

Here you can change the Success message background color, font, size and more. You can also add drop shadow, Rounded corners and Borders to the Success message.

Submit Button

Button Alignment

Change the alignment of the button to Left, Center or Right.

Margin Top

Add some top margin to the button here.

Use Custom styles for the button

You can switch this option to style the Submit button the same way you style the Divi Button or any button in Divi Builder.

Advanced File Button(1.0)

Use Custom styles for the Advanced File Button(1.0)

Advanced Options

Use the advanced options to give your Caldera Forms 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 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 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 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.

Question 10

Divi Lottie Module

Accepted Answer

Lottie is an iOS, macOS, Android, and React Native library that renders After Effects animations in any native app. And we’re bringing it to Divi with a Custom Module that’ll let you add beautiful animations with ease.

Click here to see live demo.

Content Options

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

Lottie JSON File

Here you’ll need to upload the .JSON File that you’ll download from LottieFiles and you don’t have to worry about uploading a .JSON File because Divi Supreme already did it for you.

Loop

If you want to keep running/Looping enable this option.

Number of Times

Here you can specify the number of times the Animation will Loop. If you enter 2 the animation will loop 2 times and then it will stop.

Direction

Here you can change the direction of the animation it maybe either Normal or Reverse.

Speed (More is Faster)

Here you can change the speed of the animation the more value you’ll enter here the more speed of the animation will be.

Trigger

Enable this option to trigger the animation on Hover or Click.

Trigger Method

Play Animation on Hover/Mouse over - This option will let you play the Lottie Animation when you hover the mouse on the Animation.
Play Animation on Click - This option will let you play the Animation on click. So when you'll click the Animation it will play.
Play Animation on Scroll - (A great addition) This will let you animate the Animation on Scroll. Create something extraordinary.

Relative To

Entire Page - You can relate the animation Scroll to Entire Page, more option will be added in upcoming Updates!

On Mouseout action

This option will show if you select the Animation Trigger method as "Hover". And it will let you do different things with Animation like Stop, Pause or Reverse the Animation when you move the mouse away from the Module.

Animate in Viewport

Here you can play around with animation to play at a specific viewport.

Design Options

Because It’s an animation you don’t need to do any design settings here. But if you want then you can add a Box Shadow, Corner Radius and Play around with other settings here.

Advanced Options

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

Question 11

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

Divi Blog Carousel Module

Accepted Answer

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/rHI8G12zbg/blog-carousel-content-1.png (blog-carousel-content-1.png)

Post Count

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

Included Categories

Choose Which post categories you want to show, you can select a particular category or choosee "All Category" to show all category posts.

Date Format

Change the Date format from here the way you like.

Elements

Show Featured Image

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

Show Title

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

Show Excerpt

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

Excerpt Text

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

Show Date

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

Show Category

Enable this switch If you want to show Post Categories in the Carousel for each post.

Meta Separator

Here you add a custom Meta Separator.

Author

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

Readmore Button

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

-Readmore Text

Add a custom Text for Readmore button here.

-Read More Link Target

From here you'll be able to change the Link Target to open in the Same Tab or in a New Window.

Show Bottom Meta Elements

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

-Bottom Date

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

-Bottom Author

You can also hide post Author Name by disabling this switch.

Carousel Effect

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

Slide
Coverflow
Flip
Cube

Carousel Direction

You can change the Carousel Content Direction from here, It can be either "Left to Right" or "Right to Left".

Columns

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

Use Multiple Row

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

Centered Mode

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

Spacing

Add some spacing between carousel Items.

Transition Duration

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

Infinite Looping

Enabling this option causes the carousel to loop. Means when you’ll click on the arrow to go to next slide it will then keep looping and shows all the item from first to end. Disabling this will show only the number of Posts and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow.

Autoplay

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

-Autoplay Speed

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

-Pause on Hover

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

Pagination

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

Navigation

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

Use Equal Height

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

Design Options

Post Item

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

Post Item Padding

Add padding around the Post Item here.

Background Color

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

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

Post Thumbnail

Thumbnail Height

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

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

Post Entry Title

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

Post Entry Summary

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

Post Entry Meta

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

Alignment

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

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

Navigation

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

Navi Vertical Position

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

Left Navigation Position

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

Right Navigation Position

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

Navi Arrow Icon Size

Here you can change the Size of the arrows.

Custom Prev Arrow Icon

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

Custom Next Arrow Icon

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

Arrow Color

Here you can change the Arrow Color.

Arrow Background Color

Change the Arrow Background color from here.

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

Pagination

This is where you can style the Pagination/Dots.

Pagination Position

Change Vertical position of the Pagination here.

Pagination Color

Change the color of the Pagination here.

Pagination Active Color

Change the Active Pagination color from here.

Pagination Button Style

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

Default
Dynamic
Progress Bar

Bottom Meta Items

Here you can play around with Bottom Meta Items styling.

Image Width

Change the Author Image width from here.

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

Overlay

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

Overlay Icon Color

Change the Icon Color here.

Overlay Icon Size

Change the Size of the Icon from here.

Overlay Background Color

Change the Overlay Background Color here.

Advanced Options

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

Question 13

Fix the "Update Package Not Available" Issue!

Accepted Answer

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

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

Here's a quick Fix

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

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

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

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

Question 14

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 15

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 16

Divi Text Rotator Module

Accepted Answer

The Divi text rotator module allows you to take any text and rotate it with different phrases so you can create attractive headlines for your Divi site. Choose from any 36 animations to make your message pop.

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/qIh30mtsZq/Text-Rotator-Module-Content-Options.png (Text-Rotator-Module-Content-Options.png)

Rotator Text

Here you can add as many texts as you want that will have the Rotating Animation effect. You can click on the + Add New Item button to add new text that will get the Rotating effect.

Before Rotator Text

Here you can add some text that will be shown before the Rotator Text and it will not have any Animation effect.

After Rotator Text

Same goes for this, the text you’ll add here will be shown after the Rotator text and will not get any animation.

Rotate Animation

This is where you can change the animation effect of the Rotator Text. You get over 36 Animations to choose from.

Rotate Speed

Here you can specify the Speed of the Animation of the Rotating text.

Pause on Hover

When you’ll enable this option It will pause the Rotating animation on hover/mouseover.

Change on Click

You can enable this switch to let users change the Word when they click on the Rotating text.

Design Options

Heading Settings

Heading HTML Tag

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

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 Rotator Text and Before/After Text.

Before, Rotator and After Text

You can easily style the Before, Rotator 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 Text Rotator Module to style the text’s background, padding and stuff.

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

Margin and Spacing: Add some Margin and Spacing to the Before, Rotator and After text, if you want to add some spacing on both sides of Before, Rotator 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.
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, Rotator and After text by adding different colors, text-shadows, border, border-radius and more to each text.

Rotator Text Module Advanced Options

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

Question 17

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 18

Divi Blob Shape Image Module

Accepted Answer

Fan of Blob Shaped Images? We got your back!

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

Content Options

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

Image

Insert your Image here.

Blob Shapes

Choose any Blob Shape from 13 different Shapes.

Overlay Content

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

Title

Add your Title here for the Overlay Content.

Description

Your description for the Overlay Content goes here.

Show Content on Hover

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

Design Options

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

Blob Image Settings

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

Size

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

Position

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

Blob Image Height

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

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

Overlay

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

Use Overlay

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

Use Gradient Overlay

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

Overlay Text

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

Advanced Options

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

Question 19

Divi Text Badges Module

Accepted Answer

This will show a badge before or after the text. A great way to show highlighted/important text badge.

Content Options

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

Badges Text

This field is where you can enter the badge of your text.

Badges Placement

Here you can define whether the badge should be before or after the main text.

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

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 Text Badges text module will appear with a label that reads ‘Supreme Text Badges’ 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.

Main Text

You can style the Main text here. You can play around with changing the font, size, color, weight and more of the Main text.

Badges Text

Here’s where you can style the badges appearance.

Background Color

Gap

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 20

Divi Post Carousel Module

Accepted Answer

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

Content Options

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

Post Type

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

Post Count

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

Date Format

Change the Date format from here the way you like.

Elements

Show Featured Image

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

Show Title

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

Show Excerpt

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

Excerpt Text

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

Show Date

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

Meta Separator

Here you add a custom Meta Separator.

Author

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

Readmore Button

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

-Readmore Text

Add a custom Text for Readmore button here.

Show Bottom Meta Elements

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

-Bottom Date

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

-Bottom Author

Carousel Settings

Carousel Effect

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

Slide
Coverflow
Flip
Cube

Columns

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

Use Multiple Row

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

Centered Mode

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

Spacing

Add some spacing between carousel Items.

Transition Duration

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

Infinite Looping

Enabling this option causes the carousel to loop. Means when you’ll click on the arrow to go to next slide it will then keep looping and shows all the item from first to end. Disabling this will show only the number of Posts and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow.

Autoplay

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

-Autoplay Speed

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

-Pause on Hover

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

Pagination

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

Navigation

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

Use Equal Height

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

Design Options

Post Item

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

Post Item Padding

Add padding around the Post Item here.

Background Color

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

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

Post Thumbnail

Thumbnail Height

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

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

Post Entry Title

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

Post Entry Summary

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

Post Entry Meta

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

Alignment

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

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

Navigation

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

Navi Vertical Position

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

Left Navigation Position

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

Right Navigation Position

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

Navi Arrow Icon Size

Here you can change the Size of the arrows.

Custom Prev Arrow Icon

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

Custom Next Arrow Icon

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

Arrow Color

Here you can change the Arrow Color.

Arrow Background Color

Change the Arrow Background color from here.

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

Pagination

This is where you can style the Pagination/Dots.

Pagination Position

Change Vertical position of the Pagination here.

Pagination Color

Change the color of the Pagination here.

Pagination Active Color

Change the Active Pagination color from here.

Pagination Button Style

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

Default
Dynamic
Progress Bar

Bottom Meta Items

Here you can play around with Bottom Meta Items styling.

Image Width

Change the Author Image width from here.

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

Overlay

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

Overlay Icon Color

Change the Icon Color here.

Overlay Icon Size

Change the Size of the Icon from here.

Overlay Background Color

Change the Overlay Background Color here.

Advanced Options

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