Hero - Two Tone
A hero with a media side and content side that have different background colors
Note: The section this module is added to should have it’s Content Alignment set to Full width.
View a live demo of this module.
Content
- Add text and CTA to one side
- Add image, video popup, or form to the opposite side
- If adding image or video you can choose to cover the entire side with the image
- Set content alignment (left or right)
- Set row alignment (top, center, bottom)
Styles
- Set Dark Mode
- Change text alignment
- Split lists in to two columns
- Change content side background color
- Change media side background color
- Edit spacing of content and media sides separately
How to Use This Module
The Hero - Two Tone module is designed for creating impactful homepage headers and landing page sections where you need to present both compelling content and rich media while maintaining visual distinction between the two elements. This asymmetrical design approach helps draw attention to your primary message while the contrasting background colors create depth and visual hierarchy on your page.
When adding this module through the HubSpot page editor, you’ll want to strategically place it at the top of your page or as a primary section break. It works exceptionally well on homepage templates, landing pages, and service pages where you need to balance explanatory content with supporting visuals or lead capture forms.
Best practices for content placement: Position your most important messaging on the content side, utilizing the CTA functionality to drive conversions. The media side works particularly well for hero images that reinforce your brand, product demonstration videos, or HubSpot forms when you’re focusing on lead generation. The video popup option is especially effective for product demos or testimonials without cluttering your page with embedded players.
Color strategy considerations: Take advantage of the separate background color controls to align with your brand guidelines set in the Spark Premium theme settings. Consider using your primary brand color on one side and a complementary neutral on the other to maintain brand consistency while creating visual interest.
The full-width content alignment requirement ensures the module spans your entire page width, maximizing the visual impact of the two-tone effect. This module pairs well with other Spark Premium sections that follow similar asymmetrical layouts, creating a cohesive design flow throughout your site pages.