Table Of Contents

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. This is one of the core widgets that helps you make awesome layouts in your website.

To Insert widget

inserting Advanced Icon Box 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.

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

web icons layout

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

Advanced Icon Box Widget read more button

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.

Additional Options

additonal 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 of the Advanced Icon Box Widget.

And what more? Four switcher buttons such as Read More Button, Indicator, Badge, and Global Link.


icon box badge

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.


Advanced Icon Box Widget indicator

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 the Advanced Icon Box Widget. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.



web icons color

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.


hover color effect

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

advanced icon box style 3 - BdThemes

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.

Title Separator

advanced icon box style 4 - BdThemes

 Read More

advanced icon box style 5 1 - BdThemes

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.


advanced icon box style 6 1 - BdThemes

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.


advanced icon box style 7 1 - BdThemes

This section is easy to style. go to the Style tab > Badge and check all the controls. Get a message from the picture above.


advanced icon box style 8 1 - BdThemes

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.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

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 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.