Question 1

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 2

Divi Read More Extension

Accepted Answer

This will allow you to Collapse Long Texts into Nested form. Providing you more way to Showcase Long Texts or Paragraphs on your Divi Website.

Currently, the available supported modules are listed below:

Text Module
Blurb Module
Call-to-action Module
Blog Module

Before Using ReadMore Extension:

Before you start using the Read More Extension make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable ReadMore Content and the Click on the Save Changes button.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/oJb6m3Rcv6/readmore%20content%20enable.png (readmore content enable.png)

Usage

To use Read More Extension, go to any of the supported modules (listed above) settings and navigate to the Advanced Tab Scroll to Visibility and look for Use Read More Switch.

Use Read More

This will enable or disable the Read More extension.

Show on Mobile Only:

Using this you can Collapse text for Mobile Devices only making it more Responsive.

Collapsed Height:

You can select the Height of the text to be shown and after the height will end the Read More text will show to show the full text.

Read More Text:

Enter your own Text for the Read More Text e.g. Show Full Text, Continue Reading.

Close Text:

Enter your own Text for the Close Text e.g. Show Less Text, Stop Reading.

Designing the Read More Text

Font: Change the Font of the Read More Text.
Font-weight: Change the Weight of the Read More Text.Font Style: Change the Style of the Read More Text.
Font Style: Change the Style of the Read More Text(Italic, UpperCase, Underline and more).
Text-Alignment: Change the Alignment of the Read More Text.
Text Size: Change the Size of the Read More Text.
Link Text Color: Change the Color of the Read More Text.

Use Shadow

It will add a very Nice Shadow to the text will make it more attractive for the visitors

Question 3

Divi Post Carousel Module

Accepted Answer

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

Content Options

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

Post Type

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

Post Count

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

Date Format

Change the Date format from here the way you like.

Elements

Show Featured Image

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

Show Title

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

Show Excerpt

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

Excerpt Text

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

Show Date

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

Meta Separator

Here you add a custom Meta Separator.

Author

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

Readmore Button

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

-Readmore Text

Add a custom Text for Readmore button here.

Show Bottom Meta Elements

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

-Bottom Date

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

-Bottom Author

Carousel Settings

Carousel Effect

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

Slide
Coverflow
Flip
Cube

Columns

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

Use Multiple Row

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

Centered Mode

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

Spacing

Add some spacing between carousel Items.

Transition Duration

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

Infinite Looping

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

Autoplay

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

-Autoplay Speed

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

-Pause on Hover

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

Pagination

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

Navigation

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

Use Equal Height

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

Design Options

Post Item

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

Post Item Padding

Add padding around the Post Item here.

Background Color

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

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

Post Thumbnail

Thumbnail Height

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

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

Post Entry Title

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

Post Entry Summary

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

Post Entry Meta

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

Alignment

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

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

Navigation

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

Navi Vertical Position

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

Left Navigation Position

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

Right Navigation Position

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

Navi Arrow Icon Size

Here you can change the Size of the arrows.

Custom Prev Arrow Icon

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

Custom Next Arrow Icon

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

Arrow Color

Here you can change the Arrow Color.

Arrow Background Color

Change the Arrow Background color from here.

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

Pagination

This is where you can style the Pagination/Dots.

Pagination Position

Change Vertical position of the Pagination here.

Pagination Color

Change the color of the Pagination here.

Pagination Active Color

Change the Active Pagination color from here.

Pagination Button Style

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

Default
Dynamic
Progress Bar

Bottom Meta Items

Here you can play around with Bottom Meta Items styling.

Image Width

Change the Author Image width from here.

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

Overlay

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

Overlay Icon Color

Change the Icon Color here.

Overlay Icon Size

Change the Size of the Icon from here.

Overlay Background Color

Change the Overlay Background Color here.

Advanced Options

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

Question 4

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 5

Divi Supreme Circle Info Module

Accepted Answer

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

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

Content Options

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

Adding Circle Info Items

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

See below for individual Circle Info Item settings.

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

General

Enable Autoplay

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

--Speed

Here you can adjust the speed of the Autoplay.

--Delay

Here you can adjust the delay of the Autoplay.

Trigger

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

Circle Size

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

Content Animation

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

Design Options

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

Circle

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

Content - General Tab

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

Content - Title Tab

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

Content - Description Tab

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

Circle Item - General Tab

Circle Size

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

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

Circle Item - Normal Tab

Background Color

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

** Color**

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

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

Circle Item - Active Tab

Background Color

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

** Color**

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

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

Image & Icon - Icon Tab

Icon Size

Here you can adjust the size of the Icon.

Background Color

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

Active Background Color

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

Color

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

Active Color

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

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

Image & Icon - Image Tab

Image Width

Change the Image Width here.

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

Button

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

Advanced Options

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

Circle Info Item Content Options

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

General

Title

Here you can add your Title for the Circle Item.

Use Icon

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

Content

Title

Your Title for Content goes here.

Content

Here you can add your Description for Content.

Button Text

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

Button URL

Change the Button URL here.

Button Link Target

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

Circle Info Item Design Options

Circle Item - General Tab

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

Circle Item - Normal Tab

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

Circle Item - Active Tab

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

Content - General Tab

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

Content - Title Tab

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

Content - Description Tab

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

Image & Icon - Icon Tab

Icon Size

Here you can adjust the size of the Icon.

Background Color

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

Active Background Color

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

Color

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

Active Color

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

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

Image & Icon - Image Tab

Image Width

Change the Image Width here.

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

Button

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

Circle Info Item Advanced Options

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

Question 6

Divi Library Shortcodes Extension

Accepted Answer

If you ever wanted to use a Divi Module inside another module then this extension will be helpful. Using this Extension you can easily put a Divi Layout(Saved in your Library) inside of any module where you can write text. When you’ll enable this extension you’ll then see a Shortcode added for your Layout you’ve saved in Divi Library. This is a free extension which means it can also be found in our Free Plugin.

Before Using Divi Popups:

Before you start using the shortcode extension make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable Divi Library Shortcodes and the Click on the Save Changes button.

Usage

When you’ll enable this extension from the plugin settings you can open up the Divi Library and you’ll see shortcode for each layout in the Library.

Question 7

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

Set a padding around the Item/Link from here, useful If you've added a Background color to the Item.

You can design the Item/Link color, font size and more.

Rounded Corners and Borders

Add Rounded Corners or Borders to the Item/Link here.

Box Shadow

Set a custom Shadow to show for the Links/Items in the Breadcrumbs. Enable Hover option to show shadow on Hover.

Home Icon

Here you'll be able to design the Home Icon If you've enabled it.

Icon Color

Here you can change the Color of the Home Icon. If you've enabled the option (Show Home Icon) in the Content tab.

Icon Size

Here can define a custom size for the Home Icon.

Separators

Here you'll be able to design the Separator in the Breadcrumbs.

Separators Background Color

Here you can define a custom Color for the Separator in the Breadcrumb.

Bottome Gap

Add a gap to Separator if you feel there is a need of it.

Items Padding

Set a padding around the Separator from here, useful If you've added a Background color to the Separator.

You can design the Item/Link color, font size and more.

Rounded Corners and Borders

Add Rounded Corners or Borders to the Separator here.

Box Shadow

Set a custom Shadow to show for the Separators in the Breadcrumbs.

Current

Here you'll be able to set custom design values for the Current Item in the breadcrumbs.

Item Background Color

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

Bottome Gap

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

Items Padding

Set a padding around the Current Item/Link from here, useful If you've added a Background color to the Item.

You can also design the Current Item/Link color, font size and more.

Rounded Corners and Borders

Add Rounded Corners or Borders to the Current Item/Link here.

Box Shadow

Set a custom Shadow to show for the Current Links/Items in the Breadcrumbs. Enable Hover option to show shadow on Hover.

Advanced Options

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 8

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 9

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 10

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 11

Divi SVG Animation Module

Accepted Answer

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

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

Content Options

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

General

Use SVG Code

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

SVG File

Here you can upload your SVG File.

Settings

Type

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

Delayed
Sync
One-by-One

Animate Timing Function

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

Loop

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

Unlimited

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

Trigger

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

--Trigger Type

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

Start Animation when in Viewport
Start on Hover
Start on Click

Speed

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

Delay

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

Design Options

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

Alignment

Here you can change the Alignment of your SVG Animation.

SVG

Color

You can change the Color of your Animation here.

Width

Here you can adjust the Width of the Animation.

Advanced Options

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

Question 12

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!

Question 13

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 14

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 15

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 16

Divi Image Accordion Module

Accepted Answer

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

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

Content Options

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

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

See below for individual Image Accordion Item settings.

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

Accordion Settings

Accordion Type

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

Accordion Content Animation

Choose any animation from 5 different animations for Content entrance.

Use Sequenced Animation

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

Accordion Direction

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

Accordion Height

Change Accordion height from here.

Design Options

Overlay

Overlay Color

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

Icon

Icon Color

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

Use Icon Font Size

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

Icon Image

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

Title

Title Heading Level

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

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

Description

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

Button

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

Advanced Options

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

Image Accordion Item Content Options

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

Make Item Expanded

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

Image

Add the Main Image for the Accordion here.

Use Icon

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

Title

Your Main Title goes here.

Description

Your Description content goes here.

Show Button

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

Horizontal Align

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

Vertical Align

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

Image Accordion Item Design Option

Overlay

Overlay Color

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

Title

Title Heading Level

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

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

Description

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

Button

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

Sizing

Content Width

Change the Content width from here.

Image Accordion Item Advanced Options

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

Question 17

Divi Text Divider Module

Accepted Answer

Create an organized and beautiful to read headlines with Supreme Text Divider Module. With many border styles to choose from. You can also put a text in-between the Dividers or align them to suit your design.

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

Content Options

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

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

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 Text Divider.

Text

Text Alignment

This controls the text alignment of the Text Divider.

Divider Text

You can change the Heading level of the Divider text here. And then you can style it the same way you style text in Divi.

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.

Text Gap

The Gap space between the main text and the divider.

Height

Define how much vertical space you would like your text divider module to create (in pixels).

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 18

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 19

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 20

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.

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.