Source: https://divicake.com/blog/animate-letters-in-divi/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # How to Animate Letters for Unique Designs in Divi By Divi Cake·29 September 2024·Updated 19 August 2026·7 min read How to Animate Letters for Unique Designs in Divi We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Inserting and Configuring the Text Module for Animated Text in Divi](https://divicake.com#inserting-and-configuring-the-text-module-for-animated-text-in-divi) - [Customizing Text Appearance in Divi](https://divicake.com#customizing-text-appearance-in-divi) - [How to Change the Background Color in Divi](https://divicake.com#how-to-change-the-background-color-in-divi) - [Applying Animation to Text in Divi](https://divicake.com#applying-animation-to-text-in-divi) - [Duplicating Letters for Animated Text in Divi](https://divicake.com#duplicating-letters-for-animated-text-in-divi) - [Converting Duplicate Letters into Your Target Text](https://divicake.com#converting-duplicate-letters-into-your-target-text) - [Converting Text from Vertical to Horizontal Alignment Using CSS](https://divicake.com#converting-text-from-vertical-to-horizontal-alignment-using-css) - [Adding Spacing to Unique Text in Divi](https://divicake.com#adding-spacing-to-unique-text-in-divi) - [Changing Animation Duration for Each Letter in Divi](https://divicake.com#changing-animation-duration-for-each-letter-in-divi) - [Customizing Animation Duration for Each Letter in Divi](https://divicake.com#customizing-animation-duration-for-each-letter-in-divi) - [Conclusion](https://divicake.com#conclusion) 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](https://divicake.com/go/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. Creating a unique text animation in Divi by animating individual letters with different styles, durations, and delays for an eye-catching effect. Read More: [A Look at the Divi Animation Builder](https://divicake.com/blog/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](https://divicake.com/blog/getting-started-with-divi-content-settings/), 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. Step-by-step instructions on inserting a Text Module in Divi and configuring it for animated text, starting with selecting the heading level and entering individual letters. Read More: [7 Unique Ways to Add Hover Effects to Divi](https://divicake.com/blog/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. Customize heading colors in Divi to match your website’s design. Adjust alignment and text size in the Heading Text settings to enhance clarity and aesthetics. Read More: [Animate Your Web Page Using Divi Scroll Effects](https://divicake.com/blog/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. Change the background color in Divi by accessing the Section Settings and adjusting the color in the Background section to fit your design preferences. Read More: [Add a Loading Animation to your WordPress Website](https://divicake.com/go/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. Learn how to add unique animations to text in Divi, including selecting the animation style from the design settings for a customized look. Read More: [Animated Image Caption Hover Effects in Divi](https://divicake.com/go/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. Customize text animations with Divi’s animation settings, adjusting duration, delay, starting opacity, and speed curves for smooth effects. Control whether animations loop or run once for dynamic presentations. Read More: [Showcase Your Creativity with the Divi Animated Gallery Layout](https://divicake.com/go/divi-animated-gallery/) ### 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. Learn how to duplicate letters in Divi for animated text effects. Create multiple vertical text duplicates to design headings with each letter animating separately for dynamic presentations. Read More: [How to Create Scroll Animated Number Counters with Divi](https://divicake.com/go/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. Convert duplicated letters into your target text with Divi by editing each letter individually to form your desired heading or topic, ensuring a custom animated text effect. Read More: [How to Design Scroll Animated Bar Counters with Divi](https://divicake.com/go/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. Step-by-step instructions for changing text alignment from vertical to horizontal in Divi using CSS by adjusting the row and column settings. Read More: [Adding Divi Theme Fade-in effect](https://divicake.com/blog/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. Add spacing between letters in Divi by adjusting the padding in the Design Tab. Customize spacing for unique text elements to achieve the desired look for your design. Read More: [How to Make Gradient Text in Divi Without Code](https://divicake.com/blog/how-to-make-gradient-text-in-divi/) ### 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. A guide on adjusting the animation duration for individual letters in Divi, focusing on the second letter to customize the animation effect. ### 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. Customize the animation duration of letters in Divi to create a staggered effect. Adjust the timing incrementally to achieve a smooth, sequential text animation. ## 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](https://divicake.com/blog/increase-the-width-of-the-divi-header-on-scroll/) About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tips & Tricks [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/) [ Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Tips & Tricks6 min read ### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones. 26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/) [ Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Reviews7 min read ### Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Divi Pro pricing bundles AI, hosting, cloud and support into one plan. See what each add-on costs alone and the point where the bundle stops paying off. 25 February 2026](https://divicake.com/blog/divi-pro-pricing-bundle-vs-addons/)