The guideline below about Advanced Icon Box Widget developed by Element Pack will get you to walk in the right way to use it. This is one of the core widgets that helps you make awesome layouts in your website.
To Insert widget
Inserting widget, it is just a matter of drag and dropping. As you see in the screenshot above, drag the box icon widget to your page.
Using the content tab, you’ll be able to make a layout of a particular part of a website(Icon Box). And in this regard, some handy sections in the tab will assist you a lot.
Go to the Content tab > Icon box.
This section will let you set Icon Type (Icon/ Image), Title, Description, Icon Position, Alignment and some switcher buttons such as Title Link, Show Sub Title, Title Separator.
Go the Content tab > Read More.
From this section, you can manipulate the read more button on the icon widget. More important thing is that, if you enable the Show on Hover switcher button, the button will appear only after hovering.
Go to the Content tab > Additional Options.
What you can do in this section? It is pretty clear. You can set here Offset of the Icon vertically and horizontally and also determine the HTML tag of the Title of the Advanced Icon Box Widget.
And what more? Four switcher buttons such as Read More Button, Indicator, Badge, and Global Link.
Go to the Content tab > Badge.
Until you don’t enable the Badge switcher button, this section will appear. When you’ve done it, you will find some controls to structure the Badge.
Go to the Content tab > Indicator.
The same words go to this section like the section, Badge. Here, you can determine the width, Offset horizontally and vertically and also rotate.
Now, let’s work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design the Advanced Icon Box Widget.
Styling with the Style tab in Elementor will always give you a fantastic experience.
Let’s have a look.
Here, nothing more to do. Just go to the Style tab > Icon/Image and check all the controls.
Mainly this section will allow you to set Background (solid color, gradient color, or image). If you have Svg Icon you do that just you’ve to enable Svg Icon Color? switcher button.
And rest of the things if you see our previous documentation of widget will be very easy. Simply check them.
Go to the Icon/Image > Hover > Effect.
You can do the same thing as you’ve seen in Normal mode. Important thing is that you will be able to set Effect to the button.
Title, Subtitle, & Description
Follow the flow, Style tab > Title > Subtitle > Description.
In respect of all the sections mentioned in the title, you’ll find two modes such as Normal and Hover. And the modes will let you put Color, Spacing, Hover Color, and Typography on the Advanced Icon Box Widget.
Go to the Style tab > Read More.
Here, both in Normal mode and Hover mode. You’ll be able to style the read more button. Most importantly, you can set the Attention effect to the button.
It seems that you’ve noticed the rest of the things are the same as you see in terms of others.
Just , go to the Style tab > Indicator.
There you will find a few Indicator Style to style the indicator. In addition, you can add fill and stroke color to it. See the photo above.
This section is easy to style. go to the Style tab > Badge and check all the controls. Get a message from the picture above.
Come to the Style tab > Additional.
From this section, you’ll be able to add padding around the content.
To sum up, it seems you’ve noticed to use our Advanced Icon Box Widget by Element Pack. It only demands your quality time. Watch Video Assist and to get more ideas about the usage of this widget, take a tour to the demo page.