How to Create an Animated Text Effect in WordPress

In the toolbox of web design, there’s nothing like well-placed animation to add a touch of magic to a page or a post. It’s easy to see why – animation can bring otherwise static elements such as text to life. Things that move have a way of catching our eye, so animation is a great way to draw the viewers’ attention to something. As long as it’s done tastefully, with measure and a sense of composition, animation can be a great boon to your website.

Text is a great example of just how useful animation can be. Paragraphs can appear on a page in a certain way. Individual words can do it, too – you can even set whole sentences to appear one letter at a time, creating a stylish typing effect. And while it’s certainly possible to add those effects using HTML and CSS, we’ve created an easier way for you to add animated text to your website.

Our Qi Addons for Elementor plugin – a bundle of sixty custom-made Elementor addons – contains just the thing you need. The addon is called the Animated Text widget, and it’s a great little tool for adding animated text in WordPress. We’ll also show you how you can use our Qi Blocks for Gutenberg plugin, and its Animated Text block, to do the same with the block editor.

How to Add Animated Text in WordPress using Qi Addons for Elementor

Before we get started, you should know that we’ve also created a video showing you how to add animated text in WordPress using the Qi Addons for Elementor plugin. If you like watching videos more than reading articles, go ahead and watch it – you can always come to the article if you need to.

Because Qi Addons for Elementor is a collection of widgets for Elementor, your website should have Elementor installed and activated before you install and activate the plugin. The website builder comes in both free and pro – paid – versions. Our plugin doesn’t require the pro version. A regular free installation is all you’ll need to enjoy the full benefits of Qi Addons for Elementor.

Once Qi Addons for Elementor is installed and activated, you will notice a new set of elements and widgets in your Elementor elements panel. To start creating your animated text effect, search for “animated text” in the left-hand side panel to bring up the widget.

The next step should be to simply drag the widget to a section on the page. Depending on your page design, you can add it to a column in a multi-column section. The section layout we used was the default, single-column one.

How to Edit the Content and the Animation

After dragging the widget to a section, the addon’s Content tab will open in the General options section. This is where you can change the widget’s default text and add your own. You can add single words, phrases, sentences, or whole paragraphs – whatever the text you want to animate might be.

For our example, we used the sentence “Pick your animation style.”

The next option is the big one – Appear Animation. It’s where you’re able to choose which parts of the text – words, letters, or the whole text – will move together in the animation. You can also choose the direction from which the text will appear on the page, and set the appearance delay – how long after the visitor reaches the animated text section will the animation start.

The options we chose included splitting the title by letter, having the letters appear from the top, and the animation appearing with a 200-millisecond delay.

You can combine different types of splits and animations to create the desired effect. For instance, if you’re going for a typing effect, you will set the “by letter” split and a “from right” animation.

Once you settle on the title and animation options, you can move on to styling the animated text.

How to Style the Animated Text

The styling options in the widget are pretty straightforward and easy to navigate. For starters, some options let you choose the alignment and the title tag of the text. For this demonstration, we chose the center alignment and the H3 title tag.

The following couple of options deal with the text color and typography (font family, size, weight, style, text transform, decoration, as well as line height and letter spacing). We didn’t change the color of the text, but we did make a couple of changes in the typography options. We changed the size of the letters to 70 pixels, and the weight to 400.

We chose not to change the title padding options as we didn’t want to increase the spacing around our text. So, our sample animated text was done and ready to be displayed. All in all, it took only a couple of minutes to create, and the results looked great.

How to Add Animated Text Using Qi Blocks for Gutenberg

If you’re a fan of Gutenberg and want to use a block with similar functions as the Animated Text widget, you should try Qi Blocks for Gutenberg. The plugin has more than 80 different blocks, some free and some premium, and they work wonders for expanding your toolbox when working with the block editor.

The Qi block you want to use for adding animated text to your website is the appropriately titled Animated Text block. It’s one of the premium blocks, so you must have the premium version of the plugin if you want to use this block. But when you sort that out, you’ll be able to add animated text to your pages quickly and easily.

We’ll demonstrate just how quickly by creating the same example we already showed you how to create using an Elementor widget. So you can just go ahead and install the plugin and open up a new page or post where you want to add the block.

For a complete visual step-by-step tutorial, you can also check out the video:

How to Add Content and Choose the Animation

As soon as you add the block to a page, the right-hand side menu will show you the content options. This is where you can set the title – choose the text you want animated – and pick the options for the animation. It’s very simple and straightforward.

We changed the title text to “Pick your animation style.” We chose not to split the title, but we did pick “from right” as the option for the appearance animation, and we set the appear delay to 100ms.

That’s all there is to adding content and picking the animation. You’re free to choose differently, of course, and experiment with splitting the title by letters or words, and different kinds of appearance animations. When you’re done, head over to the Style options for some fine-tuning of the block.

How to Style the Content

The style options you have with the block are, again, straightforward. You can choose the alignment of your content, its tag, the color, typography options, and padding options, which can come in handy if you’re looking for a way to add a break to the title and create it in two lines.

Our title was aligned centrally. Under the typography options, we set the font size to 70px, and the weight to 400.

And that’s all you need to do to add some animated text to your WordPress website using the Qi Blocks for Gutenberg plugin.

Let’s Wrap It Up!

When it comes to design options you have access to when building web pages, more is usually better. The same doesn’t go for using them, as many options work best when they are carefully considered and added in a way that maximizes their effect.

For text animation, this means letting it do what it does best – drawing attention to otherwise static pieces of text. Whether you’re using it to fade in whole paragraphs of text or to create sentences using the typing effect, Qi Addons for Elementor and the Animated Text widget will be the perfect tools to add animated text in WordPress.