Question 1

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 2

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 3

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 4

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 5

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 6

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 7

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 8

Divi Block Reveal Text Module

Accepted Answer

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

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/cGC7i2lcIF/block-reveal-text-module-content-options.png (block-reveal-text-module-content-options.png)

Block Reveal Text

Here you can enter the text which will be revealed with a nice animation.

Block Reveal Animation

Block Reveal Animation style

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

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

Block Reveal Color

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

Delay

Adjust the Delay of the Block Reveal Animation here.

Animate in Viewport

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

Design Options

Text

This is where you can style the text which you’ve entered in the content tab. You can design it the same way you design every text module in Divi.

Heading HTML Tag

Here you can change the HTML Tag of the Text from H1 to H6.

Advanced Options

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

Question 9

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