Up next in 10
How to Add Animated Typing Text Effect in Wordpress
468 views
Jan 24, 2024
This tutorial video guides viewers through the process of adding an animated typing text effect in WordPress. Released in 2023, the content provides step-by-step instructions on incorporating this dynamic and attention-grabbing feature to enhance the visual appeal of text on a WordPress website. Whether you're a blogger, content creator, or website owner looking to add a creative touch to your site, this tutorial offers practical insights and clear demonstrations. Learn how to implement an animated typing text effect in WordPress to make your content more engaging and visually appealing to your audience.
View Video Transcript
0:00
Hello everyone, welcome to another video on WordPress and in this video I will show you how you can add a typing text effect in your WordPress website
0:07
So my name is Uppsik Fadi and welcome to the channel. So here we are going to use the cadence blocks to create a typing text effect in WordPress
0:17
So recently in Cadence 3.0, they have introduced the type text feature in Cadence blocks plugin
0:22
So you can use it in free version as well. So here when you add a text like this, so you can add multiple text in the text
0:29
in a single space and you can swap out in a loop
0:33
So let's check how we can add a typing text effect like this in our WordPress website
0:39
So here as you can see that you will see a lot of typing text effect in various websites
0:43
So how we can implement it in our WordPress website. So for this I will go to WordPress dashboard and let me just go to dashboard here and let me just
0:53
go to the plugins and here as you can see that I am using the Cadence Blocks plugin version 3.0.41
0:59
So, this is the free version of Cadence Blocks plugin. So now, after installing the Cadence Blocks plugin, let me just go to the pages here and
1:08
let me just go to Home page edit. Now let's check how you can add an animated text effect in this Hero section
1:16
So for this, let me just select the heading here and let me just reduce the size a little bit
1:22
So let's change the 4-R-EM to 3-REM. Now let click on here and let me just change the head the letter case to uppercase here Now what I can do is I will remove this bloggers and YouTubers here
1:43
And I will hold Shift and Enter. And I will adjust the text here like this
1:49
Now I need to add the typing text effect in this word creators
1:53
So I will select it and I will click on the drop down menu
1:57
Now you will see this option type text. So let's click on here and here in the cursor let me just add the cursor like this
2:06
Now here in the additional string I can add these additional strings
2:10
So the first one is creators and in the second string I can add like bloggers
2:16
So let's keep it capital and let's add the string like YouTubers like this
2:26
Now here you will see this option, speed settings. So let me just increase the type speed
2:33
So increase the milliseconds. So let's add it like 100 milliseconds. Now let's click on here
2:39
And as you can see that now the typing text effect is added to our headings
2:44
Now let me just update this page and check in front end
2:48
So let's open it in a new tab. And here as you can see that the animation effect is added to our hero section
2:56
I recommend you to separate these two lines. So you can add a fast line here like this and you can add the second line in a separate heading block so that you can avoid some potential errors So let me just show you So what I can do is I will remove this section from here
3:16
So I will cut it from here. And as you can see that it is now working perfectly
3:21
So I will now click on headings here and I will click on insert after
3:26
And I will add an heading here and let's paste that text here
3:31
Now let's change it back to H1. Now let's click on here
3:36
So this font size is 3 em here. So let's change the font size from here
3:43
So let's add the 3 em. And let's reduce the padding here
3:52
Let's add the top padding to 0 and bottom pairing to 0
3:58
Now here I can adjust the line height. So let's add the line height to 1 here
4:06
Now let's add the top margin so we can add a negative top margin here
4:13
So let's add minus 25 like this or you can close it further
4:21
So let's add minus 28 like this. So in this way you can separate the first heading and the second heading and you can
4:31
can avoid the layout shift in your headings. Now let check how you can add the typing text effect here as well So here this is the heading kickstart your strategic digital marketing campaign So I want to add the type text effect in digital marketing So what I can do is I will cut this text out from here and I will duplicate these headings
4:54
and I will add the text here. Now I will click on here and let's reduce or remove the bottom margin from here
5:04
Now I want to change this digital marketing with different words. So I will select it and I will click on arrow, click on type text and here in the additional
5:15
string let me just add it like email marketing and let's add something like affiliate marketing
5:24
like this. Now let's set the speed to something like 130 milliseconds and let's let's see speed to something like
5:34
Click here. And as you can see that, it is now adding a typing text effect like this
5:41
So you can adjust the speed here. So let's set it to something like 80 milliseconds
5:50
Click on here. And as you can see that the speed is now increased
5:54
So in this way you can add a typing text effect inside your WordPress website using the
5:59
Cadence Blocks plugin. So I have already made a couple of videos on Cadence Theme and Keynes
6:04
Cadence Blocks plugin. So you can check the Cadence Tutorial Playlist. So the link will be given in the description
6:10
And if you have learned something new, then make sure to hit the like button
6:14
And if you are new to this channel, consider subscribing. Bye bye