booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Icon Box

Icon Box

Preview Widget
Preview Widget
Getting Started
Icon & Text Styling

More Widgets

• Interactive Icon Box
• Modern Flip Box
• Icon Box Action
• Hover Info Box

# Getting started

The icon box is a widget that allows you to display information about your website or business services with unique and modern design layouts, Apply multiple hover effects & custom styles for the icon, heading, sub-heading & the short description text.

Lets go over the details of this amazing widget.


In the content section you can define all the elements of your icon box.

  • Icon Type : Choose if u want to use an icon, an image or none of the two..
  • Image/Icon : Upload an image or select an icon from our extensive icon libraries..
  • Heading :  A title text that gives a global insight about the information or service you are showcasing.
  • Sub-heading : An optional small more detailed text about your element.
  • Short text : A description text that gives more information about what you want to showcase.
  • Link : Specify a go to link on click.You can click on the link options button(The cog wheel on the right) to enable the 'open in new window' and the 'no follow' options.


Under the layout section, you will be able to control icon position and the overall layout of the widget.  

  • Choose Layout : Choose your icon position next to the heading & sub heading elements.When choosing the top position, the icon will be placed above the heading and an alignment control will be displayed so you can further customize the icon position.


Under the styling tab section, you will have the full control over the styling & design of all you icon box widget elements.You can change the sizes, colors, backgrounds...

  • Icon Area Styling

Control everything about your icon, and change the image settings if you are using that instead.

-Icon and background size : Control the icon size and the background size to create a unique design.

-Normal & Hover : Select​ which widget state you want to customize.Normal for the idle state of the widget and hover for when the widget is being hovered.Note that all the remaining options of this section will only affect the selected state.

-Icon Hover Effect : This option will only available when the hover state styling is selected.You can select one of the many hovering animations available in the list.

-Colors : Customize the icon color scheme using either a solid or gradient color with the possibility to control the direction of the gradient.The background color can also be changed.

-Borders & Shadows : Control border for your icon & apply custom box shadows.

-Rotation & Margins : Rotate the icon and icon background and control the icon area margins.

  • Text Content Styling

Customize the text properties for the title, sub heading & short description text.Change the font size, letter spacing... choose from hundreds of Google font families.

-Colors : Customize the color of your text elements, with the possible use of gradient color for the title and sub heading.You can also specify a hover color for the title.

-Shadows & Distances : Apply a shadow for the title and sub heading to create a unique design and control the margins & distances between each element to create your own layout.

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket


We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.




Email :

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020