Divi Essential Documentation

  1. Home
  2. Docs
  3. Divi Essential Documentat...
  4. Modules Documentation
  5. Divi Text Animation

Divi Text Animation

With Divi Next Text Animation Module, you can animate your website’s texts to express your significant messages effectively to your viewers. This module comes with 10 Stylish Animation Effects.

Content → Text Animation


Here you have the following options:


  1. Before text – type the text that will appear before the animated text
  2. Animation Text – grab the attention of the visitors by including an eye-catching animation text
  3. After Text – type the text that will appear after the animated text
  4. Select Animation Effect – choose an effect from the 10 animation effects for the animated text field.
  5. Select Heading Tag – pick a relevant heading tag
  6. Display Stacked – select how you would like to display the heading. Either inline or stacked.

Design → Fonts (Heading/Animation Text)

  1. Font – Select a font from the collection or use a custom font.
  2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
  3. Font Style – Pick a style of font for both front and back.
  4. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
  5. Text Size – easily resize the text for both the front and back parts of the flip box.
  6. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
  7. Line Height – easily include gaps between the lines using the slider
  8. Text Shadow – add text shadow to have the texts highlighted.

Design → Text

  1. Text Alignment – align the text either to the left, center, or right.
  2. Text Shadow – select from the premade text shadows to add a shadow to the text, or simply configure them to your liking.
Question 1: We are using the Next Text Animation module and we notice the animated text "jumping up" on mobile screens when the text flips. So how to solve this problem?
After keeping your animation texts in the content tab then go to the Design tab and there open the Fonts option.

Here click on the Animation Text column and then adjust the line-height. You can increase the line-height of the same texts and then the Text Animation is working great. Now check the screenshot which is given below: 
website WordPress divi plugins divi builder templates divi theme builder wp plugins divi theme latest version divi theme divi wp divi template create wordpress website the divi theme divi web design divi template wordpress divi free wordpress divi theme website builder divi divi builder divi page builder divi divi builder plugin divi website divi plugin wordpress divi layouts divi builder wordpress divi wordpress

How can we help?