The “Box Hero Widget” allows you to design visually engaging hero sections with a customizable boxed layout for free in WordPress Elementor websites. This widget lets you combine titles, descriptions, buttons, and background elements inside a structured container, ideal for highlighting calls to action, promotions, or key introductions. You can adjust content alignment, spacing, and styling to match your site’s design perfectly.
Let’s explore the features of the “Box Hero Widget” below.
Add a Free Box Hero Widget to Elementor
Add a Free Box Hero Widget to a Elementor Page
Elementor Box Hero Widget General Settings
Elementor Box Hero Widget Style Settings
Background Color
Sets a solid color for the header background.
Background Image
Allows you to upload and apply an image as the header background.
Image Resolution
Set to Full to use the image’s original resolution.
Position
Aligns the background image to the horizontal and vertical center.
Attachment
Controls the scroll behavior of the background image.
Repeat
Determines if and how the image is tiled across the background.
Display Size
Ensures the background image covers the entire header area.
Height Settings
Configure the height of the header section for better layout control.
Padding Settings
Adjust the internal spacing within the header area to maintain proper content alignment.
Button Color
Sets the default text color of the button.
Button Color Hover
Sets the text color when hovering over the button.
Button Background Color
Sets the default background color of the button.
Button Background Color Hover
Set the background color when hovering over the button.
Button Padding
Adjusts the internal spacing of the button.
Button Typography
Controls the font properties of the button text.
Button Spacing
Adjusts the space between button text and edges.
Button Radius
Sets the corner rounding of the button.
Button Border Type
Sets the style of the button border.
Button Border Hover Type
Sets the border style when hovering over the button.
Links Color
Sets the color of the social media icons.
Links Color Hover
Changes the icon color when hovered over.
Links Margin
Controls the outer spacing around each icon.
Links Spacing
Sets the horizontal space between each icon.
Links Size
Adjusts the overall size of the social media icons.
Box Hero Widget Design Examples For Elementor
Here are some live use cases for the Box Hero Widget.
Free Elementor Box Hero with Custom Background.
Free Elementor Box Hero with Transparent Background.
Thank you for using the Box Hero Widget for Elementor! With its flexible boxed layout, customizable headings, background options, and integrated buttons, this is the perfect widget for creating visually striking hero sections in seconds. Ideal for landing pages, promotional banners, or any key intro content on your site. If you have any questions or need assistance, don’t hesitate to contact us. For inspiration and live examples, check out the demo on our website.