Skip to content

Modules

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

  1. Add a section and row, then add the Animated Text module.
  2. Enter a Prefix, a Suffix, or both. Both are optional.
  3. In Animated Text, enter one phrase per line.
  4. 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.