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.
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.
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.
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.
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. You can also get the icon in the inline position just clicking the Left or Right position.
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.
If you want to add a link to the read more button, you can do that just using Link to control.
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.
From this section, you’ll be able to add and use more sections if you need it.
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.
In Additional Options, you can set Offset of icon vertically and horizontally.
Come to the Badge section and here you can rewrite badge name and its position. Likewise, you can also work with the Indicator section.
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.
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. Read More about the padding and border-radius.
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.
If you want to add gradient as an icon background, 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.
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.
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.
If you want to have a predefined radius to the icon, then go to Advanced Radius (Yes) > Radius (you can change the value).
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.
This section here will allow you to style the button.
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.
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.
The only inner padding is possible to set here from Content Inner Padding.
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.