How to create a typing text effect

In the hero header section of our Utopia theme, you’ll notice a cool typing text effect. This is one of the built-in features provided by Kadence Blocks plugin called “Advanced Text Block”. In this tutorial I’m going to show you how you can add this typing text effect to your page.

Step One

Insert a new Advanced Text block, or modify an existing one.

Once you’ve done that, use your cursor to select or highlight the word or phrase where you want the typing text effect applied. On my example below, I highlight the phrase “that tell your story“.

Step Two

With the phrase still highlighted, click the More icon from the toolbar, and select Typed Text. This will give that phrase a typing effect.

Here is the result. In the sample below, I have the Loop Typing option turned off. Under Speed Settings, both the type speed and backspace speed are set to 60 (ms).

Step Three

You can also take it to the next level by adding more phrases or strings, allowing for a dynamic shuffle between them to make it even more interesting. In the cursor field, I changed cursor symbol from _ to | to mimic the appearance of actual keyboard typing. Loop Typing option is turned on. I added a couple more strings. Under Speed Settings, both the type speed and backspace speed are set to 70 (ms).

Here is the final result: