Are you looking for a unique text animation and design? If so, You’ve found the perfect spot! In this step-by-step guide, we will show you how to create a distinct text animation effortlessly. We’ll make the process so simple that you’ll feel like a pro web developer. In this blog, we will use Divi  built-in animation features. There’s no need for extensive CSS coding; we’ll use just one line of CSS, while the rest of the animation will be handled through Divi’s own modules.

In the GIF below, we showcase a beautiful and unique text animation. By placing individual letters into a text module, you can apply animations to each letter separately, using various animation styles, durations, and delays. This approach will make your content stand out in a highly creative and engaging way. 

Read More: A Look at the Divi Animation Builder

Inserting and Configuring the Text Module for Animated Text in Divi

Ensure you’re on the page where you want to create the animated text, and decide on the section for it. As shown in the screenshots below, click on the Plus Button to open the interface called “Insert Module.” Then, search for the Text Module and insert it into the chosen section. Upon clicking Text, the Text Settings will open automatically. Next, click on the Content Tab Setting, scroll down, and open Text. Click on Heading and select the desired heading level, such as H2 (as we used in this example). Now, scroll down and write a single letter, like we entered “T,” but don’t click save just yet. We will continue from here in the next step.

Read More: 7 Unique Ways to Add Hover Effects to Divi

Customizing Text Appearance in Divi

In this step, we are going to add colors to the heading to make it clear and visually appealing. Click on Text Module Settings, then go to the Design Tab and find Heading Text. Open the Heading Settings, click on Heading Text Color, and choose a color that matches your website’s preferences. You can also adjust other settings, such as alignment and text size, but our primary focus is on heading colors. Make the changes, and save them by clicking the green button.

Read More: Animate Your Web Page Using Divi Scroll Effects

How to Change the Background Color in Divi

In this step, we’ll add a background color. To get started, click on the Section Settings Button, then navigate to the Content Tab and scroll down to Background. Once you click on it, the background settings will open, as shown in the screenshot below. From here, you can change the background color to match your desired design.

Read More: Add a Loading Animation to your WordPress Website

Applying Animation to Text in Divi

In this section, we will show you how to add animation to the text to make it unique. First, click on the Text Settings, Then, navigate to the Design Tab, scroll down, and find Animation. Click on it to open the animation settings. The first option you’ll see is Animation Style, where you’ll find various animation options. We selected Bounce, as shown in the screenshot below. Choose any animation style you prefer.

Read More: Animated Image Caption Hover Effects in Divi

Now, let’s continue with the animation settings. Scroll down to find additional options. First, under Animation Direction, choose the side from which you want your text to appear. Next is Animation Duration, which controls the speed of your animation; here, we’ve set it to 3000ms. You can do the same for consistency, as we will adjust these for other text in the next step. Then, set the Animation Delay based on your preference. Animation Starting Opacity allows you to control the fade effect; increasing opacity can reduce or remove the fade. The Animation Speed Curve adjusts the easing method, making the animation smoother compared to a linear curve. Lastly, Animation Repeat is set to run once by default, but you can choose to loop the animation continuously by selecting the Loop option. Adjust all settings to fit your desired outcome.

Read More: Showcase Your Creativity with the Divi Animated Gallery Layout

Duplicating Letters for Animated Text in Divi

In this step, we’ll focus on duplicating our letter. As you can see in the screenshots below, we currently have just one letter. To create a complete heading or paragraph with each letter animating separately, we need to add more letters. First, create a text module and write a single letter, like we did with “T”. Follow along and do the same. Now, click on the duplicate button to create a vertical duplicate of the text, as shown in the screenshots below. Duplicate the text for as many letters as required in your heading or text. For example, to write “This Is”, we need six duplicate letters—“T, T, T, T, T, T”. Duplicate the letters as needed for your design.

Read More: How to Create Scroll Animated Number Counters with Divi

Converting Duplicate Letters into Your Target Text

In the previous step, we created duplicate letters. Now, in this step, we will transform those letters into your desired heading or target text. Simply double-click on each letter separately and change it to match your topic or heading.

Read More: How to Design Scroll Animated Bar Counters with Divi

Converting Text from Vertical to Horizontal Alignment Using CSS

In this step, we will change our text style from vertical to horizontal. As shown in the image below, click on the green settings button for the row settings. Once opened, navigate to the Content Tab and then click on the Column Settings Button. Open the Advanced Tab, scroll down to Custom CSS, and in the second option labeled Main Element, enter display: flex;. This simple change will transform your text from a vertical alignment to a horizontal line.

Read More: Adding Divi Theme Fade-in effect

Adding Spacing to Unique Text in Divi

In this step, we will apply spacing where needed. As shown in the screenshot below, we want to create spacing between the letters “S” and “I.” To do this, hover over the “S” until the settings appear, then click on it. Next, navigate to the Design Tab and scroll down to find Spacing. Click on it and add padding to the right of “S” based on what you feel looks right, as illustrated in the screenshot.

Read More: How to Make Gradient Text in Divi Without Code

Changing Animation Duration for Each Letter in Divi

For the first letter, we added animation in an earlier step. Now, we’ll demonstrate how to change the Animation Duration for each letter individually. Hover over the second letter, which is “H” in our case, and click on the Settings Button. Next, find the Animation Duration setting and enter “3100.” Don’t forget to save your changes.

Customizing Animation Duration for Each Letter in Divi

Now, hover over the third letter, which is “I,” as shown in the image below. Access the Animation Duration setting and enter “3200,” then save your changes. Continue this process, increasing the duration by “100” for each letter one by one. Once you reach the middle of your text or sentence, gradually decrease the duration, moving from “3700” to “3600,” then “3500,” and so on. This way, each letter will animate sequentially, creating the staggered effect demonstrated in the GIF above.

Conclusion

In this tutorial, we’ve explored how to create a stunning text animation using Divi’s built-in features and minimal CSS. By following our step-by-step guide, you can easily animate individual letters to craft engaging and visually appealing text designs. From configuring the text module and customizing appearance to adjusting animation settings and spacing, each step contributes to a unique final product. We hope this guide has empowered you to experiment with text animations in Divi, enhancing your web development skills and creating content that truly stands out. Enjoy exploring animations!

Read More: How to Increase the Width of the Divi Header on Scroll