In this guide, we will show you how to add the “Icon Image Content Box widget” to your Elementor website. This versatile widget lets you display content using an icon and image alongside text, creating visually appealing and easy-to-read sections. With a subtle hover effect that reveals a call-to-action button, it’s designed to boost user engagement and enhance interaction.
Let’s explore the customization options available in the “Icon Image Content Box widget” for Elementor below.
Elementor Free Icon Image Content Box Tutorial Video
Add a Free Icon Image Content Box to Elementor
Add a Free Icon Image Content Box Widget to an Elementor Page
Elementor Icon Image Content Box Widget General Settings
Image
Select or upload an image for the content box.
Graphic Element
Choose the type of graphic element.
Icon
Select an icon to display if the graphic element is set to “Icon.”
Title
Enter the main heading for the content box.
Content
Add the main descriptive text or body content.
Button Text
Enter the text for the button inside the content box.
Link
Sets the URL for the button or the entire box to navigate to.
Badge Text
Enter text for a small badge element to highlight or categorize content.
Elementor Icon Image Content Box Widget Style Settings
Content Background
Sets a background color or gradient for the box’s content area.
Image Height
Controls the height of the image inside the content box.
Box Radius
Controls how rounded the corners of the box are; 0 means sharp corners.
Box Border Type
Defines the style of the box border.
None
Solid
Dashed
Dotted
Double
Box Border Width
Sets the thickness of the box border, adjustable per side or linked, with selectable units.
Box Border Color
Sets the border color of the content box.
Hidden Part (px)
Controls how much of the bottom of the box is hidden.
Outer Size
Controls the overall size of the graphic element’s container or background.
Radius
Sets the roundness of the graphic element’s container corners; 0 is square, higher values can make it circular.
Icon Size
Controls the size of the icon itself, separate from its container.
Color
Sets the color of the icon.
Spacing
Controls the space around the graphic element; positive values add space, negative values pull it closer or allow overlap.
Button Background
Sets a background color or gradient for the button (default state).
Button Background Hover
Sets a background color or gradient for the button on hover.
Button Text Color
Sets the button’s text color (default state).
Button Text Color Hover
Sets the button’s text color on hover.
Button Border Type
Defines the border style for the button (default state).
None
Solid
Dashed
Dotted
Double
Button Border Hover Type
Defines the border style for the button on hover.
Button Radius
Controls how rounded the button’s corners are; 0 means square corners.
Button Spacing
Controls vertical space around the button, affecting its distance from other elements.
Icon Image Content Box Widget Design Examples For Elementor
Here are some live use cases for the Icon Image Content Box widget.
Icon Image Content Box with Category style.
Icon Image Content Box for event planning website.
Thank you for using the Icon Image Content Box widget for Elementor! This versatile tool lets you showcase content with an icon and image alongside text, enhanced by a subtle hover effect that reveals a call-to-action button to boost user engagement. Designed to combine visual appeal with informative content, it helps you create clean, engaging sections that elevate your site’s design effortlessly. For questions or inspiration, feel free to reach out or explore our demo