The “Title Hero Widget” allows you to design bold and eye-catching hero sections for free in WordPress Elementor websites. This widget helps you make a powerful first impression by combining impactful titles, background images, customizable text, and an optional action button. Perfect for landing pages, promotional content, or homepage banners, it offers full design flexibility to match your site’s aesthetic.
Let’s explore the features of the “Title Hero Widget” below.
Elementor Title Hero Widget Tutorial Video
Add a Free Title Hero Widget to Elementor
Go to Unlimited Elements and click "Widgets".
Search for "Title Hero" in the widget library.
Hover over the widget and click Install.
Add the Title Hero to a Elementor Page
Click "Add Element" in Elementor
Search for "Title Hero" in the widget panel.
Drag and drop the Title Hero widget into the container.
Elementor Title Hero Widget General Settings
Title
The main headline of the Hero section.
Subtitle
A secondary heading or supporting text below the title.
Button Text
The label for the call-to-action (CTA) button.
Link
The URL to which the button redirects when clicked.
Show Title
Toggles the visibility of the Title (On/Off).
Show Subtitle
Toggles the visibility of the Subtitle (On/Off).
Show Button
Toggles the visibility of the Button (On/Off).
Elementor Title Hero Widget Style Settings
Background Color
Sets the solid color behind the Hero section.
Background Image
Uploads an image to display as the Hero section's background.
Background Blend Mode
Controls how the background image blends with the background color.
Hero Overlay Color
Sets a semi-transparent color layer over the background.
Hero Overlay Image
Adds a secondary image or texture layer above the background but below the content.
Overlay Opacity
Adjusts the transparency of the overlay. Lower values make it more transparent.
Horizontal Align
Positions the Hero content horizontally.
Vertical Align
Positions the Hero content vertically.
Text Align
Aligns the text content within the Hero.
Content Width
Sets a custom width for the inner content.
Height
Defines the Hero section’s fixed height in pixels.
Height Unit
Alternate unit for dynamic height.
Content Padding
Adds spacing around the content inside the Hero.
Title Color
Sets the text color of the main headline.
Title Typography
Controls font family, size, weight, and styles.
Title Border Type
Adds a border around the title.
Title Border Radius
Adjusts corner rounding for the title border.
Title Padding
Adds spacing inside the title’s boundary.
Text Color
Sets the color of the text content.
Text Typography
Controls font family, size, weight, and styles.
Text Spacing
Adjusts the vertical space between text elements measured in pixels.
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.
Enable Styles
Toggles whether custom styling is applied to the title (Yes/No).
Typography
Controls the font properties of the title.
Color
Sets the text color of the title.
Custom Styles
Allows for advanced custom CSS styling of the title element.
Title Hero Widget Design Examples For Elementor
Here are some live use cases for the Title Hero Widget.
Free Elementor Title Hero with Fixed Background.
Free Elementor Title Hero as Content Card.
Thank you for using the Title Hero Widget for Elementor! With its bold headings, customizable text styling, and support for background images and action buttons, this is the best Title Hero Widget for creating impactful hero sections on your website. Perfect for landing pages, promotional banners, or any first-impression content. If you have any questions or need support, feel free to reach out. For more examples and inspiration, visit the live demo on our website.
