Hero - Overlapping Image
A full-width hero with an image overlapping section below.
Notes: The section below this must have a different background from this section’s for the overlap to be apparent.
View a live demo of this section.
Modules:
How to Use This Section
The Hero - Overlapping Image section creates a striking visual impact by extending your hero content beyond traditional boundaries. This section combines the powerful Hero - 1 Column module with a strategically positioned Theme Image that cascades into the next section of your page, creating depth and visual interest that’s particularly effective for SaaS product launches and technology company landing pages.
When building your page in the HubSpot page editor, you’ll want to carefully consider the section order. The overlapping effect depends on the section immediately below having a contrasting background color from your hero section. For example, if your hero uses a dark background, place a section with a white or light background beneath it to make the overlapping image pop visually.
To maximize this section’s impact, choose high-quality product screenshots, team photos, or lifestyle images that complement your hero messaging. The Theme Image module gives you full control over image positioning and sizing, so you can fine-tune how much of your image extends into the lower section.
This section works exceptionally well on homepage templates, product landing pages, and campaign-specific pages where you need to capture attention immediately. The overlapping design naturally guides visitors’ eyes from your headline down to your supporting content, improving page flow and engagement.
Pro tip: Test your page on mobile devices after adding this section. The responsive behavior ensures your overlapping image scales appropriately, but you may want to adjust your image choice or positioning using the theme’s mobile-specific settings to maintain the dramatic effect on smaller screens.