0:00
Hi guys, I'm Abhishek from K2 blogging and in this video I will show you how you can
0:04
add a preload animation to your WordPress website. So let me just refresh this page and as you can see, there is a preload animation before
0:13
the website loading. So you can easily add this preload animation to your WordPress website
0:18
So let's go to the WordPress dashboard and all you need to do is add a plugin to your
0:23
WordPress site. So click on add new and here in the search section, you have to search for preloader
0:33
And here you will see a plugin like preloader plus and this plugin has currently 30,000
0:39
plus active installation. So let's click on install. And now activate this plugin
0:49
Now click on the appearance tab and here click on the customize option
0:54
Now in the theme customizer, you will see an option called preloader plus
0:58
So click on it and here click on the icon and you will see some preload animation
1:04
So you can select any one of these preload icon and it will show a preload animation
1:11
like this. You can also add a custom image as a preload animation and set the dimension of it
1:19
And here in the animation tab, click on fade so that it will add a fade effect to the preload animation
1:27
You can also set the animation speed. So I prefer to set it around 300 to 500 milliseconds
1:35
So I will select 300 as animation speed and it will speed up the animation to 300 milliseconds
1:43
Now click on back and here click on setting. Now you will see some option
1:50
So there is a progress bar at the top. So you can close that progress bar and the preload animation will look like this
1:58
Now you can select a percentage counter so that it will count the percentage of loading
2:04
screen animation like this. And you can also add your blog name or you can also add a custom message in this animation
2:13
So let me just select my blog name here. And as you can see, the blog name is added
2:21
You can also set the preload background from here. So let me just change the background from black to red
2:29
And as you can see, the red color is added. So I will prefer to set it as black
2:37
Now scroll down and here you can add your custom content like welcome to my website
2:47
And here select the custom content option. Now it will add the custom content in this preload animation
2:56
So in this way, you can add different section to your preload animation and you can also
3:00
restrict this preload animation to the front page only. So it will show the preload animation in the homepage and it will not show in other pages
3:11
Now click on back and you can also set some animation delay and you can set the animation
3:17
duration from here. And if you want to add a custom icon to your preloader, then you can do that
3:24
So here click on icon slash image and you can set a custom icon here
3:28
So click on select image and let me just upload a GIF file from here
3:34
So click on it and let me just upload this GIF. Now select the image
3:42
So it will show a preload animation in this format. Now you have to go back to the setting
3:50
And here you have to click on the custom image option and disable the built-in icon
3:58
Now it will show a preload animation like this as the background of the preload animation
4:03
is white. So let me just select white. Now as you can see, the preload animation is added with our custom icons
4:12
So in this way, you can either use the built-in icon or you can use your custom image in this
4:18
preload animation. I hope you got the idea how to add a preload animation to your WordPress website
4:25
And if you have any doubt regarding this, then you can ask me in the comment section
4:30
And by the way, if you want to add a WhatsApp chat button to your WordPress website, then
4:35
you can watch this video. I will see you in the next video
