The “Transparent Split Hero Widget” allows you to create visually striking hero sections with a transparent split layout for free in WordPress Elementor websites. This widget blends layered visuals, text, and background elements to produce a sleek, modern introduction for any page. It’s ideal for adding depth through unique background imagery or video integration while keeping your content clean and focused. You can fully customize alignment, spacing, and styling to match your site’s design seamlessly.
Let’s explore the features of the “Transparent Split Hero Widget” below.
Elementor Transparent Split Hero Widget Tutorial Video
Add a Free Transparent Split Hero Widget to Elementor
Go to Unlimited Elements and click "Widgets".
Search for "Transparent Split Hero" in the widget library.
Hover over the widget and click Install.
Add a Free Transparent Split Hero Widget to a Elementor Page
Click "Add Element" in Elementor
Search for "Transparent Split Hero" in the widget panel.
Drag and drop the Transparent Split Hero widget into the container.
Elementor Transparent Split Hero Widget General Settings
Background
Upload or select a custom background image to enhance your hero section.
Show Title
Toggle this on to display the main title.
Title Text
You can edit it to reflect your page’s headline.
Title HTML Tag
Change it to <h1>, <h2>, etc., for semantic structure and SEO optimization.
Show Subtitle
Enable this toggle to display a subtitle below your title.
Subtitle Text
Editable to support your design narrative.
Button Text
Customizable to align with your site goals.
Description
Can be modified as needed.
Show Button
Toggle to show or hide a call-to-action button.
Button Text
Customizable to align with your site goals.
Button Link
Replace with your preferred destination URL.
Show Image/Logo
Enable the display of a logo or complementary image within the split layout.
Image/Logo Size
Ensures proportional scaling across devices.
Elementor Transparent Split Hero Widget Style Settings
Height
Define a fixed height for the entire hero section container.
Alignment
Choose the horizontal alignment for your section content.
Radius
Apply border radius values to create softer, rounded corners on your section or container.
Overlay Color
Defines the background color of the overlay layer that sits above the background image or video.
Overlay Padding
Applies internal spacing inside the overlay, ensuring content doesn’t sit flush against the edges.
Overlay Width
Toggle setting to enable or disable custom overlay width.
Justify
Controls the horizontal alignment of items within the overlay.
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
Adjust the spacing around the text.
Button Border Color
Set the color of the button's border.
Button Border Color Hover
Set the border color when the button is hovered over.
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.
Border Width
Set the thickness of the button border.
Button Typography
Customize the font, size, weight, and style of the button text.
Button Spacing
Adjust the spacing between buttons (likely horizontal spacing in a group).
Button Radius
Set the roundness of the button corners (higher values make it more rounded).
Image Width
Set the width of the image/logo.
Image Height
Set the height of the image/logo.
Image Fit
Choose how the image should fit within its container (e.g., Contain, Cover, Fill, etc.).
Border Radius
Set the roundness of the image corners (can be customized individually for Top, Right, Bottom, and Left).
Border Type
Choose the style of the border.
Transparent Split Hero Widget Design Examples For Elementor
Here are some live use cases for the Transparent Split Hero Widget.
Elementor Transparent Split Hero for Movie Website.
Elementor Transparent Split Hero for Restaurant Website.
Thank you for using the Transparent Split Hero Widget for Elementor! With its sleek transparent split layout, layered visuals, and flexible design options, this widget is perfect for creating stunning hero sections in seconds. It’s ideal for impactful intros, immersive backgrounds, or video-enhanced headers that add depth and creativity to any page. If you have any questions or need assistance, don’t hesitate to contact us. For inspiration and live examples, feel free to explore the demo on our website.
