In this guide, we will show you how to add a “Content Box Overlay widget” to your Elementor website. The Content Box Overlay widget offers a stylish way to present information with an elegant overlay effect that appears on hover, enhancing user interaction. Perfect for creating dynamic and visually engaging content boxes, this widget allows you to customize backgrounds, titles, texts, and overlay content to fit your site’s style seamlessly.
Let’s explore the customization options available in the “Content Box Overlay widget” for Elementor below.
Add a Content Box Overlay to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
Add a Content Box Overlay Widget to an Elementor Page
Elementor Content Box Overlay Widget General Settings
Image
Select or upload the main image for the content box.
Title
Enter the main heading for the content box.
Sub Title
Enter secondary heading or descriptive text shown below the main title.
Link
Sets a URL for the content box or specific parts of it to link to on click.
Show Line
Toggles the visibility of a decorative line inside the content box.
Show Subtitle
Toggles the visibility of the subtitle text.
Tint Amount
Controls the opacity or intensity of an overlay color on the image. Higher values increase opacity.
Elementor Content Box Overlay Widget Style Settings
Tint Hover Color
Sets a tint color over the image on hover.
Border Type
Defines the border style for the content box.
None
Solid
Dashed
Dotted
Double
Radius
Controls the roundness of the content box corners, adjustable per side or linked, with selectable units (e.g., px, %).
Text Opacity
Sets text transparency in its normal (default) state; 0 is fully transparent, 100 fully opaque.
Text Opacity Hover
Sets text transparency on hover, allowing it to become more or less visible.
Title Color
Sets the color of the main title text.
Title Typography
Adjusts font family, size, weight, line height, letter spacing, and text transform for the title.
Title Text Shadow
Adds a shadow to the title text with controls for color, blur, and offsets.
Subtitle Color
Sets the color of the subtitle text.
Subtitle Typography
Adjusts font family, size, weight, line height, letter spacing, and text transform for the subtitle.
Subtitle Text Shadow
Adds a shadow to the subtitle text with controls for color, blur, and offsets.
Subtitle Spacing
Controls vertical space between the subtitle and nearby elements.
Content Box Overlay Widget Design Examples For Elementor
Here are some live use cases for the Content Box Overlay widget.
Content Box Overlay with Grid.
Content Box Overlay for event website.
Thank you for using the Content Box Overlay widget for Elementor! This powerful tool lets you create visually engaging content boxes with customizable backgrounds, titles, and text, topped with an elegant overlay that appears on hover. Designed to add a dynamic and interactive feel, it enhances your website’s presentation and user interaction effortlessly. For any questions or inspiration, feel free to reach out or explore our demo.
