Hero - Overhanging Content
Hero with simple heading and boxed-in two-column content that overhangs the hero on a medium light background.
View a live demo of this section.
Modules:
About This Section
The Hero - Overhanging Content section creates a striking visual effect where your main content appears to “float” over the hero background, providing depth and modern appeal to your HubSpot pages. This section works particularly well for SaaS landing pages, product announcements, and homepage hero areas where you want to immediately capture visitor attention while presenting key information in an organized, scannable format.
The overhanging design uses a subtle box shadow and elevated positioning to create visual separation between the hero background and your content area. The medium light background ensures optimal contrast for readability while maintaining the professional aesthetic that technology companies need.
When to Choose This Section
Select this hero variant when you need to present substantial content without overwhelming visitors. The two-column layout within the overhanging box makes it ideal for feature comparisons, benefit highlights, or any scenario where you want to pair descriptive text with supporting visuals. This section performs exceptionally well on product pages, solution overviews, and campaign landing pages where conversion is the primary goal.
Customization Tips
You can adjust the hero background through the page editor’s section settings, including uploading custom images or selecting brand colors from your theme settings. The overhanging content box automatically adapts to your content length, but keep text concise for maximum impact. For best results, use high-contrast images in your Text and Image Columns module, and ensure your heading in the Theme Rich Text module clearly communicates your primary value proposition within the first few words.