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
