Two Tone Call to Action
Full-width call to action with an image on the left and text/button on the right.
View a live demo of this section.
Modules:
How to Use This Section
The Two Tone Call to Action section creates a visually striking split-screen layout that’s perfect for product launches, feature announcements, or conversion-focused landing pages. The asymmetrical design naturally draws attention to your call-to-action while the large image area provides space to showcase your product or service in action.
This section works particularly well on homepage hero areas, dedicated landing pages, or as a mid-page conversion point within longer content pieces. The full-width layout ensures maximum visual impact across all device sizes, making it an excellent choice when you need to capture attention and drive immediate action from visitors.
Setting Up Your Content
When adding this section through HubSpot’s page editor, you’ll want to choose high-contrast images that complement your call-to-action message. Product screenshots, team photos, or lifestyle imagery that reinforces your value proposition work especially well. The image automatically scales and crops to maintain the section’s proportions across desktop and mobile devices.
For the text area, keep your headline concise but compelling—typically 4-8 words work best for maximum impact. Your supporting text should directly support the call-to-action button, creating a clear path from interest to conversion. The button styling inherits from your theme settings, but you can customize colors and text through the module options.
Design Considerations
The Two Tone design creates natural white space separation that helps this section stand out from surrounding content. Consider placing it after detailed product information or testimonials to capitalize on visitor interest. On mobile devices, the layout automatically stacks with the image appearing above the text content, maintaining readability and visual hierarchy across all screen sizes.