fbpx

Table Of Contents

lottie image widget

How to Use Lottie Image Widget Empowered by Element Pack

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

The guideline below about the Elementor 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 for the image widget to work with.


Layout

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.

elementor lottie image widget layout

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 for the elementor lottie image widget.

layout alignment

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.

elementor lottie image widget link

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.

That’s all about the control settings for the Lottie image widget by Element Pack.

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.

Lottie

elementor lottie image widget style options

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.

color options

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

Caption

elementor lottie image widget caption style

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.

Video Tutorial

For a more detailed guide, please see the video on lottie image widget by Element Pack.

SIGNUP NEWSLETTER

Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Missed Black Friday offer this year? Get up for flat 50% discount right now. Check Here

© Copyright 2021 All Rights Reserved by BdThemes

Missed the Black Friday offer this year? Get up for flat 50% discount right now.