The “Border Hero Widget” allows you to design striking hero sections with bold border styles for free in WordPress Elementor websites. This widget lets you frame titles, descriptions, and call-to-action buttons within a bordered layout—perfect for creating a modern, attention-grabbing introduction on any page. You can customize border thickness, color, spacing, and alignment to suit your site’s visual style.
Let’s explore the features of the “Border Hero Widget” below.
Add a Free Border Hero Widget to Elementor
Go to Unlimited Elements and click "Widgets".
Search for "Border Hero" in the widget library.
Hover over the widget and click Install.
Add a Free Border Hero Widget to a Elementor Page
Click "Add Element" in Elementor
Search for "Border Hero" in the widget panel.
Drag and drop the Border Hero widget into the container.
Elementor Border Hero Widget General Settings
Title
Sets the small header text.
Big Title
Sets the main headline or primary text.
Sub Title
Adds supporting or descriptive text below the title.
Button Text
Defines the text displayed on the button.
Button Link
Sets the URL the button will link to when clicked.
Button Background Color
Customizes the button's background color.
Image
Allows you to upload or select a background image for the hero section.
Elementor Border Hero Widget Style Settings
Enable Styles
Toggles custom styling on or off for the title.
Typography
Allows customization of font family, size, weight, letter spacing, etc.
Color
Sets the title text color.
Custom Styles
Let you add custom CSS for additional styling control.
Enable Styles
Turns on or off custom styling for the big title.
Typography
Customizes font properties like family, size, weight, and spacing.
Color
Sets the color of the big title text.
Custom Styles
Allows you to apply custom CSS for advanced styling.
Enable Styles
Turns custom styling for the sub-title on or off.
Typography
Controls font family, size, weight, and styles.
Color
Sets the text color of the subtitle.
Custom Styles
Allows you to add your own specific CSS code for unique design changes.
Enable Styles
Turns custom styling for the button text on or off.
Typography
Controls the font styling of the subtitle.
Color
Sets the text color of the button.
Custom Styles
Allows you to add your own specific CSS code for a unique design.
Border Hero Widget Design Examples For Elementor
Here are some live use cases for the Border Hero Widget.
Elementor Border Hero for a Bar Website.
Elementor Border Hero for a Restaurant Website.
Thank you for using the Border Hero Widget for Elementor! With its bold border styles, striking layouts, and flexible design settings, this widget makes it easy to create standout hero sections that instantly grab attention. It’s perfect for modern intros, framed content areas, or promotional headers that demand a sharp and impactful look. If you need any help or have questions, feel free to reach out. For inspiration and live previews, don’t forget to check out the demo on our website.
