How to Use Advanced Icon Box Widget

How to Use Advanced Icon Box Widget

The guideline below about Advanced Icon Box Widget developed by Element Pack will get you to walk in the right way to use it.

To Insert widget

Inserting widget, it is just a matter of drag and dropping. As you see in the screenshot above.

Content Tab

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.

Icon Box

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.

Read More

Go the Content tab > Read More.

From this section, you can manipulate the read more button. More important thing is that, if you enable the Show on Hover switcher button, the button will appear only after hovering.

Additional Options

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.

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.

Style Tab

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. 

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.

Title Separator

 Read More

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.

Video Assist

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.

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.