The “Split Hero Widget” allows you to create visually striking split-screen hero sections for free in WordPress Elementor websites. This widget lets you display two content areas side by side—perfect for showcasing contrasting elements like text and images within a modern, balanced layout. It’s ideal for highlighting key messages while guiding user focus across both visual and textual content. You can customize alignment, spacing, and styling to seamlessly fit your website’s design.
Let’s explore the features of the “Split Hero Widget” below.
Elementor Split Hero Widget Tutorial Video
Add a Free Split Hero Widget to Elementor
Go to Unlimited Elements and click "Widgets".
Search for "Split Hero" in the widget library.
Hover over the widget and click Install.
Add a Free Split Hero Widget to a Elementor Page
Click "Add Element" in Elementor
Search for "Split Hero" in the widget panel.
Drag and drop the Split Hero widget into the container.
Elementor Split Hero Widget General Settings
Logo
Upload or select the logo image to display.
Logo Link
Set the URL the logo should redirect to when clicked.
Title
The main heading text.
Title Tag
Choose the HTML tag for the title.
Sub Title
A secondary heading to support the main title.
Sub Title Tag
Choose the HTML tag for the subtitle.
Description
A detailed explanation.
Show Logo
Toggle to show or hide the logo.
Show Title
Toggle to show or hide the main title text.
Show Sub Title
Toggle to display or hide the subtitle text.
Sub Title Position
Choose the position of the subtitle relative to the title.
Show Text
Toggle to show or hide the description and long description.
Show Button
Toggle to display or hide the call-to-action (CTA) button.
Responsive Breakpoint
Define the screen width at which the layout adjusts for mobile or desktop views.
Button Text
The visible label on the button.
Button Link
The URL the button will navigate to when clicked.
Button ID
A unique identifier for the button, useful for applying custom styles or scripts.
Background Color
Choose a background color that fits your website’s theme or brand.
+ Add Item
Add more buttons with the same customizable fields.
Elementor Split Hero Widget Style Settings
Height
Scales the element's height based on the browser window size.
Direction
Defines the layout direction.
Background Image Color
Sets a color overlay on top of the background image.
Background Blend Mode
Controls how the background image blends with the overlay color.
Image Width
Defines the width of the background image as a percentage of its container.
Content Padding
Defines the spacing inside the content area.
Content Background Color
Sets a solid background color for the content area.
Content Background Image
Allows an image to be used as the background. Overrides the background color if both are set.
Text Align
Controls horizontal alignment of text and content.
Vertical Align
Controls vertical alignment within the content container.
Logo Width
Controls the width of the logo.
Logo Spacing
Sets the spacing around the logo.
Title Color
Sets the text color of the main headline.
Title Typography
Controls font family, size, weight, and styles.
Title Spacing
Adjusts the spacing around the title element.
Subtitle Color
Defines the text color for the subtitle.
Subtitle Typography
Controls the font styling of the subtitle.
Subtitle Spacing
Adjusts the margin or padding around the subtitle.
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 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 Width
Specifies the thickness of the button border.
Button Border Color
Sets the color of the border to match or contrast the button background.
Border Position
Applies the border to specific sides of the button.
Button Border Hover Type
Sets the border style when hovering over the button.
Button Border Hover Width
Sets the thickness of the border on hover.
Button Border Hover Color
Specifies the border color when hovered.
Border Hover Position
Applies hover border effect to selected sides.
Split Hero Widget Design Examples For Elementor
Here are some live use cases for the Split Hero Widget.
Free Elementor Split Hero with a Gradient Background.
Free ElementorSplit Hero for an E-Commerce website.
Thank you for using the Split Hero Widget for Elementor! With its modern split-screen layout, dual content areas, and seamless design flexibility, this widget is perfect for showcasing text and imagery side by side. Ideal for bold landing sections, featured highlights, or any content that benefits from a clean, balanced presentation. If you have any questions or need assistance, feel free to reach out to us. For ideas and live previews, be sure to check out the demo on our website.
