HOW TO: Lottie Animations for Elementor Website

Lottie Animations

What is a Lottie and where can you find them? How to edit and embed Lottie Animations in your Elementor website? In this article, I will address all those questions so you will be able to use this popular format in your web design projects too.

What is Lottie and Why Should I Use it?

Lottie is a vector animation format which is high quality, small in size, interactive and can be edited online. It can also be manipulated at runtime which gives you the additional freedom of displaying Lottie in a way you want. According to LottieFiles, the size of a Lottie file is 600% less than similar animations in GIF or PNG formats.

Lottie Animations

Motion evokes emotion. It can humanize your website, adding empathetic experiences that educate, entertain, and engage. Lottie is now the easiest way of bringing motion to your Elementor website.

How to Edit a Lottie?

LottieFiles provides an easy online tool where you can edit your downloaded Lottie file on the fly; you don’t need to look for a Lottie with specific colours to match your website design, you should be able to change layer colours easily. You can also change text layers to customize your messaging. For those who use the Telegram App, you can create animated stickers specifically for Telegram.

Lottie Animations

Click here to launch Lottie Editor to edit your Lottie.

Adding a Lottie Animation to your Elementor Page

Elementor Pro and other Elementor addons have widgets to add, configure and style Lottie files within the widget’s settings. Simply drag and drop the widget to the desired place on the page and go through the settings to adjust it to your needs.

Lottie is rendered from .json files so under the Source upload or reference an external .json file.

Important settings to consider:

  • Trigger: Choose what will trigger the animation to begin, selecting from Viewport, On Click, On Hover, Scroll, or None.
  • Loop: Choose No or Yes to continuously loop the animation.
  • Start and End Points: Select at which points the animation will begin and end.

Under the Style Tab, you can also select the width and max width of the element, its opacity and CSS Filters to control Blur, Brightness, Contrast and Saturation.

If you do not have Elementor Pro, you can download a free WordPress JSON Animation plugin for Elementor which will do the trick. In addition to Auto Play, On Click and On Hover triggers, it offers Mouse Over Out Effect, Parallax Effect and Reverse on Second Click.

The best paid Lottie plugin I have come across is by LottieFolder. It comes with several very powerful widgets: Animated Icons, Animated Graphics, Background Elements, Flip Box and Upload Lottie. It also comes with hundreds of Lottie files and sets to choose from. Play settings also stand out with triggers like Autoplay + on hover, Autoplay + on click, Play in viewpoint + on hover, Play in viewpoint + on click.

Lottie Animations Resources

Every day there are more and more resource marketplaces where you can find Lottie graphics, icons, logos, and other files, free or premium. I would like to mention several that I’m using myself for my projects:

If you need further help or would like to order our services, please send a request.

Picture of Alex


Web Designer & Developer and Elementor expert with 15+ years of experience, I commit to providing the highest quality web services and technical support to my clients. My resume includes the United Nations, Civil Society Organisations and Private Sector clients across Europe, the Middle East and Africa.




You might also like

Do you have any questions about our services or would like to place an order?

Get in touch with us to receive detailed information on any of our services.

© 2024 Alex Design Lab. All rights reserved.

Quick Links

Privacy Policy

Who we are



When visitors leave comments on the site we collect the data shown in the comments form, and also the visitor’s IP address and browser user agent string to help spam detection.
An anonymised string created from your email address (also called a hash) may be provided to the Gravatar service to see if you are using it. The Gravatar service privacy policy is available here: After approval of your comment, your profile picture is visible to the public in the context of your comment.


If you upload images to the website, you should avoid uploading images with embedded location data (EXIF GPS) included. Visitors to the website can download and extract any location data from images on the website.


If you leave a comment on our site you may opt-in to saving your name, email address and website in cookies. These are for your convenience so that you do not have to fill in your details again when you leave another comment. These cookies will last for one year.
If you visit our login page, we will set a temporary cookie to determine if your browser accepts cookies. This cookie contains no personal data and is discarded when you close your browser.
When you log in, we will also set up several cookies to save your login information and your screen display choices. Login cookies last for two days, and screen options cookies last for a year. If you select “Remember Me”, your login will persist for two weeks. If you log out of your account, the login cookies will be removed.
If you edit or publish an article, an additional cookie will be saved in your browser. This cookie includes no personal data and simply indicates the post ID of the article you just edited. It expires after 1 day.

Embedded content from other websites

Articles on this site may include embedded content (e.g. videos, images, articles, etc.). Embedded content from other websites behaves in the exact same way as if the visitor has visited the other website.
These websites may collect data about you, use cookies, embed additional third-party tracking, and monitor your interaction with that embedded content, including tracking your interaction with the embedded content if you have an account and are logged in to that website.

Who we share your data with

If you request a password reset, your IP address will be included in the reset email.

How long we retain your data

If you leave a comment, the comment and its metadata are retained indefinitely. This is so we can recognise and approve any follow-up comments automatically instead of holding them in a moderation queue.
For users that register on our website (if any), we also store the personal information they provide in their user profile. All users can see, edit, or delete their personal information at any time (except they cannot change their username). Website administrators can also see and edit that information.

What rights you have over your data

If you have an account on this site, or have left comments, you can request to receive an exported file of the personal data we hold about you, including any data you have provided to us. You can also request that we erase any personal data we hold about you. This does not include any data we are obliged to keep for administrative, legal, or security purposes.

Where we send your data

Visitor comments may be checked through an automated spam detection service.

© 2024 Alex Design Lab. All rights reserved.

Quick Links