Creating a Dynamic “Overlapping” Hero Header in Elementor
Hero Construction · Overlap
Creating a Dynamic
“Overlapping”
Hero Header in Elementor
To create a professional, robust hero section where an image appears to "break" the background line, you can leverage Elementor’s flexbox containers and viewport units. This setup ensures that your header always fills the screen, regardless of the device.
The Concept: Full-Height Flex Rows
This design relies on a Parent Container acting as a flexbox row. By setting the height to 100vh, we ensure the section perfectly fits the user's visible screen area (excluding browser tabs and taskbars).
1. The Parent Container Setup
Direction: Set to Row (Horizontal).
Height: Set to 100vh.
Align Items: Set to Stretch. This is crucial—it forces both child containers to be exactly the same height, even if one has more content than the other.
2. The Two-Column Structure
Inside your Parent Container, add two child containers:
Container A (Text): Fill this with your headings, descriptions, and buttons. Because the parent is set to "Stretch," this container will maintain its structure even with multiple rows of text.
Container B (Image): Place your hero image here. To achieve the "pop-out" effect, set the image size to cover or contain, depending on your art direction.
Achieving the "Overlap" Effect
The "overlap" is created by moving the image.
The 66vh Offset Trick
Type youTo make the image look like it is overlapping a boundary line:
Go to the Style tab of your Parent Container.
❖
Set a Image Background.
❖
Set the Position to Custom
❖
Give it an X-Offset of 66vw
