Table Of Contents

Lottie Icon Box Widget

How to Use Lottie Icon Box Widget Easily

The Lottie Icon Box widget developed by Element Pack will allow you to add an animated icon on your website.

The guideline below about the  Lottie Icon Box widget will get you to walk in the right way to use the widget. In addition, 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 total of three sections 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.

Lottie Icon Box Widget layout

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

For example, 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 icon will be animated and you can also set the speed of icon animation.

Here, the Loop control will continue the animation of the icon if the switcher button is active.

insert any web icons in the elementor icon box

The most important thing, to get more animated icons, you have to visit the websites that provide an animated icon so that you can copy the icon link and paste the link as you see in the Layout section. It works for any web icons you want to place in your website.

Lottie Icon Box Widget title controls

In addition, you can set Title with link and Sub-title as well as adding a description in Description control.

One more thing, you’ll be able to set Icon Position and Alignment of the Lottie Icon Box Widget. You can also get the icon in the inline position just clicking the Left or Right position.

Read More

This section here works to send visitors to other pages for information details. As well as you can add a button text or icon with the button. Am icon box with a button can pique the reader’s interest fast.

If you want to add a link to the read more button, you can do that just using Link to control the icon box.

icon box read more button settings

For example, go to the Read More section and set an icon as you see from the icon library along with icon position and spacing. Moreover, you can use OnClick and Show on Hover switcher. It also support all kinds of web icons.

Additional Options

From this section, you’ll be able to add and use more sections if you need it.

additional options

For example, go to Additional Options and then activate Indicator and Badge. See two more sections are in the content tab. Simply, hit and edit them.

web icons additional options

In Additional Options, you can set Offset of icon vertically and horizontally.

Lottie Icon Box Widget badges

Come to the Badge section and here you can rewrite badge name and its position. Likewise, you can also work with the Indicator 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 the Lottie Icon Box Widget. 

Let’s have a look.

Lottie Icon

In this section, you’ll be able to give style to the icon. The Lottie Icon section will allow you to set the Icon Fill & Stroke Color, Padding, Border Type & Width with Radius, and also Size, Rotation, Opacity and more of the Lottie Icon Box widget.

From the control Background Type, you can use classic or gradient options to get solid and gradient color. Likewise the Normal tab, you’ll be able to work with the Active and Hover tab.

icon box background

If you want to add gradient as an icon background of the icon box, you can do that.

Simply go to Background Type > Gradient and select Color and Second Color from the color palette along with a location. Besides, you can set gradient type (Linear/ Radial) and angle going to the controls Type and Angle.

image attachments on Lottie Icon Box Widget

Also, you can set an image as an icon background, you can do that. Simply go to Image and select one just clicking on Choose Image and work with other options. 

icon padding

One more thing to give style, go to Padding > Border Type > Width > Color > Size > Opacity. You should check the remaining controls to get more style.

advanced radius

If you want to have a predefined radius to the icon, then go to Advanced Radius (Yes) > Radius (you can change the value for the Lottie Icon Box Widget).


Lottie Icon Box Widget title

This section will allow you to set the text color with Space between Title & Description and also Typography. Read More about the typography. You can add a hover effect to the title form the Hover tab.


Work here as you’ve seen in the Title section.

Read More

This section here will allow you to style the button.

read more button for the icon box

For example, go to the Read More section and set color or image as a background clicking on the Plus(+) icon under the Image controls. Then set Border, Border-radius, Box Shadow, Padding and Typography.


hover animation for the Lottie Icon Box Widget

For adding a hover effect with animation to the button, go to Hover Animation (like Grow, Shrink, Pulse, etc.). Moreover, you’ll be able to set an image during hover mode for the Elementor icon box.


icon box additional settings

The only inner padding is possible to set here from Content Inner Padding.


faq shot 5 2 - BdThemes

Device icons like desktop, tablet and also mobile will give you the full confidence to make a responsive design for the devices mentioned at the beginning of this sentence.

Video Tutorial

Please see the video to learn more about the Lottie Icon Box Widget.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.