Animated Text
Add a heading with text that types, tilts, or slides through a list of phrases. Add optional prefix and suffix text around it.
Animated Text displays a heading whose middle part changes through a list of phrases. You can add fixed Prefix and Suffix text on either side, for example "We build" + rotating phrases + "for Divi".
How to add the Animated Text module
- Add a section and row, then add the Animated Text module.
- Enter a Prefix, a Suffix, or both. Both are optional.
- In Animated Text, enter one phrase per line.
- Choose an Animation Mode.
Content
Content
Open the module settings, go to the Content tab, and open the Content group.
- Prefix: Text before the animated phrases.
- Animated Text: The phrases to animate. Enter one phrase per line.
- Suffix: Text after the animated phrases.
Settings
- Animation Mode: Text Typing (default), Text Tilt, or Animated Slide. The mode decides which of the groups below applies.
Typing Settings
Used with Text Typing.
- Animation Speed: Default 100ms.
- Start Delay: Default 300ms.
- Type Back Speed: Default 50ms.
- Type Back Delay: Default 500ms.
- Animation Loop: On by default.
- Show Cursor: On by default.
Tilt Settings
Used with Text Tilt. Each phrase animates in and then out.
- In Animation: The entrance effect. Options include flip, fadeIn, fadeInUp, bounceIn, and rotateIn.
- Out Animation: The exit effect. Options include flip, fadeOut, fadeOutDown, bounceOut, and rotateOut.
- Animation Delay: Default 50ms.
- Sync, Reverse, and Shuffle: Text fields that take two values separated by a vertical bar, for the in effect and the out effect. Each value is on or off. The default is off|off. For example, on|off applies the setting to the in effect only.
Slide Settings
Used with Animated Slide.
- Slide Animation: The effect used when a phrase changes, such as fadeIn, fadeInUp, bounce, or rotateIn.
- Slide Gap: The time between slide changes, in milliseconds (range 0 to 1500). Default 1500ms.
Design
Go to the Design tab.
- General: Text Alignment (Left, Center, or Right, default Left) and Layout (Inline, default, or Block).
- Prefix Text, Animated Text, and Suffix Text: Font settings for each part. The heading level set in the Animated Text font settings is the tag for the whole line. The default is H3.
- Prefix Box, Animated Box, and Suffix Box: Text Stroke and Stroke Color for each part.
- Cursor: Spacing Gap (default 8px), Width (default 3px), Height, and Color (default #333333). The cursor is shown in Text Typing mode.