In this guide, we’ll show you how to add the “Overlay Icon Box widget” to your Elementor website. This premium widget allows you to showcase features and services with a sleek icon box design enhanced by interactive overlay effects and hover animations. Perfect for highlighting key information, the Overlay Icon Box widget boosts user engagement while giving your site a polished, professional look.
Let’s explore the customization options available in the “Overlay Icon Box widget” for Elementor below.
Add an Overlay Icon Box to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
Add an Overlay Icon Box Widget to an Elementor Page
Elementor Overlay Icon Box Widget General Settings
Box Image
Allows you to upload or select an image that will serve as the background or primary visual for the box.
Graphic Element
A dropdown menu that allows you to choose the type of graphic to display, such as an icon or an image, as the prominent overlay on the box.
Icon
Appears when the graphic element is set to "Icon."
Title
An input field where you enter the main heading or title for the overlay icon box.
Content
A text area for adding descriptive text or a brief paragraph.
Link
An input field that allows you to add a URL to which the entire overlay icon box will link when clicked.
Elementor Overlay Icon Box Widget Style Settings
Title Typography
Offers options for a global typography style and a custom typography editor.
Title Color
Allows you to set the color of the title text.
Top Spacing
A slider and an input field to control the top margin or padding of the title, creating space between the title and the element above it.
Text Typography
Offers options for a global typography style and a custom typography editor.
Text Color
Allows you to set the color of the descriptive text.
Text Top Spacing
A slider and an input field to control the top margin or padding of the text, creating space between the text and the element directly above it.
Width
A slider and input field to control the width of the graphic element.
Height
A slider and input field to control the height of the graphic element.
Background Color
Allows you to set a background color for the graphic element.
Border Type
A dropdown menu that allows you to choose different border styles.
Default
None
Solid
Double
Dotted
Dashed
Groove
Radius
Four input fields with a link icon, allowing you to set the border radius (Top, Right, Bottom, Left) of the graphic element.
Shadow
An edit icon that opens a sub-panel for configuring shadow effects for the graphic element.
Icon / Text Color
Allows you to set the color of the icon or text, depending on the type of graphic element.
Image Fit
A dropdown menu is used to control how an image fits within its defined width and height when
Text Typography
Offers options for a global typography style and a custom typography editor.
Icon Size
A slider and input field to control the size of the icon graphic if an icon is selected as the graphic element.
Overlay Icon Box Widget Design Examples For Elementor
Here are some live use cases for the Overlay Icon Box widget.
Animated Icon Box Widget for a fitness website.
Overlay Icon Box with a Gradient Background.
Thank you for using the Overlay Icon Box widget for Elementor! This premium tool lets you showcase features and services in a sleek, customizable icon box layout with interactive overlay effects and hover animations. Designed to enhance user engagement, it adds a professional and visually appealing touch to your website. For questions or inspiration, feel free to reach out or explore our demo.
