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

Image temporarily unavailable

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.

Image temporarily unavailable

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.

Image temporarily unavailable

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.

Image temporarily unavailable

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.

Image temporarily unavailable

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.

★★★★★

Hi Shaun - just to say this is such a lovely design and a huge improvement on where we were. Thanks so much for the video and handling all of that too - they are brilliant.

Sarah @ TreloyMar 2026

Working with Shaun has been fantastic. A proper pro, always on hand to help sort things out and provide advice and guidance when needed. And not forgetting his design skills, creativity and knowledge of building websites making them work and run as smoothly as possible - a 1st class service.

Matt LidburyMay 2026

Shaun at Innuvo has produced an outstanding site for me. He took time to understand what I needed and explained how things would work, and has blown me — and many of my customers — away with the resulting stunning website. He's been very patient with edits and was on-hand when I went live. The payment system worked without a glitch, and I'm sure it was thanks to the site being so clean and engaging that I sold out of my product within 48 hours. Thank you so much.

Frances Houghton MBE

We used the services of Innuvo to build our new website for our architectural company. As we're design based, we had really strong ideas of how this should look and feel. Shaun interpreted our requirements perfectly and spent a lot of time ensuring we got exactly what we wanted. His professionalism and patience throughout the whole process were outstanding. We definitely made the right choice and would not hesitate in recommending their services. Thanks again Shaun.

Lee Crease

Shaun has produced an absolutely first class website for my new company. I was after a very specific look and feel and Shaun captured that vision perfectly and turned it into reality. His patience and understanding throughout the process were exceptional — even though I kept wanting to make changes, nothing was too much trouble. His knowledge of web design is exemplary and his pricing very reasonable for the quality. I'd definitely recommend Innuvo and Shaun to anybody.

Andrew White

As a superyacht, medical and premier automotive design consultancy, the pressure was on for Shaun. Challenge accepted — high-end results achieved in line with my minimal aesthetic. Great work Innuvo, highly recommended.

Morpheus7

I've been absolutely astounded by the amazing support given by Shaun at Innuvo. He really knows his stuff and never fails to solve any issues I come across very quickly. It's not often I feel the need to rave about customer service, but this guy has surpassed all expectations. I have absolute confidence in his abilities — he's like a WordPress wizard!

Sally Harwood

Working with Shaun of Innuvo to develop my business website was a really positive experience. I explained my vision and site concept and he developed some possible looks. I have no hesitation in recommending Innuvo to prospective customers.

Miles K

Top class web design service. Shaun really knows his stuff when it comes to building websites. Nothing is too difficult, and the more technical bits like CSS or PHP are second nature to him. Experienced and very knowledgeable in all areas, and the after-support once the site was built has been fantastic. Worth his weight in gold — thanks again!

Chris Sweet

We hired Innuvo to build our new website and are extremely happy with the results. Professional, responsive and a pleasure to work with from start to finish.

Jam Press

Shaun at Innuvo formed my website for my start-up company. Following an initial conversation he instantly understood the ethos of the company and translated that into the layout and imagery of the website — it needed very little amending from the first draft. Shaun delivered on creativity and the right site to attract my target market. His ability to respond and deliver very quickly impressed me, and he was always helpful and willing. I thoroughly enjoyed working with him.

Natasha Stevens

Really pleased with the work and cannot recommend Shaun enough.

Sean Johnston

Elementor – Creating a custom Preloader using a JSON file

Got a project brewing? Let's talk it over a coffee.