Skip to main content

Search Divi Plus Documentation

Search for answers or browse our knowledge base.
Explore Divi Plus's Live Demo

All Topics
Print

Shuffle Text

The DP Shuffle Text module for Divi 5 creates high-tech text reveal animations by scrambling text characters before settling on your final message.

How to add module on page

To add a DP Shuffle Text heading to your page layout, use these steps:

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

Content settings

Target text

Type in the final text string you want to display on the page. This text will be revealed at the end of the shuffle animation loop.

Trigger mode

Choose when to execute the shuffle animation. Available options are On Page Load, On Hover, or On Scroll (when entering the viewport).

Design settings

Scramble configuration

Customize the character set categories used in the scramble cycle (such as Numeric, Alphabetical, Cyrillic, Symbols, or Custom overrides). You can also control the scramble speed (frame intervals) and total animation duration (in milliseconds).

Header typography

Style the revealed text. Select appropriate HTML header tags (H1-H6), apply custom fonts, set responsive text sizes, weights, spacing, and hover color transformations.

Pro Tip: Trigger Shuffle Text on hover for page navigation links or feature headlines to give your site a futuristic, interactive feeling.

Frequently Asked Questions

What trigger behaviors does the text animation support?

You can set it to run immediately on page load, play once when the text scrolls into view, or play repeatedly whenever the user hovers their mouse over the heading.

Can I choose which characters are displayed during the shuffle?

Yes. The module settings let you select whether to shuffle using random numbers, alphabet characters, specific symbols, or you can input a custom list of characters.

Does this module support multi-line headings?

Yes. It works with both single-line text links and larger multi-line heading sections, animating all text rows seamlessly.

Table of Contents