How to Create Animated Typing Effect on WordPress

UPDATE: This tutorial works with any other WordPress theme, not just with Divi.

If you have seen the demo of my Divi child theme that I released, you must have noticed the typing effect animation effect that I have applied to the header’s heading text. If you haven’t seen my child theme yet, you can go and check it out here.

If you wonder how you can achieve the same effect, read on. I will explain it in this article. It is quite easy.

 

 

I did it using a plugin. I used the plugin called Typed JS: A typewriter style animation, but there is also another plugin for this, Typing Effect, and that one does the same job. But I will explain how the Typed JS plugin works, as that is what I have used in my case.

You can also use a different solution than using this plugin (e.g. code it manually within your child theme‘s files).

So all we need to do to create the animated effect is to install this plugin and activate it. Then you will just need to insert the shortcode for this plugin into a WordPress text area (or Divi text module) wherever you want to apply the animation. My shortcode looks the following way:

[typedjs typespeed=”70″ startdelay=”0″ backdelay=”1000″ backspeed=”18″ loop=”true” cursor=”color:#fff!important;”]New Business Divi Child Theme+ Ready for Download Right Now[/typedjs]

NOTE: Make sure that the “” characters in the shortcode are copied correctly and are not “” or ¨¨, because it may not work.

As you can see, you have there various options. In my case I have 2 strings: “New Business Divi Child Theme” and “Ready for Download Right Now”.

Then you have there some timing settings. If you want the animation to be slow, enter a high number like 300. And if you want it fast, enter a low number like e.g. 10. Just play with these numbers and see what works for you.

To insert your animated text to Divi (or any other theme), just insert the shorcode where you want to have it. If you use Divi, ideally place it into a code or text module. However, in my case I inserted the shortcode into a fullwidth header module’s content field. I also disabled it for mobile by cloning my header module and disabling the version without the shortcode for mobile devices.

Finally, I’d like to invite you to check out my other article that briefly reviews Divi, just in case you are using a different theme and would like to find out more about Divi.

That’s all there is to this. I hope you will find this tutorial helpful.