Hero - Simple with Background Color

View a live demo of this section.

Modules:

• Theme Rich Text

---

Usage Guide

The Hero - Simple with Background Color section provides a clean, minimalist approach to creating impactful page headers without the complexity of background images or multiple content blocks. This section works exceptionally well for landing pages, service pages, and campaign-specific content where you want visitors to focus on your core message.

When adding this section through HubSpot’s page editor, you’ll find it in the Sections panel under the Hero category. Simply drag and drop it onto your page canvas where you need a prominent text banner. The section automatically spans the full width of your page, creating a strong visual anchor point that draws attention to your headline and supporting copy.

Customizing the background color is straightforward through the section’s design options. You can select from your brand’s predefined color palette in the theme settings, or choose a custom color that aligns with your campaign or page objectives. Consider using high-contrast combinations to ensure your text remains readable—dark backgrounds with light text often perform well for hero sections.

The Theme Rich Text module within this section gives you flexibility beyond basic headlines. You can include formatted text, buttons, links, and even simple HTML elements if needed. This makes the section versatile enough for announcement banners, promotional messages, or introductory content that sets the context for the rest of your page.

Best practices include keeping your message concise since this is typically the first thing visitors see. Use compelling headlines that clearly communicate your value proposition, and consider including a call-to-action button when appropriate. This section works particularly well when you need a hero element but want to avoid the potential loading delays or mobile responsiveness concerns that can come with background image implementations.