How to Create Animated Typing Effect on WordPress
If you have seen the demo of my first Divi child theme that I released recently, 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.
So 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, 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.
Also, you may notice that this plugin was last updated 11 months ago, but don’t worry, as these kinds of plugins tend to do its job pretty well even if they were not updated for a long time. I have also tested it with WordPress 5.1 and it is working fine so far. If you are still concerned about this, rather consider 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 in your WP admin panel go to Typed > Add New and enter all the details.
In the plugin settings you have various options. Enter your text that you want to animate into the “Strings” field and click on the + button next to this field to add more strings. 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.
Finally, you also have there some styling options. You can choose the font, its size and the color. And you can see the preview of your animated text right at the top of these settings. So you can play with it to achieve your desired effect (to see the changes, you first need to click blue “Update” button on the right in your WP dashboard).
When you will have everything set up, to insert your animated text to Divi (or any other theme), just copy the shortcode and paste it 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.
That’s all there is to this. I hope you will find this tutorial helpful.