Hero - Two Column

A two-column hero with text on the left and image on the right.

View a live demo of this section.

Modules

hero-two-col



How to Use This Section

The Hero - Two Column section provides a balanced layout that’s particularly effective for landing pages, service pages, and homepage headers where you need to combine compelling copy with visual elements. This asymmetrical design naturally guides visitors’ eyes from your headline and call-to-action on the left to your supporting image on the right.

When to choose this layout: Use the two-column hero when you have a strong visual asset that complements your messaging—such as a product screenshot, team photo, or branded illustration. This section works exceptionally well for professional services firms showcasing their expertise, B2B companies introducing software solutions, or event organizers promoting upcoming conferences.

Setting up in the page editor: After dragging this section onto your page, you’ll configure the Hero - 2 Column module within it. The left column accommodates your headline, supporting text, and primary call-to-action button, while the right column houses your hero image. You can adjust the vertical alignment through the module settings to ensure your text and image are positioned exactly where you want them.

Design considerations: The two-column layout creates natural white space and prevents text-heavy hero sections that can overwhelm visitors. Consider using high-contrast images that won’t compete with your headline for attention. The Brightlane theme’s built-in responsive behavior ensures this section stacks appropriately on mobile devices, with your text appearing above the image.

This section integrates seamlessly with Brightlane’s conversion-focused design philosophy, providing clear hierarchy and prominent placement for your primary call-to-action while maintaining the professional aesthetic your B2B audience expects.