How to Use Lottie Image Widget

How to Use Lottie Image Widget

The Lottie Image widget developed by Element Pack will allow you to add an animated image on your website.

The guideline below about the Lottie Image widget will get you to walk in the right way to use the widget. Moreover, I’ll guide you in different phases of how you can insert & use the widgets to design layout for the content (text, image, and video, etc.) you want to work with and style as well.

Content Tab

The Content Tab having some handy sections for making an attractive web page will genuinely get you to have a structure of the web content (text, image, video, etc.). You will find a section named Layout and several controls here to work with.


In this section, you can edit or select all the controls and can also enable the switcher button(Yes/No) in accordance with the design.

Go to the Layout section. With the default functions, if you are to use another function, you have to activate them.

However, go to Caption control to add a caption with Image and Play-Action (Play on click, Play on Hover, Paly on Hover Section) and Start When (When Scroll, Page Loaded) control to set how and when the image will be animated and you can also set the speed of image animation.

Thus, you can go for Loop control. Loop works for if anything is needed to run over and over again.

Importantly, the Alignment control will allow you to set the Lottie Image in various positions such as left, center, and right. Here, there are opportunities to resize the image using Width and Max Width.

Most importantly, you can add a link to the Lottie Image through the Link control along with Open in New Window and Add Nofollow options.

Simply, go to Link control > select Custom URL and past your desired URL as you see > then hit the Link options button > next you can check any available (Open in new window or Add nofollow) or not.

The most important thing, to get more animated images, you have to visit the websites that provide an animated image so that you can copy the icon link and paste the link as you see in the Layout section.

Style Tab

It is time to work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you want to design. You will see a total of seven sections and several controls here to work with. 

Let’s have a look.


This section will allow you to give style to the image. The Lottie section will allow you to use the controls Border Type, Border radius, Box shadow, Opacity, and CSS Filters. Use the controls mentioned freely.

If you want to hover the image, you can do that. Just go to Hover tab > and set Opacity and CSS Filters.


Here, you’ll be able to work with the image caption, the demonstration you see in the screenshot has been done using the controls Alignment, Text Color, Background Color, Padding, Typography, Text Shadow and Spacing. Read more about typography and padding.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.