Scroll Text

The Scroll Text module in Divi Plus helps you show text with smooth animations as people scroll down the page. It makes your content look more interesting and keeps visitors engaged.

How to add module on page

Once Divi Plus is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:

1. Create/Edit a Page/Post that uses Divi builder.
2. Create/Edit a row.
3. Click on Add New Module option; choose the DP Scroll Text module.

Text settings

Scroll effect options

This setting lets you choose how the text will appear when scrolling down the page. You can choose from:

• Fade: The text will slowly appear with a fading effect.
• Blur: The text will appear clearly by removing a blur as you scroll.
• Color: The text will get filled with color as it scrolls into view.

Text split by

This setting controls how the text is animated whether it appears word by word or letter by letter:

• Word: The text will animate one word at a time.
• Letter: The text will animate one letter at a time.

Animation settings

These settings control when and how the text animation should start and end while scrolling.

• Start Element Position
  This sets the starting point of the animation based on the element’s position.
  Example: 0% means animation starts from the top of the element.
• Start Viewport Position
  This decides how far the element should be from the top of the screen (viewport) before the animation starts.
  Example: 80% means the animation will begin when the element enters 80% from the top of the screen.
• End Element Position
  This sets when the animation should end based on the position inside the element.
  Example: 0% means the animation ends at the top of the element.
• End Viewport Position
  This decides the screen position at which the animation ends.
  Example: 40% means the animation stops when the element reaches 40% from the top of the screen.

Customization

Text

Use this to customize your font style, size, weight, color, line height, and more. It lets you make the scroll text look exactly how you want visually.

Sizing

Control the width, max-width, height, and alignment of the scroll text area. Useful for adjusting how much space the module takes on the page.

Spacing

Add padding or margin around your scroll text to manage its position and spacing in relation to other elements on the page.

Border

Apply borders and set border radius for rounded corners. You can also adjust border color and width to match your design.

Box shadow

Add shadow effects around the text box to create depth and make your scroll text stand out more on the page.