How to Add a Modern Text Reveal to Divi Text modules

by Adam Hansen

Oct 6, 2022 | Uncategorized

Reveal text character by character!

If you’re looking for a way to catch your website users’ attention, this text reveal animation is a great option. While Divi does come with animations out of the box, this animation, which animates each letter one at a time, is not included. Follow these steps and you’ll be able to easily apply the animation to any Divi text module on your site. 

Step 1: Purchase the layout from the Divi Marketplace

Go to the Divi Marketplace to purchase and download the official Text Reveal layout.

Step 2: Upload JSON file to Divi Library

Go to your WordPress Dashboard > Divi > Divi Library. At the top, click ‘Import & Export’. Go to the Import tab, upload the extracted .JSON file, and upload to the library.

Step 3: Add to page

On a new or existing page, upload the newly saved Divi layout to the page. For more information on adding a layout from the Divi library, refer to Elegant Theme’s documentation:

  • https://www.elegantthemes.com/documentation/divi/divi-library/
  • https://www.elegantthemes.com/documentation/divi/library-import/

Step 4: Use Animation

To use the animation, add “reveal up” or “reveal down” to any text module. You can do this by clicking the text module’s settings, going to the Advanced tab, and typing in the CSS Class input field.

If you’d like to use this animation on multiple pages, you’ll need to make sure that the content inside the layout’s Code module is added to each page manually, or simply added to <body> section (found by going to Divi > Integration > ‘Body’).

Buy on the Divi Marketplace Today

Pin It on Pinterest

Share This

Please share this post with your friends!