How to Add Lottie Animation in WordPress?

ABOUT THE AUTHOR

Yegor is an aspiring copywriter who is enthusiastic about modern web technologies. He likes creating informative and easy-to-read articles about the modern web.

Best WooCommerce Appointments and Bookings Plugins for Your Website
Prev post
  • Dec 08, 2023
  • 6 min read
  • 241

How to Add Lottie Animation in WordPress?

Lottie Elementor animations are simple, creative yet highly effective solutions. They can spice up any web page. With Elementor being one of the leading web builders, adding such animations is easy. In today’s guide, we’ll show how to add Lottie animation in WordPress to any page, including portfolios. Stratum Elementor widgets and the Gutenix theme will help us with it.

What are Lottie Animations?

Before integrating Lottie animations into your WordPress website, let’s learn more about them. Lottie is a JSON-based file format for vector graphics animations. It is created with Adobe After Effects and other motion graphic apps. This format stands out due to its versatility and small size. It’s even more useful when compared to other popular formats, such as GIF.

The scalability and simplicity of integration made Lottie highly popular in a short time. Moreover, anyone can easily integrate animated Lottie files into design and development projects. It’s possible due to diverse online libraries of ready-made premium & free animations. You can also use any WordPress Lottie plugin to integrate an animation.

Picture of JusticCo, a responsive lawyer WordPress theme, designed & developed by Gutenix.

Tools Used for This Lottie Elementor Guide

To demonstrate how to add these animations with a free Elementor Lottie widget, we have used several widely available tools. Regardless of your experience with WordPress, adding any kind of Lottie Elementor animation to your website won’t be a complex task with our guide. Here’s what we used to make it happen:

  • WordPress with pre-installed Elementor page builder: With WordPress being one of the top-rated CMS for effective website development and Elementor as the leading visual customization tool to match it, you will be able to create impressive websites with smooth Lottie animation WordPress plugins and widgets omitting any unnecessary coding.
  • Gutenix theme: This WordPress theme is one of the easy-to-use and fully customizable solutions when it comes to establishing your website. Regardless of your current experience level with WordPress, this theme will deliver outstanding results, especially with the multitude of available features & skins that are compatible with popular web builders (Elementor, Gutenberg, and Brizy). In our guide, we’ll use the JusticCo skin, which is available without any extra payments. Needless to say, you can use any other WordPress theme!
  • Lottie Elementor animation widget: Finally, the essential element for integrating any Lottie animation is the widget supplied with a free version of the Stratum addon for Elementor. Developed by MotoPress, a leading company delivering niche solutions for WordPress, this addon offers 20+ free & premium widgets for everyone’s favorite page builder. From adding animations to integrating Instagram feeds, this tool enhances your website content easily.

Step 1: Install and Activate the Gutenix Theme (or Use Any Other One on Elementor)

Photo of the Gutenix theme activation process in the Appearance section.

Assuming you have WordPress & Elementor installed, we recommend starting with the theme activation for your website. As stated above, we chose the Gutenix theme for this tutorial. First, you’ll need to activate it after installation in the WordPress dashboard. Navigate to the Themes tab of the Appearance section to choose the preferred theme.

Step 2: Choose the Preferred Design

Graphic of Gutenix skin installation using the Gutenix Wizard plugin.

After that, we’ll need to activate the Gutenix Wizard plugin. It will enable skins and additional designs for the selected theme. They are available as a part of Annual and Lifetime memberships. The JusticCo skin can be selected here as shown in the image above.

Representation of picking the desired Gutenix skin via the Gutenix Wizard plugin.

Step 3: Install and Activate Stratum

Visual of activating the Stratum plugin for Elementor via the Dashboard.

Next, let’s install and activate the Stratum addon to make integration of Lottie Elementor animations possible. You can find it in the Plugins section of the dashboard to activate it. If it isn’t installed yet, browse the WordPress plugin directory by typing Stratum in the search bar of the Plugin section. All of this can be done in the admin panel of your WordPress website.

Step 4: Create a Page in Elementor

Illustration of the "Edit with Elementor" button that allows you to edit Lottie Elementor animations.

When everything is ready, we can move to creating a page in Elementor. Then, we’ll add a Lottie WordPress animation to it. First, let’s create a new page by pressing the “Add new…” button that can be found in the Pages section. You’ll see a blank Gutenberg editor page. To switch to Elementor, press a corresponding button on top of the page. The workspace will change and you’ll be able to edit a new page with the desired builder.

Step 5: Add the Lottie Elementor Widget

After switching to Elementor, we can freely customize the new page. Let’s start with adding the Lottie Elementor widget supplied with the Stratum addon. Just select it on the editor’s left panel. You can also type “Lottie” in the search bar to quickly find it.

Image of the Lottie widget added to the Elementor builder.

Then drag the widget to your blank page to start adding the animation to it. The left panel will display the Lottie animation Elementor widget’s controls as shown below.

Rendering of various controls that the Lottie Elementor widget provides.

These are only some basic options that the widget provides alongside more advanced ones that we’ll talk about later in this post.

Step 6: Find a Suitable Animation on LottieFiles

Now let’s find a suitable animation that we will add to our new page. While you may create your animation using any motion graphics editor, such as Adobe After Effects mentioned above, the fastest way is to obtain a ready-made animation from any online library, such as LottieFiles. It’s a marketplace of static and animated Lottie images that can be easily added to any platform, from WordPress to Wix.

Figure of choosing an animation on the LottieFiles website.

For the sake of this tutorial, we chose a free animation to add later to our newly created Lottie Elementor page. To do so, we first need the URL of a JSON file that contains the animation. It can be found at the bottom of the item’s page on the LottieFiles marketplace. Press the Copy button near the JSON link to get the URL.

Picture of the URL section that is required for further Lottie Elementor widget & animation integration.

Step 7: Add the Selected Lottie Elementor Animation to the Created Page

Snapshot of adding the JSON URL of Lottie animation to the mentioned widget.

Finally, let’s add the animation to our Elementor Lottie widget page. Paste the URL we copied earlier into the “Animation JSON URL” field. The animation will appear on the page and start playing instantly.

Step 8: Configure the Lottie Animations Widget and Publish Your Elementor Page

View of the configuration process for the Lottie Elementor widget after pasting the animation URL.

In addition to the abovementioned steps, you may want to perform some extra configurations on the added animation. For example, on the content tab, you can change the size, alignment, and rotation of the Lottie Elementor file. Moreover, you can render it as Canvas if you notice certain performance issues on your page. With the Premium version of Stratum, you can do even more, from looping Lotties to animating them on scroll.

Picture of the Style Tab included with the Lottie animation widget.
Image of the Advanced tab that is a part of the Lottie Elementor widget.

The Style tab offers more control over the chosen animation. For example, you can change its background color or opacity, and add different CSS filters (blur, brightness, hue, etc). For even more options, navigate to the Advanced tab, where you can change the layout of the widget, add motion effects or masks, and more. After all editing on the page is completed, you can safely publish or update an existing Elementor page with the newly added animation.

Representation of the final result that you may get after adding an animation to the Lottie Elementor widget.

Conclusion

We hope this guide on adding a Lottie Elementor animation to your WordPress website has helped you learn how to make Lottie animation and why your website can benefit from it. It’s also worth noting that the Stratum addon for Elementor is available in both free & premium versions offering you a diverse selection of widgets for this builder as we’ve already mentioned.

Stratum FreeStratum Pro
20+ Elementor widgets20+ Premium Elementor widgets
Community supportExtended customization settings
 Priority support
$0$29/year
DownloadBuy
2
Appreciate
Best WooCommerce Appointments and Bookings Plugins for Your Website
Prev post

Get Gutenix Subscription

Create unlimited Gutenberg, Brizy and Elementor websites with dozens of templates, premium blocks and a lightweight theme — all in one toolkit!

Meet Gutenix, the devoted team of developers that stands behind many projects created with Elementor & Gutenberg. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Copyright © 2024 Gutenix. All Rights Reserved.