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

10 Responses

  1. Hello, when I switch from SVG to Canvas, my JSON file changes, a word turns black, and a green box appears out of nowwhere.
    When in SVG, its flawless. Any ideas?

    Reply

    1. Hi reggie

      Apologies for the delayed response, things are a bit mad here.

      I havent had that issue at all before? Did you resolve and if so, how? Just in case anyone else has the same problem.

      Thanks

      Reply

  2. Say whaaaatI It’s this easy?! I’ve been looking for a long time for a quick way to do this! This is perfect! Thank you so much for taking the time out and sharing your knowledge. Good karma to you 🙂

    Reply

  3. Hi,

    It’s work very fine for me, but if i go to a post and try to modify with Elementor i just see my preloader animantion and still go forever.

    I try to disable the plugin and after that with the posts all works fine?

    Any solution?

    Thanks

    Reply

    1. Have you tried deactivating other plugins to see if there is a conflict. I havent experienced that at all with the couple of sites that I have this used on…

      Reply

  4. 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?

    Reply

    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?

      Reply

      1. I have update everything, and now I can see only preloader on every page. I must turn it off to work on my page and when I finish, turn it on again. 🙁

        Reply

Leave a Reply

Your email address will not be published.