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
Go to Unlimited Elements and click "Widgets".
Search for "Box Hero" in the widget library.
Hover over the widget and click Install.
Add a Free Box Hero Widget to a Elementor Page
Click "Add Element" in Elementor
Search for "Box Hero" in the widget panel.
Drag and drop the Box Hero widget into the container.
Elementor Box Hero Widget General Settings
Top Title
Secondary headline above the main title.
Main Title
Primary headline (bold and prominent).
Sub Title
Supporting description below the main title.
Button Text
Call-to-action (CTA) button label.
Button Link
URL the button directs to (replace with a valid link).
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.
Box Max Width
Sets the maximum width of the box container in pixels.
Box Padding
Adds internal spacing within the box.
Box Background
Controls the background color of the box.
Box Border Type
Determines the border style.
Box Radius
Adjusts the corner rounding of the box.
Top Title Color
Sets the text color of the top title.
Top Title Typography
Adjusts the font family, size, weight, and style of the top title text.
Top Title Spacing
Controls the vertical spacing below the top title.
Title Color
Sets the text color of the main headline.
Title Typography
Controls font family, size, weight, and styles.
Title Spacing
Controls the margin and padding around the title for precise spacing.
Sub Title Color
Sets the text color of the subtitle.
Sub Title Typography
Adjusts the font family, size, weight, and style of the subtitle text.
Sub Title Spacing
Controls the vertical and horizontal spacing around the subtitle.
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.
