1. Home
  2. Docs
  3. Content Elements
  4. Icon Box

Icon Box EA Element

Icon box is one of the useful elements for Elementor Builder to highlight a specific header content with having some symbolic icons in it. Icon Box is very useful to display comprehensive and important content in a stylish manner. It can be a great addition to homepages for listing key unique selling points, or to highlight your website’s main areas of content. They can be used to draw attention to important facts, moments, add contact dates, information, and anything else you think of. Here in this tutorial, you’re going to explore all about Icon Box and see how to work with this incredibly important element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Icon Box Element

 

»Content

 

Content Settings

⇒Icon: Add the icon you want from here. You can choose from the icon library or upload an SVG as an icon.

⇒Title: Input your title here in your own language.

⇒Badge Text: Type the text for the Badge.

⇒Box-Link: If you want to add a link to the icon box, this is where you can add your Desire link or URL so that your icon box can get alive by linking to other pages. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link

⇒Title HTML Tag: Define the HTML tag for the icon box title here. Respectively h1, h2, h3, h4, h5 & h6 from bigger to smaller in size.

⇒Alignment: Set the content alignment either left, right, center or justify.

 


»Style

 

General

⇒Padding: Set the padding value for the top, right, bottom and left around the icon box for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the icon box for different dimensions. You can link the values together or customize them individually.

⇒Background Type: Set the background type either Classic or Gradient for both Normal & Hover view of the icon box. And then customize the style according to your preference.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the icon box for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the icon box border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the icon box for different dimensions.

 

Icon

⇒Size: Customize the size of the icon manually.

⇒Padding: Generate the padding value around the icon for different dimensions.

⇒Bottom Spacing: Control the bottom spacing of the icon manually for different dimensions.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the icon for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the icon border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the icon for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Color: Customize the icon color for the Normal & Hover view.

⇒Background Color: Customize the icon background color for Normal & Hover view.

 

Title

⇒Typography: Set the typography options for the icon box titles.

⇒Text Shadow: Add the text-shadow to the icon box title text. Customize the shadow color, blur radius, horizontal and vertical shadow manually.

⇒Padding: Set the padding value for the top, right, bottom and left around the icon box title for different dimensions. You can link the values together or customize them individually.

⇒Text Color: Customize the icon box text color for Normal & Hover view.

 

Badge

⇒Offset: Set a custom offset to your icon box badge for left and top in different dimensions. Or you can always get back to the default setting.

⇒Padding: Set the padding value for the top, right, bottom and left around the badge text for different dimensions. You can link the values together or customize them individually.

⇒Text Color: Customize the badge text color.

⇒Background Color: Customize the background color of the badge.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the badge for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the badge border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the badge for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Typography: Set the typography options for the badge text.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Icon Box Element.


Was this article helpful to you? Yes No

How can we help?