Home Scroll Top Go to Deals

How to Use Lottie in WordPress?

LottieFiles has officially released a plugin for WordPress to add the LottieFiles on our WordPress website in the simplest way possible, and that’s even for free.

What are Lottie Animations?

Lottie Files are simple JSON-based interactive files that simplify adding super cool animations to your website. It’s an animation library that enables designers to ship animations on any platform as quickly as shipping static assets. Then, you can natively render them on your website or in a mobile app.

Recently LottieFiles has released their official plugin for WordPress.

Why should we use Lottie Animation in WordPress?

  1. It is Super Small in size.
  2. LottieFiles are the perfect alternative to GIFs.
  3. It comes with Cross-platform support and works with all Web browsers.
  4. It is highly scalable & High-Quality animation.

How to use Lottie Animations on WordPress?

There are a couple of WordPress Plugins available in the WordPress repository that you can use to add a Lottie Animation to your WordPress.

In this blog post, I will guide you to use three different plugins to add a Lottie Animation:

  1. Lottie Block for Gutenberg – This is the official plugin released by LottieFiles. This is the easiest plugin to add LottieFiles to any WordPress post or page.
  2. Elementor Pro – Elementor officially supports the LottieFiles and it includes a dedicated Lottie widget in the Page Builder. Know More.🙌

Read our Full Review on Elementor Page Builder now.

  1. Spectra – Gutenberg Collection built by Brainstorm Force, the same team behind one of the most popular WordPress Themes, Astra.

Read our Full Review on Spectra now.

How to Use Lottie Block in WordPress?

  • Download and install Lottie Block for Gutenberg.
  • Connect your plugin with LottieFiles.com
  • That’s all! Now you’ll have LottieFiles block in your block library.
Lottie in WordPress

Features of Lottie Blocks

LottieFiles has packed several interactive features in the Lottie Blocks plugin. It lets you add the animations directly from LottieFiles.com using the discover tab built into the plugin.

Other than the discover tab, it lets you to import your favorites directly from LottieFiles using the “My Animation” tab with a click.

Amazing, isn’t it? 😃😃

Lottie Blocks for Gutenberg

You can also import JSON files created using After Effects using the “Import” tab in the plugin.

Lottie Blocks for Gutenberg

It’s quite amazing to see finally LottieFiles has an official plugin for WordPress.

It also offers block settings to control the height, width, and speed of the Lottie animations that we’ve added recently.

Web capture 10 6 2022 214729 frost.local

Hope you guys will like this guide for using LottieFiles in WordPress for free. If you got any doubts in your mind, don’t forget to leave a comment down below 👇👇. Don’t forget to share the post and subscribe to my newsletter for more updates.


LottieFiles are the best way to add animation on a website and make it interactive without worrying about the loading speed. I hope you liked the post. Don’t forget to follow us for more.

Aryan Chaurasia
Aryan Chaurasia
Articles: 59

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply

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