With the release of Elementor Pro v3.6, the Elementor Preloader was brought to life which is an interesting feature that enables you to set up different kinds of pre-loaders for your website, for example, you can use animations, images, icons, as well as assign color, size, and speed of your preloader.
In this tutorial, I’ll show you how to add enable a site preloader using Elementor. The Elementor preloader is a global feature that is only available for Elementor Pro users, and v3.6 and above.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor Preloader Tutorial
What You’ll Need to Create a Preloader in Elementor
The preloader feature is only available in the new version of Elementor, and only to pro users.
Enable Page Transitions & Preloader On Your Site
With your Elementor Pro installed, go to the Elementor menu on your WordPress dashboard and click on Settings (00:58). In the Elementor settings, go to Experiments, and under Ongoing Experiments, scroll down to Page Transitions, enable/activate it (01:04), then save the changes.
After activating your page transitions, go to Pages on your dashboard and open up any page with Elementor (01:18).
In your Elementor editor, go to the hamburger icon (≡) on the top left then click on Site Settings (01:23)
Note: You can not set up the preloader or page transitions for only a single page or section in your Elementor, the feature is site-wide.
Use an Animation as your Website Preloader
In your Site Settings, click on Page Transitions and that’s where you can enable your elementor preloader.
Click on the Preloader option, and on Type, you can set it to Animation, Icon, or Image (01:56).
If you, for example, set it to animation, you’re given a list of different animations to choose from (02:09). When you select bouncing dots and click on the update button, then preview your page, this is what you’ll get (02:20)
For further customization on your animation;
Go back to your site settings > animation > animation speed, set this to 1150 ms, put Preloader delay at 0, you can also change the color of your bouncing dots, as well as increase their size (02:41). When you’re done, save and preview.
Back in your settings, change the animation to nested spinners, set the animation speed to 500 ms. When you update and preview (03:15)
And if you change to progress bar and set the animation speed to 1050 ms (03:33)
To Read: How to Apply Different Color To Text within Headings in Elementor
Use an Icon as your Preloader
If you change the preloader Type to Icon, you’re able to go to the Icon Library and choose an icon you want to use, and you can use the settings to edit your icon appearance to your preference (04:06), then you can just update and preview.
To Read: How to Apply Different Color To Text within Headings in Elementor
Use an Image as your Preloader
When you change your Preloader Type to Image, you can browse your Media Library, choose the image you want, insert it, select an animation for example, ‘pulse’ (04:34), then update and preview.
Use a GIF image as your Preloader
If you are wondering whether you can use a GIF as your preloader, the answer is yes!
To try this out;
Go back to Page Transitions and change the color to black, then go to your Preloader; remove the image you had set earlier then go to your media library and choose a GIF image, insert it, then you can use the settings to change it to your liking, and when you’re done just update (06:07).
Note: If you’re going to use a GIF image for your preloader, make sure that it is transparent so that it doesn’t block your website content from your visitors’ visibility.
Also Read: Free Elementor Remote Vertical Carousel Slider by Premium Addons
Elementor Preloader Responsive Settings
In your Preloader settings, click on the Responsive Mode icon at the bottom left (07:12).
Select the Mobile or Tablet device and under the Size option you can increase or reduce the icon to your preference (07:24), then update and reload your page.
In Closing
That’s how you can set up a preloader for your Elementor website with Elementor Pro 3.6 and above.
For any comments or questions use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.
