Question 1

Divi Card Module

Accepted Answer

A creative Divi module to display a beautiful combination of texts, links, badge and image. With Image Hover Zoom animation, you can now impress your visitors even more.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/PnKfwIQFsH/card-module-showcase-1024x781.png (card-module-showcase-1024x781.png)

Content Options

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

Text

Title

Enter your title text here. You can take out the text if you don’t want the Title text.

Subtitle

Enter your subtitle text here. You can take out the text if you don’t want the subtitle text.

Content

Enter your description text here. You can take out the text if you don’t want the description text.

Image & Badge

Manage your Image and Badge text here.

Image

Add an image from your Library here.

Use Image as background

Enable this option to use the image as the background so you can play around with the position and Height of the image and even add hover animation to the image.

Image Height

Change the height of the image by sliding the slider.

Background Image animation

Add animation to the image from 4 different animations and to even add more in upcoming updates.

Animation Speed (in ms)

Change the Hover Background Image Speed from here in ms.

Badge Text

Add text to the Badge here. You can take out the text if you don't want the badge text. You can also add a link to the badge under the link panel.

Icon

If you want to add an Icon to the Card you can do so here.

Use Icon

Enable this switch to enable the Use of Icon for the Card Module. Once you'll enable this you'll see so many Icons to choose from.

Button

Button text

Add text to the button here you can always remove the text of the element which you don’t want.

Button URL

Add a URL to the button here.

Design Options

Layout & Alignment

Layout

Change the type of layout to Stacked or Inline.

Stacked will place the image on top and content on the bottom.
Inline will place the content Inline which means Image and content both in the same line.
Layout type Inline Settings - If you’ll select this layout type you will be able to see these options:

Width: Change the width of the image
Horizontal Content Alignment - This option will let you align the content to Top, Center or Bottom, most helpful while using the inline layout type.

Use Equal Height

Enable this option to make all the Cards match the heights, make sure to enable "Equalize Column Heights" in Row settings as well. See at the very for more details.

Image Height

You can control the height of the Image Wrapper here (not the actual image). For this option to work, make sure "Use Image as Background" is disabled in Content Tab -> Image & Badge.

Image Vertical Alignment

Here you can control vertical alignment of the Image, Top, Bottom and Center.

Image

Make changes to the image here.

Image Width

You can change the Image Width here.

Image Alignment

You can change the Image Alignment here to Left, Right or Center.

Stretch Image

Enabling this option will stretch the img tag and set a maximum width for the image. This allows for more control over the image’s display, ensuring it fits well within the module’s layout while maintaining its aspect ratio.

Image Overlay

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

Overlay Color

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

Use Icon

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

Image Rounded Corners, Border and Box Shadow

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

Badge

Change badge’s position color, background color and more here.

Position

Change the position of the badge anywhere on the Image.

Use Custom Position

Enabling this switch will let you position the badge on your own custom position on the image.

Background Color

Change the background color of the badge to your desired one.

Padding

Add padding to the badge here to expand it more.

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

Add Rounded Corners, Border and Box Shadow to Badge

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

Other Titles, Subtitle, and Body Texts

And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels.

Button

Enable Use Custom Styles for button to add custom stylings 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 Card module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

How to Equalize Card Heights

If you want to equalize card heights to the other cards in the Row, you can easily do that by going to Row settings -> Design tab -> Sizing -> and enable "Equalize Column Heights". This will equalize the Card Heights in that row.

How to Equalize Card Heights

In some cases, you'd like to have multiple cards in a row to be equal of height no matter the length of content, we've made that easy for you.

You'll need:

Enable "Equalize Column Heights" Options in Row settings.
Enable "Use Equal Height" in Card Module for each Card.

Here's a video for better understanding:

How to align buttons to the bottom

In many cases, when you've equal height cards, you'll want that buttons should be at the bottom. For that, you need to make sure that the "Equalize Column Heights" Option is enabled in the Row settings and then add the below CSS anywhere, For Example, Divi -> Theme Options -> Custom CSS box or in Page settings -> Custom CSS.

Question 2

Divi Image Carousel Module

Accepted Answer

The easy way to create a beautiful image carousel using Divi Supreme Image Carousel Module. The image carousel module is perfect for showcasing a set of images, your portfolio pieces, client logos and much more.

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/QvMi00dlvf/dsm-image-carousel-module.png (dsm-image-carousel-module.png)

Image Carousel

+Add Gallery Images

Choose multiple images from your Media Library here.

Order by

You can change the order of the images to default(show images the way you selected) or Random(Shows images randomly)

Image Size

Change the size of all the images here.

Carousel Settings

Carousel Effect

Here you can change Carousel Slide Effect from 4 different effects.

Slide
Coverflow
Flip
Cube

Coverflow Effect settings

If you'll select Carousel Effect as Coverflow you'll see these options:

Show Shadow - Adds a shadow to next Carousel Images.
Coverflow rotate - Set the Rotate amount of the next images in the slide.
**Coverflow Depth **- Increase to show more items in the carousel with coverflow effect.

Carousel Direction

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

Centered Mode

This mode will show the next image in the carousel centered means half of the image will be appearing which tells there are more items to see.

Slides to Show

Here you can change the number of images to show in one slide.

Slides to Scroll

Here you can change the number of slides to scroll when click on the arrow button to see the next items.

Slider Speed

Here you can change the speed for sliding the slider.

Use Multiple Row

You can enable this option If you want to show multiple rows of Images, lets say you enter 2 in the "Row Per Slide" field and then you'll see two Rows of Images, 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.

Autoplay

You can enable this option to slide images automatically.

Autoplay Change interval

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

Spacing

Add some spacing between carousel images.

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 images and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow.

Show Arrow

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

Show Pagination

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

Disable Touch/Dragging

Use this option to disable touch/drag to slide the Carousel.

Use Grab Cursor

Enable or Disable this option to make the mouse icon to grab cursor icon.

Lightbox

Open Image in Lightbox

Enable or Disable this option to open the images in the lightbox when click on a single image. Enabling this option will reveal some more options too.

Image Size

Here you can change the Size of the Image when opened in Lightbox.

Lightbox in Gallery Mode

Enable this option If you want a gallery in lightbox, this will show next & prev arrow in the Lightbox to switch to another Image in carousel.

Display Caption

Enable this option If you want to show Image Caption in lightbox. You can set Image caption by opening the Image in Media Library.

Design Options

Layout

Horizontal Alignment

Change the horizontal alignment of the images. If you have small and big size images in the carousel then this option would be helpful.

Element

Arrow Position

Change the arrow position to inside or outside of the carousel.

Mobile Arrow Position

Change the arrow position to inside or outside of the carousel for Mobile Devices only.

Arrow Size

Change the font size of the arrow.

Arrow Color

Change the color of the arrow.

Arrow Background Color

Change the background color of the arrow.

Pagination Placement

Here you can change the Position of the Pagination dots vertically.

Pagination Active Color

Change the color of the Active dot in the Pagination

Pagination In-Active Color

Change the color of the In-Active pagination dots here

Image

This is the place where you can add corner radius, borders, box shadow and more stuff to the carousel images.

Advanced Options

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

How to add URL to each Carousel Image

Adding a URL to the Image

If you want to add a URL to each Carousel Image you can do that easily. All you've to do is open up that Image in the Media Library and add the Custom URL to it there. So when a user will click on the Image they’ll be taken to that URL that you added to Image. It will only work within Divi Supreme Modules.

Adding Download link to the Image

If you want to let your users download a file when they click on the image you can simply enter the URL of that download file and check the option “Download as File”.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/N6VfRHIpbk/Download-as-file.png (Download-as-file.png)

That's it!

Question 3

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 4

Divi Price List Module

Accepted Answer

Create an attractive and stunning Price List for your business with easy options. Perfect for menus, catalogs, product lists and any other list of featured items.

See the Demo page for more Design of Price lists.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/ITglE0ED1v/price-list-show-case-1024x430.png (price-list-show-case-1024x430.png)

Content Options

Adding Price List

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

See below for individual Price List Item settings.

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

Design Options

Text

Vertical Alignment

This setting determines the vertical alignment of your Price List Text. Your content can either be aligned to the top, vertically centered, or aligned to the bottom.

Text Shadow

Here add nice shadow to the Pirce list text.

Title Text

Change the title text font, color, size, weight and more of the Price List item.

Description Text

Change the Description text font, color, size, weight and more of the Price List item.

Price Text

Background Color

Define a custom background color for the price text.

Padding

Add some padding around the Price text.

And else you can change the price text font, color, size and weight and more.

Price Text Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Price Text. 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 Price text.

Image

Image Width

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

Image Gap Spacing

Add some spacing between Image and Texts.

Image Rounded Corners, Border and Box Shadow

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

Separator

Style

Change the style of the line between Title text and Price text from 8 different styles.

Weight

Change the weight of the Line here.

Color

Change the color of the separator line to your own one.

Gap Spacing

Change the spacing of the line between Price text and Title text.

Sizing

Item Bottom Spacing

Add some bottom spacing between other Price list items.

Advanced Options

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

Price List Item Content Options

Text

Price

Add your Pricing here.

Title

Add your title here.

Content

Put in your description text here.

Image

Add your image to here add in your price list item.

Price List Item Design Options

Image

Image Width

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

Image Gap Spacing

Add some spacing between Image and Texts.

Image Rounded Corners, Border and Box Shadow

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

Price List Item Advanced Options

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

Question 5

Divi Icon List Module

Accepted Answer

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

Content Options

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

Adding Icon List

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

See below for individual Icon List Item settings.

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

Design Options

Text

Text Indent

Here you can add padding between the text and icon.

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

Icon

Icon Color

Here can define a custom color for the icon.

Icon Background

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

Padding

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

Icon Font Size

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

Icon Rounded Corners

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

Border

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

Image

Background

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

Image Padding

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

Image Width

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

Image Rounded Corners, Border and Box Shadow

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

List Items

Layout

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

Alignment

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

Vertical Alignment

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

Direction

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

Space Between

Add some Space between Icon List Items.

Background Color

Add a Background color to all Icon List Items here.

Padding

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

List Item Rounded Corners, Border and Box Shadow

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

Advanced Options

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

Icon List Item Content Options

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

Content

Text

Add text to the icon list here.

Use Icon

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

Tooltip

Use Tooltip

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

Content

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

Icon List Item Content Options

Icon

Icon Color

Here can define a custom color for the icon.

Icon Background

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

Padding

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

Icon Font Size

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

Icon Rounded Corners

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

Border

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

Image

Background

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

Image Padding

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

Image Width

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

Image Rounded Corners, Border and Box Shadow

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

Tooltip

Placement

Here you can change the Placement of the Tooltip to:

Top
Right
Bottom
LeftBackground Color

Here you can change the Color of the Tooltip.

Tooltip Padding

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

Tooltip Max width

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

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

Text

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

List Item Advanced Options

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

Question 6

Divi Mask Text Module

Accepted Answer

To grab the attention of your visitors, you need something more appealing. Mask your text with any image to achieve a very cool effect. The creativity you can achieve with our mask text module is insanely cool.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/021Y0Wj52r/Showcase-4-1024x572.png (Showcase-4-1024x572.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/hFtiFfxpmv/Supreme-Mask-Text-Module.png (Supreme-Mask-Text-Module.png)

Mask Text

Put the text to start working on making a Mask Text in Divi.

Mask Image

Background Image

Add an image from Media Library which will be placed as a background in the text.

You can play around with changing the background image size and Position and make it Repeat.

Design Options

Heading Settings

Heading Tag

Change the tag of the Mask Text from H1 to H6.

Mask Text

You can play around with changing the color, size, weight, and font of the Mask Text.

Advanced Options

Use the advanced options to give your Mask 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 7

Divi Animated Gradient Text Module

Accepted Answer

Create a beautiful and stunning animated gradient text on your Divi website.

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/RfzUQA1K8b/dsm-animated-gradien-text.png (dsm-animated-gradien-text.png)

Content

Animated Gradient Text

Put your text here which will have an animated gradient.

Animated Gradient Settings

Gradient Direction

Change the direction of the gradient by entering values or sliding the slider.

Animation speed (s)

Change the Speed of animation here.

Design Options

Heading Settings

Heading HTML Tag

Change the tag of the heading from H1 to H6.

Animated Gradient Text

Here you’ll find 4 options for choosing colors which means you can have a really cool Animated Gradient Text with so many colors. But If you want to have two colors then put the same color in #1 Gradient Color and #2 Gradient Color and repeat it for the other two as well.

And you can play with color Gradient Text size, weight, Font, etc.

Advanced Options

Use the advanced options to give your Gradient 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 8

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 9

Divi Scroll Image Module

Accepted Answer

The Divi Scroll Image Module allows you to add images on your Divi website which scroll up or down when the user hovers over the image. Scroll it like the way you always wanted without coding.

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

Content Options

Image

Add an Image here from your Media Library.

Link

Open in Lightbox

When you’ll click on the image it will be shown in Lightbox.

Image link URL

Add a URL for the image here and change the Target method.

Use as a Video Popup

If enabled you can show a video in Lightbox if you click on the image. Just make sure to put the URL of the video in the Image Link URL field.

Scroll Settings

Scroll Speed (in s)

Add the speed in seconds in which the image will be scrolled from top to bottom by sliding the slider.

Scroll Reverse Direction

Normally the image scrolls from top to bottom but you can enable this option to scroll the image from bottom to top.

Design Options

Overlay

You can enable the Image Overlay here. This means when you’ll hover over the image you can display an icon and a color that will cover the image.

Overlay Color

You can change the color of the overlay here

User Icon

Use this switch to enable or disable the use of Icon in the Overlay.

Overlay Icon color

You can change the color of the icon in the overlay here.

Icon Picker

Pick an icon here from the Divi Icon Library.

Show Overlay on Hover

You can always change the behavior of the overlay if you disable this overlay will stay on the image rather than showing only on hover.

Overlay Border Radius and Border

Here you can play around with the Border Radius and Border of the overlay.

Lightbox

If you've added Image/Video Overlay to the Scroll Image under the Link panel you'll see this option in the Design tab to design the Overlay.

Close Color

Change the color of the close button icon here.

Overlay Max Width

Change the max-width of the overlay here.

Advanced Options

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

Question 10

Divi Dual Heading Module

Accepted Answer

Are you looking for adding Attractive and Modern Headings to your Divi Site then welcome the Supreme Dual Heading Module to Divi Builder. Using this you can easily create beautiful Heading that attracts visitors.

Content Options

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

In the Content tab, you’ll find three Text Input options (Before, Middle and After) and you can have separate designs for each.

Dual Heading Text

Before Text

Here you can put the Before Text.

Middle Text

Here you can put the Middle Text. Make sure to add spacing before and after the text in the text you’ll write.

After Text

Here you can put the After Text.

Design Options

Every one of the text you’ll enter in Before, After and Middle Text field can be designed separately in the Design Options.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/cMF4BuNxTB/dsm-dual-heading-design-options.png (dsm-dual-heading-design-options.png)

Heading Settings

Heading HTML Tag

Main Text

In this Design Option, you can change the font, color, weight and size, etc of all the texts (Before, Middle and After)

Before, Middle and After Text

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

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

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

Advanced Options

Use the advanced options to give your Dual Heading 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 Shuffle Letters Module

Accepted Answer

Add a nice and cool text effect to your website using the Shuffle Letters Module for Divi. Write the text that you want to show and it will shuffle letter by letter in the random text before revealing. You can configure settings such as shuffle speed, duration and the random text with just a few clicks.

Content Options

Text

Before Text

Add text here before the Shuffle text.

Shuffle Text

Add text here which will be shown after the shuffling effect.

Shuffle Text on a new line

Enable this option if you want to put the shuffle text below the before text or in a new line.

After Text

Add text here which will be shown after the Shuffle text.

After Text on a new line

Enable this options if you want to put the After text below the Shuffle Text or in a new line.

Shuffle Letters Options

Shuffle Speed (in ms)

Adjust the speed of the Shuffle Animation by sliding the slider in milliseconds.

Duration (in s)

Change the duration of the Shuffle Animation so the Shuffle text will appear after the time duration you set.

Overwrite Random Shuffle Text

Enter your text here, only if you want to have your own random character text. Use without space e.g ‘Shuffle Text’.

Design Options

Before, Shuffle and** After Text** Stylings. You can play around with changing the color, size, weight, and font and more of the Before, Shuffle and After Text.

Advanced Options

Use the advanced options to give your Mask 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 Supreme Button Module

Accepted Answer

Allow you to have two buttons with a separator text in between. 10 types of hover animation to choose from, image/video lightbox that supports: YouTube, Vimeo and Dailymotion! Not only that, we added URL link type that supports: URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp and Telegram!

Content Options

Within the content tab, you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Text

Button #1 Text

Input your desired button #1 text.

Button #2 Text

Input your desired button #2 text.

Links

Link Type for Button #1

Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram)

Email

This option will show up only when using Email Type. Enter the Email Address for Button #1.

Download File

Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library.

CC

Enter the carbon copy email address for Button #1.

BCC

Enter the blind carbon copy email address for Button #1.

SUBJECT

Enter the default subject of the email for Button #1.

MESSAGE

Enter the default body message of the email for Button #1.

Phone Number

Enter the phone number to call for Button #1 (This will usually work on mobile phones)

SMS

Enter the phone number to SMS for Button #1 (This will usually work on mobile phones)

Facebook Messenger

---USERNAME

This option will show up only when using Facebook Messenger. Enter a person, page, or bot username.

Skype

---USERNAME

This option will show up only when using Skype. Enter the Skype username for Button #1.

ACTION TYPE

Choose the action type for Skype. You can choose to chat or call.

WhatsApp

---NUMBER

This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #1.

ACTION TYPE

Enter the default body message of the WhatsApp for Button #1.

Telegram

---TELEGRAM USERNAME

This option will show up only when using Telegram. Enter the Telegram Username.

MESSAGE

Enter the default body message of the Telegram for Button #1.

Button #1 URL

Input the destination URLfor your button #1.

Open as Image Lightbox

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

Open as Video Lightbox

Put the Video link on the Button #1 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion.

Use Tooltip

This will show a tooltip on your Button #1

TOOLTIP CONTENT

Input your desired tooltip content for button #1.

SHOW ARROW

If enabled, then an arrow will be added to the tooltip.

SIZE

The size of the tooltip from Small to Large.

PLACEMENT

Here you can choose the placement of the tooltip. Top, Right, Bottom and Left.

ANIMATION

Here you can choose different types of animation for your tooltip.

URL Opens

Here you can choose whether or not your link opens in a new window.

Link Type for Button #2

Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram)

Email

This option will show up only when using Email Type. Enter the Email Address for Button #2.

Download File

Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library.

CC

Enter the carbon copy email address for Button #2.

BCC

Enter the blind carbon copy email address for Button #2.

SUBJECT

Enter the default subject of the email for Button #2.

MESSAGE

Enter the default body message of the email for Button #2.

Phone Number

Enter the phone number to call for Button #2 (This will usually work on mobile phones)

SMS

Enter the phone number to SMS for Button #2 (This will usually work on mobile phones)

Facebook Messenger

---USERNAME

This option will show up only when using Facebook Messenger. Enter a person, page, or bot username.

Skype

---USERNAME

This option will show up only when using Skype. Enter the Skype username for Button #2.

ACTION TYPE

Choose the action type for Skype. You can choose to chat or call.

WhatsApp

---NUMBER

This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #2.

ACTION TYPE

Enter the default body message of the WhatsApp for Button #2.

Telegram

---TELEGRAM USERNAME

This option will show up only when using Telegram. Enter the Telegram Username.

MESSAGE

Enter the default body message of the Telegram for Button #2.

Button #2 URL

Input the destination URL for your button #2.

Open as Image Lightbox

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

Open as Video Lightbox

Put the Video link on the Button #2 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion.

Use Tooltip

This will show a tooltip on your Button #2

TOOLTIP CONTENT

Input your desired tooltip content for button #2.

SHOW ARROW

If enabled, then an arrow will be added to the tooltip.

SIZE

The size of the tooltip from Small to Large.

PLACEMENT

Here you can choose the placement of the tooltip. Top, Right, Bottom and Left.

ANIMATION

Here you can choose different types of animation for your tooltip.

URL Opens

Here you can choose whether or not your link opens in a new window.

Separator

Separator Text

Input your desired separator text, or leave blank for no separator text in between the both buttons.

Make Separator Text Fullwidth On Mobile

This will make the Separator Text as fullwidth instead of inline-block on mobile devices.

Remove Separator Text On Mobile

This will remove the Separator Text on mobile devices.

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 Button Wrapper aligned to the left, right or center.

Lightbox

If you've added an Image/Video Overlay to the button, then here you can change the settings of the Overlay.

Overlay color

Choose any color for the Overlay

Max Width

Here you can choose the Maximum width of the Overlay.

Separator Text

Here you can style the Spearator text's font, size, color and more.

Tooltip Text

If you've added Tooltip to the buttons you can easily style it here. You can have different styling for each button by going to each tab. You can style the Tooltip text's font size, color, and much more.

Sizing

Separator Gap Text

The gap spacing between both buttons.

Button One

This is where you can style your Button #1 the same way you style other button in Divi.

Button Two

This is where you can style your Button #2 the same way you style other button in Divi.

Animation

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/eufNDhIK2e/dsm-button-hover-611x1024.png (dsm-button-hover-611x1024.png)

Button Hover #1 Animation

Here you can select one hover animation from the dropdown list for Button #1. You can select any from over 29 Animations.

Button Hover #2 Animation

Here you can select one hover animation from the dropdown list for Button #2. You can select any from over 29 Animations.

Button Icon Hover #1 Animation

If you've added Icon to the Button #1 and disable the switch called "Only Show Icon on Hover for Button One" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations.

Button Icon Hover #2 Animation

If you've added Icon to the Button #2 and disable the switch called "Only Show Icon on Hover for Button Two" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/S9njB1osRA/Button%20Icon%20hover%20animation%20-%20Divi%20Supreme.png (Button Icon hover animation - Divi Supreme.png)

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 13

Divi Flipbox Module

Accepted Answer

With over 15 effects to choose from, you can now create stunning interactive content that converts.

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

Content Options

+ Flipbox Item

This is where you add content, images and icon to your Flipbox Module. Just like a Blurb Module but with Front and Back Animation to show the front and back of an element when you hover. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new Flipbox. See below for individual Flipbox settings.

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

Note: Create only two items because one is identify as Front and the other as Back.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/3Z6sx0WARQ/flipbox-1-693x1024.png (flipbox-1-693x1024.png)

Design Options

Sizing

--Height

By default, the flipbox is set at 200px. You can set to other height to suit the content of your flipbox. This is one of the most important part when using flipbox. If you content is too long and doesn’t look right. Adjust your height.

Animation

This is where you can change the flipbox animation effect.

Trigger Animation On

Choose a trigger animation for the Flipbox here. You can either select "Hover" or "Click". When you'll select Click the Flipbox will flip on Click instead of on hover.

Click On

This option will appear once you'll select the Trigger method as "Click". And from here you can choose If you want to flip the Flipbox on Whole Flipbox click or Button click.

Flipbox Type

There are 5 types of Flipbox Effect to choose from.

Flip Animation

There are 4 types of Flip Effect to choose from. "Flip Left" "Flip Right" "Flip Up" "Flip Down"

3D Effect

This option will only show up when you choose Flipbox Effect as Flip And this will create a 3D effect to your Flipbox.

Slide Animation

This option will only show up when you choose Flipbox Effect as Slide

There are 4 types of Slide Effect to choose from. "Slide Left", "Slide Right", "Slide Up" and "Slide Down".

Zoom In Animation

This will have a zoom in animation on your flipbox.

Zoom Out Animation

This option will only show up when you choose Flipbox Effect as Zoom Out

There are 5 types of Zoom Out Effect to choose from. Zoom Out Zoom Out Up Zoom Out Down Zoom Out Left * Zoom Out Right

Animation Speed (in s)

This will control the speed animation of the flipbox.

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.

Flipbox Item Content

Title

Give a title to your Flipbox that will appear above the body text of the Flipbox in a bold text style.

Sub Title

If you would like to use a sub title, add it here. Your sub title will appear below your title in a small font.

Content

This field is where you can enter the body content of your Flipbox. Flipbox Text will also span the full width of your column.

Use Icon

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

Icon

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

Image

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

Button

Button Text

Input your desired button text.

Button URL

Input the destination URL for your button.

URL Opens

Here you can choose whether or not your link opens in a new window.

Flipbox Item Design Options

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

Image & Icon

Icon Color

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

Circle Icon

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

Circle Color

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

Show Circle Border

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

Circle Border Color

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

Use Icon Font Size

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

Sizing

Here you can change the width of the image.

Width

Applying a max width value here will limit the width of the Flipbox image. This only affects Flipbox that are not in icon mode.

Spacing

Custom Padding

Padding is the space added inside of your flipbox item, between the edge of the file and its internal elements. You can add custom padding values to any of the flipbox item’s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.

Flipbox Item 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 14

Divi Gradient Text Module

Accepted Answer

By using Divi’s built-in background gradient tool, this module allow you to have gradient text without coding.

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

Content Options

Gradient Text

Background

With Divi’s built-in background gradient tool, you can style the gradient of the text.

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.

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

Divi Typing Effect Module

Accepted Answer

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

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

Content Options

Text

Before Text

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

Typing Effect Text

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

Typing Text on a new Line

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

After Text

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

After Text on a new Line

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

Typing Effect

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

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

Use Loop

If enabled, typing effect will loop infinite.

Remove Cursor After Completed

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

Typing Speed (in ms)

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

Typing Backspacing (in ms)

Delay before backspacing.

Back Delay (in ms)

Here you can delay before backspacing.

Use Typing FadeOut

This will have fade out animation instead of backspacing.

Use Typing Shuffle

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

Cursor Character

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

Animate in Viewport

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

Repeat Animation in Viewport

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

Admin Label

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

Design Options

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

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

Before Text

Background Color

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

Padding

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

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

After Text

Background Color

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

Padding

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

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

Typing Styles

Cursor Color

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

Background Color

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

Padding

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

Advanced Options

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

Question 17

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 18

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 19

Divi Icon Divider Module

Accepted Answer

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

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

Content Options

Use Icon

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

Icon

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

Image

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

Background

Background Color

Here you can choose a background color for your module.

Background Image

Here you can choose a background image for your module.

Admin Label

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

Design Options

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

Image & Icon

Icon Color

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

Circle Icon

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

CIRCLE COLOR

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

Show Circle Border

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

CIRCLE BORDER COLOR

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

Use Icon Font Size

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

Alignment

This controls the divider alignment of the Icon Divider.

Color

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

Styles

Here’s where you can style the divider appearance.

Divider Style

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

Divider Position

This controls the vertical alignment of the Icon Divider.

Sizing

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

Divider Weight

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

Icon Gap

The Gap space between the icon and the divider.

Advanced Options

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

Question 20

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.