booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Icon Box Action

Icon Box Action

Preview Widget
Preview Widget
Getting Started

More Widgets

• Hover Info Box
• Icon Box
• Fancy Icon Box
• Interactive Icon Box

# Getting started

The Icon box action widget is a great way to showcase information your different products features and descriptions.This widget uses an icon and three text components including a title.Apply multiple hover effects & custom styles for the widget elements and create your own design.

Let's go over how you can use this great widget.


The content section will be used to define all the elements of your icon box action widget.

  • Action Effect : The effects available here are the translate and zoom in effects. Chose one of these two effects that will be applied to all the icon box action elements.
  • Icon : Choose 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 details about what you want to showcase.This element will be hidden until you hover over the widget.
  • : Control the horizontal alignement of the widget within the container.
  • Button Text : Define a button text if you want to use a button along side the icon and text.This element will be hidden until you hover over the widget.Note that leaving this empty will not show any button on your widget.
  • Container Height : Customize the widget's container height so you can adjust it to your web page.
  • 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.


The styling tab is going to be used to change the style and design of all you icon box action widget elements.You can change the typography, colors, backgrounds...

  • Icon Area Styling

Control everything about your icon and customize the color schemes.

-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 : Apply a shadow for the title and sub heading to create a unique design.

  • Button Styling

Customize the properties for your button.From the typography to the colors and borders, everything is available.

-Typography & Padding : Choose a font family and change all the text properties to adjust it to your needs.You can also define padding to control the inner space of the button.

-Colors : Change the color for both the text and the background.Solid and gradient colors are both available with the addition of having full control on the gradient behavior..

-Borders & Shadows : Control the border for your button & apply a custom box shadow.

-Enable Button Hover : Enable this if you want to define a hover style.Enabling this will provide you with the same options above that you can use to create a your own custom button hover effect.

  • Content Distances

Control the margins & distances between each of the widget elements 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