How To Use Lottie Files As A Background For Elementor

4.9
(8)

Hey there! Using Lottie Files as a background?

Implementing a WordPress website or blog is very fun. In particular, if you are using any page builders like Elementor or Visual Composer, which is very easy, with lots of free elements and addons. You could use interactive elements and make your website very appealing to end users. However, you need to know how to use these elements works and how to implement these elements in websites.

With that being said, a couple of my students asked me to help out with using a particular element called Lottie Files (JSON based animation). So, I’m going to help here with how to use Lottie files as a background.

For convenience, I have used Elelmentor as a page builder to explain how to implement JSON based animation as background in the following steps.

Step1: Go to lottiefiles.com and choose your preferred animation and copy the JA-SON URL.

copying lottie animation url

Step 2:  Once you copied the URL you may need to convert the JA-SON into mp4 format. You could use any converter, and I would recommend https://html5animationtogif.com/lottie-to-video.

Step 3: Once you pasted the URL and selected the required settings, click and download the mp4 file and upload the video into your media file.

convert lottie into mp4

Ste 4: Go to the page builder section and select background settings. I’m using elementor for the example shown below.

Step 5: You can make it to full screen or custom height and set other settings as per your requirements and design needs. That’s it. You can easily convert any Lottie files and convert it into videos and use them as a background for any section or column.

 

 

 

How useful was this post?

Click on a star to rate it!

Average rating 4.9 / 5. Vote count: 8

No votes so far! Be the first to rate this post.

1 thought on “How To Use Lottie Files As A Background For Elementor”

Leave a Comment

Your email address will not be published.

Start generating leads and improve branding visibility for any business.

Stay updated with all latest updates,upcoming events & much more.
Subscribe
SUBSCRIBE NOW
close-link
Download Our Free Digital Marketing Strategy Template & Tracking Template
Download Now
close-image

Free Download

Download our free Digital Marketing Strategy Template with budget planing template, editorial calendar and tracking template. 
Download Now
Terms and Conditions apply
close-link
Click Me