In this guide, we will show you how to add the “Icon Content Box widget” to your Elementor website. This sleek widget lets you combine overlapping icons with text to create visually engaging content blocks that highlight features, services, or key points effectively. With customizable icons, titles, descriptions, and styles, it’s a versatile and free tool to make your content stand out.
Let’s explore the customization options available in the “Icon Content Box widget” for Elementor below.
Add a Free Icon Content Box to Elementor
Add a Free Icon Content Box Widget to an Elementor Page
Elementor Icon Content Box Widget General Settings
Box Title
Enter the main heading or title for the content box.
Description
Add the main body text or description for the content box.
Button Text
Enter the text that appears on the button.
Button Link
Set the URL the button will link to when clicked.
Icon
Select an icon from library to display in the content box.
Elementor Icon Content Box Widget Style Settings
Box Border Type
Choose the border style for the content box:
None
Solid
Dashed
Dotted
Double
Box Radius
Controls how rounded the content box corners are; 0 means sharp corners.
Box Background
Sets a background color or gradient for the entire content box.
Content Padding
Sets the inner spacing between content and the box border, adjustable per side or linked, with selectable units.
Icon Size
Controls the overall size of the icon including its background container.
Icon Inner Size
Controls the size of the icon graphic itself, separate from its background.
Icon Background Color
Sets the background color or gradient behind the icon.
Icon Color
Sets the color of the icon graphic.
Icon Border Type
Defines the border style around the icon container:
None
Solid
Dashed
Dotted
Double
Icon Radius
Controls the roundness of the icon container corners; 0 is square, higher values make it circular.
Icon Spacing
Controls the space around the icon; positive values add space, negative values pull it closer or overlap.
Link Color
Sets the color of the link text.
Link Typography
Adjusts font family, size, weight, line height, letter spacing, and text transform for the link text.
Link Spacing
Controls vertical space around the link, affecting its distance from other elements.
Border Bottom Hover Width
Defines the thickness of the bottom border shown or changed on link hover (in pixels).
Icon Content Box Widget Design Examples For Elementor
Here are some live use cases for the Icon Content Box widget.
Icon Content Box with Snow Background.
Icon Content Box with Custom Background.
Thank you for using the Icon Content Box widget for Elementor! This versatile tool lets you display information with a unique overlapping icon and text, creating sleek and eye-catching content blocks. Perfect for highlighting features, services, or key points, it offers customizable icons, titles, descriptions, and styles to make your content stand out. Best of all, it’s completely free. For questions or inspiration, feel free to reach out or explore our demo.
