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.
Add a Diagonal Hero Widget to a Elementor Page
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.
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.
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.