Elementor – Creating a custom Preloader using a JSON file

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

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:

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.


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

One Response

Leave a Reply

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