Is your webpage fairly large and can take quite a bit of time to load? Do you want to prevent your visitors from seeing an unfinished page and only show when the page has been completely loaded? You can achieve this with the help of a Preloader.
In this article, we are going to show how you can add a preloader to your elementor website.
What is a Preloader?
Preloader is basically a percentage of completion of the loading process of a webpage. They are loading animations that are displayed to the visitors while the page is still being rendered in the background. Once the page loading process is completed the preloaders are removed and the actual web page is displayed.
We are going to use the Preloader Plus plugin for adding a preloader to the webpage. This plugin has more than 30,000 active installations and a 5 star rating in the WordPress plugins store.
Steps to add an Elementor preloader
- Install and activate the Preloader Plus plugin.
- Navigate to Appearance -> Customize from your admin dashboard.
- Scroll down to the Preloader Plus option and click it.
- You will see a few options that will help you activate the preloader on your website now.
- Click on the Settings option.
- Make sure the Enable preloader option is checked. Then scroll down to the Elements positioning and visibility section. Here you can click on the eye icon for which functions you want activated in your preloader. We will activate the Built-in icon, Blog name and Percentage counter for this tutorial. You can also arrange the order of these items by dragging them up and down in the list. As you select the options you will be able to see the changes in real time on the right side.
- You can also use a custom icon for your preloader. For that go back and click on the Icon/Image option. Scroll down to Custom icon/image, click on the Select image button and upload your image. Now go back to the Settings option and activate the Custom image option in Elements positioning and visibility section.
- Once done click on the Publish button at the top and your preloader will be live on your website. There are various other settings that the plugin provides which you can use to customize the look of your preloader.
Conclusion
Preloaders can prevent the bounce rate from increasing on your websites that take time to load. They are cool animations that keep the visitors engaged while your webpage is loading in the background. With the help of the Preloader Plus plugin you can easily display a preloader on your Elementor website.