Hero - Staggered Overlapping Images
A two-column hero with staggered images overlapping the section below.
Note: The section below must have a different background from this section’s for overlap to be apparent.
View a live demo of this section.
Modules:
How to Use This Section
The Hero - Staggered Overlapping Images section creates a dynamic visual entry point for your SaaS or technology pages by combining compelling messaging with eye-catching imagery that extends beyond traditional section boundaries. This section works particularly well on product landing pages, feature announcements, or company overview pages where you want to make an immediate visual impact.
When you add this section through the HubSpot page editor’s drag-and-drop interface, you’ll notice it requires strategic planning of your page layout. The overlapping effect depends on the section immediately below having a contrasting background color or style. For optimal results, pair this hero with sections that use your theme’s secondary background colors or textured backgrounds available in the Vertical theme settings.
Content Strategy Tips:
The text-only hero module within this section is perfect for concise value propositions or product headlines, while the staggered images module lets you showcase product screenshots, team photos, or feature illustrations. Consider using high-resolution images with transparent backgrounds or consistent color schemes that complement your brand palette defined in the theme’s global settings.
Layout Considerations:
This section performs best when positioned at the top of your page, as the overlapping effect creates natural flow into subsequent content sections. The staggered arrangement of images adds visual interest without overwhelming your core messaging, making it ideal for pages where you need to balance professional credibility with modern design aesthetics.
Remember to preview your page across different screen sizes using HubSpot’s responsive preview tools, as the overlapping effect adjusts dynamically to maintain visual impact on both desktop and mobile devices.