The “Diagonal Hero widget” for Elementor allows you to create captivating hero sections with angled layouts, dynamic backgrounds, and animated visuals that instantly grab attention. Designed to make a bold first impression, this powerful widget enhances your site’s visual appeal and boosts user engagement. With intuitive customization options and flexible design controls, the Diagonal Hero widget is perfect for crafting stunning landing pages, modern homepage headers, or standout section intros.
Let’s explore the features and customization options available in the “Diagonal Hero widget” for Elementor below.
Add a Diagonal 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 "Diagonal Hero" in the widget library.
Hover over the widget and click Install.
Add a Diagonal Hero Widget to a Elementor Page
Click "Add Element" in Elementor
Search for "Diagonal Hero" in the widget panel.
Drag and drop the Diagonal Hero widget into the container.
Elementor Diagonal Hero Widget General Settings
Layout
Choose the layout direction.
Image
Select or upload an image to be displayed in the hero section.
Title
Set the main title.
Sub Title
Set the secondary title.
Button Text
Define the text that appears on the call-to-action button.
Button Link
Specify the URL or link that the button will navigate to when clicked.
Make The Whole Widget A Link
Toggle whether the entire widget area acts as a clickable link.
Show Title
Choose whether to "Show" or "Hide" the title element.
Show Separator
Choose whether to "Show" or "Hide" a separator element.
Show Sub Title
Choose whether to "Show" or "Hide" the subtitle element.
Show Button
Control the visibility of the button element.
Elementor Diagonal Hero Widget Style Settings.
Image Width
Adjust the width of the image using a slider or by entering a numerical value.
Image Shape
Choose the shape or specific design for the image from a dropdown menu.
Image Position
Set the positioning of the image within its container.
Image Opacity
Control the transparency of the image using a slider or by entering a numerical value.
Show Image Overlay
Toggle whether an overlay effect is applied to the image.
Image Hover Animation
Select an animation effect that will occur when the mouse hovers over the image.
Widget Overflow
Control how content that exceeds the boundaries of the widget is handled.
Height
Adjust the overall height of the widget using a slider or by entering a numeric value.
Content Padding
Set the internal spacing (padding) around the content for the top, right, bottom, and left sides.
Text Align
Set the horizontal alignment of the text within the content area.
Background Color
Choose the type of background color.
Background Color Color
Set the specific color for the background.
Background Color Image
Upload or select an image to be used as the background.
Title Color
Set the color of the title text.
Title Typography
Adjust font properties for the title, such as font family, size, and weight.
Sub Title Color
Set the color of the sub-title text.
Sub Title Typography
Adjust the font properties for the sub-title, such as font family, size, and weight.
Sub Title Spacing
Control the spacing around the sub-title using a slider or by entering a numerical value.
Button Typography
Control the font settings (family, size, weight, etc.) for the button text.
Button Color
Set the default text color of the button.
Button Background Color
Set the default background color of the button.
Button Padding
Adjust the internal spacing (padding) of the button for the top, right, bottom, and left sides.
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 Align
Set the horizontal alignment of the button within its container.
Button Text Align
Set the horizontal alignment of the text within the button.
Separator Color
Set the color of the separator line or element.
Separator Top Spacing
Adjust the space above the separator using a slider or by entering a numerical value.
Separator Bottom Spacing
Adjust the space below the separator using a slider or by entering a numerical value.
Separator Width
Control the width of the separator using a slider or by entering a numerical value.
Separator Height
Control the height (thickness) of the separator using a slider or by entering a numerical value.
Diagonal Hero Widget Design Examples For Elementor
Here are some live use cases for the Diagonal Hero Widget.
Elementor Diagonal Split Hero for an E-Commerce Website.
Elementor Diagonal Split Hero for a Business Website.
Thank you for using the Diagonal Hero Widget for Elementor! With its angled layouts, custom backgrounds, and eye-catching animations, it’s the perfect tool for creating impactful hero sections that leave a lasting impression. If you have any questions or need assistance, don’t hesitate to reach out. For inspiration and live examples, be sure to check out the demo on our website.
