Text capitals provide a scrolling text box to your Website that engages readers with helpful excerpts from contents. They are also called tickers (or news tickers) and are often used to display a steady stream of news updates at the top or bottom of the page. . Usually, scrolling animation is done with a single line of contents in a loop so that the information is displayed repeatedly. Unfortunately, the <marquee>Since html tag is obsolete, we rely on CSS and JavaScript to create marquees these days. However, with Divi, you can create a simple selection rectangle without worrying about the custom code.

In this tutorial, we'll explain how easy it is to create a simple selection text with Divi. We'll even see how to pause scrolling text animation on hover and how to add large scrolling text as a unique design element for your headers.

Let's start.

Preview

What you need to get started

To get started, you need the following:

1. Le Divi theme installed and active
2. A new page created to build from scratch on the front-end (visual constructor)

After that, you will have a blank canvas to start designing in Divi.

Beginning of the Conception

For this first example, we'll create a simple text rectangle for one line of text. To do this, we are going to give a row a maximum width with the overflow hidden. Next, we're going to add looping slide animation to a text module containing the line of text so that it repeatedly slides into the line, like a rectangle.

Here's how to do it.

Start by creating a regular section with a row of a column.

Then, before adding a module, update the row with a fixed width, shadow box, and radius, as follows:

• Maximum width: 200px
• Upholstery: 10px at the top, 10px at the bottom
• Round corners: 10px
• Box Shadow: see screenshot
• Horizontal overflow: hidden
• Vertical overflow: hidden

Add the text module

When the line is complete, add a new text module to the line.

Then update the contents of the body with a single line of text. For now, make sure the line of text doesn't split into another line.

• Body: "This is a sentence"

Text module design

Update the text module design parameters as follows:

• Margin: -100% on the left, 100% on the right

This positions the text module outside the left of the line. Since the hidden visibility of the line is hidden, the module will be hidden until we add animation to make it visible.

• Animation Style: Slide
• Animation direction: Right
• Animation duration: 5000ms
• Animation intensity: 100%
• Animation Starting opacity: 100%
• Animation of the speed curve: linear
• Repeat animation: Loop

Result

Let's see the result now.

Creating longer text lines

In the simple selection text design above, we limited the width of the text line to the same width as the line. However, if we want to create a longer line of text with the same width, we will need to tweak the settings a bit.

First, on the text module and replace the body of the text with the following:

This is a phase with a link

Add more width and margin to fit the longest line of text

As you might notice, the text is split into three lines instead of one.

Therefore, we need to adjust the margin and intensity of the animation.

• Width: 207%
• Margin: -207% on the left, 207% on the right
• Animation intensity: 75%

The trick here is to increase the width and update the margin values ​​so that only enough space is left for a single line of text. Then adjust the intensity of the animation so that there is no big break between the looping animation.

Result

Here is the final result.

Pause selection text animation on hover

Since this marquee selection includes a link, it will be difficult for users to click on the link while moving. However, we can add a little css snippet to the text module that will pause the animation on hover.

Add CSS snippet to pause animation on hover

To add the css snippet, open the text module settings and add the following custom CSS code to the main element under the hover tab :

animation-play-state: paused;

Final result

Now check out the end result. Note that the text animation stops when the cursor hovers over the text, allowing the user to click on the link.

That's all for this tutorial, I hope it has taught you how to add a scrolling text on Divi.