Full-Width Two Columns
Two columns that span the entire width of a section.
Note: The section this module is added to should have its Content Alignment set to Full width.
View a live demo of this module.
Content
- Change the vertical alignment
- Change the image placement on both desktop (left or right) and mobile (top or bottom)
- On the text side include text and call to action buttons
Styles
- Set Dark Mode
- Edit background color
- Change text alignment
- Split lists into two columns
- Customize list styling
- Edit padding
Usage Guide
The Full-Width Two Columns module is ideal for creating impactful hero sections, feature highlights, and product showcases where you need maximum visual real estate. This module works exceptionally well on landing pages, product pages, and service detail pages where you want to present information with equal visual weight between text and imagery.
When adding this module through the HubSpot page editor’s drag-and-drop interface, you’ll first need to ensure your section container is configured properly. The module requires its parent section to use Full width content alignment rather than the default Content width setting. You can adjust this in the section settings before or after adding the module.
Best practices for content editors:
The flexible image placement options make this module particularly versatile for storytelling. Consider using left image placement on desktop when your text content is action-oriented or includes call-to-action buttons, as this follows natural reading patterns. For mobile optimization, top image placement typically performs better for engagement since users see the visual context before reading.
The Dark Mode style option is especially useful when you want this module to stand out from other sections on your page or when your brand imagery works better against darker backgrounds. This pairs well with the Vertical theme’s modern aesthetic and works particularly well for SaaS companies showcasing software interfaces or technology products.
For content hierarchy, use the two-column list feature to present feature comparisons, benefit lists, or technical specifications in a scannable format. This keeps your text column organized while maintaining visual balance with your image content.