Elementor Preloader Tutorial: Make an Awesome Website Preloader in Elementor Pro

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.

GYX0HxoZxT89nizRxPXyrn0lHNBhF S0OJegv4zTfNo3kAa4oz9xV7wWERGFdy7MSmcMGsN4fsIrp7z9Jl06I7W84JentJA89JppXi3jVvccwuF UA jCLpmSGMP6ffsdzPrE6AD
5xj XjZglDn7Fjn1UxYLuG33oap9aAVpvbHJaVAKtQx59 2a165 HzdBLqZkFOO Trplw TZkQNXx6N 0BEAXgWUvgqF4sgqOy9G9NL10 vkynGhzIlXoNu2c1uSiZ 3IPgYrD93

After activating your page transitions, go to Pages on your dashboard and open up any page with Elementor (01:18).Io7SqDrN 6188HOK67 xrntqCNQPaMBqDAy604YWcKNIuceMgOxuOlVAOf 4uxaGE9AGGr iB0hjhit9c9jryhCNvi1eLStmb2E6CGE Fz6aoBMoflY9msu99JLlJiHoz881NDm

In your Elementor editor, go to the hamburger icon () on the top left then click on Site Settings (01:23)

iUaIkTgxhnCswcDf9e6zPjj9XibRgAUdkE7or9FF7cJqWxyxMcDresYmD7TgwD8Vw h2f2QEugAp3 pz jZI5D wiLkJWQHIrv KendQTZL59yJBINYuDNHOvdylnyAbP7IgYui5

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).

bYXqrg

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.

9llGsiQzGDXmhDwyKibskQaw unLyao2S5PKP eAJtN1L pevb6bSddCM9lZjUfO6vcnx5k1mjAtig3S6 0TWOV ropdSXKCBYFipJBoOiVvVCEK m9MGEgQsPreBsFYfyHdsWmg
tjv7JWbDgnUfQq3fuyqZ3J0MuCAqbTLlnJVMqDBCgWyMNStLQRNSyJeWG9M vF5tGHCnMLVd8pE7F8h IRu6PF3TNO8BP6 EO9V5 uFu0r6XsMqmiSMHYih6kF ezHjMawwQARR

Back in your settings, change the animation to nested spinners, set the animation speed to 500 ms. When you update and preview (03:15)

8rjmN8Sh6xGQXm8Ed8FervorUj3mFma0S HO xaCkfhprOxAFmR1h hTgYh

And if you change to progress bar and set the animation speed to 1050 ms (03:33)

JnWhw1mI7NcIofJKa2lQbGG5oqXRTFiYLjF7z qsnkccBEBaE7K6wfD0H 2JHw8CpqBb0aYKUHC1EeduPwuES2y9d5YdtiZag kJ4jUoSHuMC2drDtPvkPrUQSlGknv1ZVZLRXt

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.

yBlkdWmEPsWtjN6zmBnQsRGigVwEc9eQ8Rxw404QHJxzJUg4iJxnNM7V Y0fALXgtKoNsmm LajdRiVCeE7z4iRZeK1RDfMiXIYCZXZLzjWw oNme4ktM07D6D5meiR34LccB6v
elementor preloader tutorial

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.

Cnqil3b3Pird5lNzl7HTTFA mWKguLmma9Bo3wGNK87iucAAVudT6c53JroAXU0FRewszn3K ACZCQxieTaxC6o0vYQHX7efyyShEjKoU1leYI2TatvrIwXB8bIx33vVFxs9g d
O J9EJHgu1LdkbWv0OWKr9iWHlogAhHU7Wpux9 0ufK 5q6FWa1rAezu0jwCLlZYQMZMRzdLM8jPkh16nWOKiByMvlaM0UuDeh8aU5FmckFSZY Wv7YnjXUQz9fGjGukJhlBUiZf

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).

e8dnw1ucPT0FoWZj pD RoKgwbDKLOxWn7IqK6tCk6g046VhymnugfSUO1BIvnKnarzbr8rw8 fBEMIh5JRRagjSAZu3j KVMGv9E9G FRqGEgNlQTe yac4 zjcuYADt5jkTFr

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).

zV5AZpDEy3N6mvQZb8708Dq9RRBtvyU9DYOdLCLLxNRNuZKsfXWoyCoWsv2 LvpWbRai zz y6cAOQhlcvWpBpmxnl hWt7zwLH

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.

VKYfiKKoJRZuqNA7DY3iXu 01Qnz9s FRn6QVGO2LX9iiorUB59KLHrntvYHuPoAVrfmzMw4F2UO6Q4VqIjjbpsqLncRWKoDQ bLo1ycUXgyhALNOJLJhUMJi0TUNdosr43Th5IA
IigG8uPocaigz grJETSQqGgpFFaDR7NN1JsVhOI6ldTwlpE0JYCEONRRjXE1lvlVhe6WqcSARwpVG0Vht5Vayh6kTs2A WihQibVmyKX54T IapfUK vbkum zBiqFrs 6 Z8bk
Ta d73rGp7ZGTHG

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.

Also Read. . .

6 Best SCUM server hosting services

If you are an avid survival gamer and are thinking of venturing into the intense world of SCUM, then you know that having the right server may either make or break your gaming experience.  The

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users