Elementor – Creating a custom Preloader using a JSON file

I’ve combined this handy tutorial into a nice little video for everyone which is above, but I will run through the steps here too.

First up, you are going to need Elementor Pro and you will need a ready to use custom JSON file / lottie animation.

After that, we’re ready to go. So, first up, you are going to need to create a new template section within Elementor and call it whatever you want (Preloader would be a good call here).

Next up, add the Lottie widget to a full width single column and upload your chosen JSON file. Once uploaded, you should see the animation play on your screen.

Some settings to configure:
1. Set the animation to loop
2. Se the Renderer to “Canvas”
3. In the “style” tab, set the width of the animation

Now we have the settings done, go ahead and save the template and exit back to the dashboard.

Now, when you click on “Templates >> Saved Templates” you will see a shortcode next to the “Preloader” section you just created. Now, go ahead and copy that to your clipboard.

Next up, install this plugin:
https://wordpress.org/plugins/preloader-plus/

Once installed, you will need to head to “Appearance >> Customise” and click on the “Preloader Plus” option.

Inside that, click on “Settings” and turn off (the eye) all options apart from “Custom Content”.

Now, paste the shortcode you copied a minute ago into the bottom box where it says custom content.

Play around with background colours etc if you want to. Once you are done, save, publish and view the front end of your website.

YOU ARE NOW DONE! GOOD JOB 👏

Any questions, drop them in the comments below. Will try and help where I can.

Related Articles

3 Responses

  1. Hi,

    I have made this and preloader works fine, but when plugin Preloader Plus is active, Elementor editor doesn’t work. Can not see anything, just bland white page (with Elementor menu on the right). When I turn it off, I can see Elementor again and everything I made on that (or any) page.

    Have you noticed problem like this before?

    1. Hmm, very strange. Still working perfectly on the site I made this for and my test site too…

      Have you tried deactivating plugins one by one to see if there is another conflict with the preloader plugin? Is everything up to date plugin wise?

Leave a Reply

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