The “Split Video Hero widget” for Elementor introduces a striking dual-section layout, combining compelling written content with a dynamic video popup to create visually engaging and interactive hero sections. Perfect for storytelling, product showcases, or service highlights, this modern widget captures attention with its bold visual split and seamless video integration. With flexible layout options and smooth functionality, the Split Video Hero is a powerful tool to elevate your landing pages and website intros.
Let’s explore the features available in the “Split Video Hero widget” for Elementor below.
Add a Split Video Hero Widget to Elementor
This widget requires “Unlimited Elements Pro“ version installed and activated on your WordPress website.
Go to Unlimited Elements and click "Widgets".
Search for "Split Video Hero" in the widget library.
Hover over the widget and click Install.
Add a Split Video Hero Widget to a Elementor Page
Click "Add Element" in Elementor
Search for "Split Video Hero" in the widget panel.
Drag and drop the Split Video Hero widget into the container.
Elementor Split Video Hero Widget General Settings
Title
Set the main title text for the section.
Sub Title
Input a secondary title.
Description
Write a detailed description or body text for the section.
Button Text
Define the text that will appear on a call-to-action button.
Button Link
Specify the URL or link that the button will navigate to when clicked.
Play Button Image
Select or upload an image to serve as the play button icon for the video.
Video Link
Enter the URL of the video to be embedded.
Image
Upload or select a background image for the section.
Responsive Breakpoint
Set a pixel value for a responsive breakpoint, likely affecting how the element behaves on different screen sizes.
Autoplay
Toggle whether the video should automatically play when the page loads.
Elementor Split Video Hero Widget Style Settings
Height
Adjust the height of the element using a slider or by entering a numeric value.
Direction
Choose a layout direction from a dropdown menu.
Image Width
Control the width of an image within the element using a slider.
Content Padding
Set the internal spacing (padding) around the content for the top, right, bottom, and left sides.
Content Background
Choose between different background types.
Content Background Color
Set the solid background color for the content area
Content Background Image
Upload or select an image to be used as the background for the content area.
Text Align
Set the horizontal alignment of the text within the content area.
Vertical Align
Set the vertical alignment of the content within its container.
Title Color
Set the color of the title text.
Title Typography
Adjust font properties for the title, such as font family, size, and weight.
Title Spacing
Control the spacing around the title using a slider.
Subtitle Color
Set the color of the subtitle text.
Subtitle Typography
Adjust font properties for the subtitle, such as font family, size, and weight.
Subtitle Spacing
Control the spacing around the subtitle using a slider.
Text Color
Set the color of the main body text.
Text Typography
Adjust font properties for the text, such as font family, size, and weight.
Text Spacing
Control the spacing around the text using a slider.
Button Color
Set the default text color of the button.
Button Color Hover
Set the text color of the button when the mouse hovers over it.
Button Background Color
Set the default background color of the button.
Button Background Color Hover
Set the background color of the button when the mouse hovers over it.
Button Padding
Adjust the internal spacing (padding) of the button for the top, right, bottom, and left sides.
Button Typography
Control the font settings (family, size, weight, etc.) for the button text.
Button Spacing
Adjust the overall spacing around the button using a slider or by entering a numerical value.
Button Radius
Control the roundedness of the button's corners using a slider or by entering a numerical value.
Button Border Type
Select the style of the button's border.
Button Border Width
Set the width of the button's border for the top, right, bottom, and left sides.
Button Border Color
Set the color of the button's border.
Button Border Hover Type
Select the style of the button's border when hovered.
Button Border Hover Width
Set the width of the button's border when hovered, for the top, right, bottom, and left sides.
Button Border Hover Color
Set the color of the button's border when hovered.
Button Typography
Control the font settings (family, size, weight, etc.) for the button text.
Enable Styles
Turns custom styling for the button text on or off.
Typography
Controls font settings like family, size, and weight for the button text.
Color
Sets the text color of the button.
Custom Styles
Allows you to add your own specific CSS code for unique design changes to the button text.
Split Video Hero Widget Design Examples For Elementor
Here are some live use cases for the Split Video Hero Widget.
Elementor Split Video Hero for an E-Commerce Website.
Elementor Split Video Hero for a Vehicle Selling Website.
Thank you for using the Split Video Hero widget for Elementor! With its bold split-screen layout and engaging video popup feature, this widget is perfect for storytelling, product highlights, or introducing your services with impact. It adds a modern, interactive touch to any hero section and instantly draws your visitors in. If you need any help or support, feel free to reach out. For more inspiration and live examples, be sure to check out the demo on our website.
