Spark Premium Documentation

Hero Banner

A highly customizable hero.

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

  • Include a logo, text, CTAs, author information, media (image or form), and/or down arrow
  • Change default max width of content
  • Set position of text to left, right, center, or full width
  • Add differing backgrounds for desktop and mobile
  • Add overlay to background
  • Use a video as the background

Styles

  • Set Dark Mode
  • Set a bottom border style (straight, angle, rounded, bevel, wave)
  • Edit module spacing

Note: Edit these following styles from your Theme Settings under the Components > Hero section.

  • Change max width of columned and centered content
  • Change background overlay color
  • Change down arrow background and icon color

hero

How to Use the Hero Banner Module

The Hero Banner module serves as your website’s digital storefront, creating powerful first impressions on landing pages, homepages, and campaign-specific pages. This versatile module excels at capturing visitor attention while guiding them toward your primary conversion goals through strategic content placement and visual hierarchy.

When adding the Hero Banner to your HubSpot pages, you’ll find it most effective at the top of your page layout where it can immediately establish context and value proposition. Unlike standard content modules, the Hero Banner is designed to span the full width of your browser window, which is why setting your section’s Content Alignment to Full width is essential for proper display.

Best practices for content editors:

Position your most compelling messaging in the text area while leveraging the CTA functionality to drive conversions. The module’s flexible content positioning allows you to balance text with media elements—whether showcasing product images, embedding lead capture forms, or incorporating video backgrounds for dynamic engagement.

For mobile optimization, take advantage of the separate desktop and mobile background options. This feature ensures your hero looks professional across all devices, particularly important since mobile visitors may need different visual emphasis or text sizing.

Theme Settings integration streamlines your workflow by centralizing key styling decisions. Rather than adjusting overlay colors or arrow styling for each individual Hero Banner instance, you can establish consistent brand standards through the Components > Hero section. This approach maintains visual cohesion across multiple pages while reducing time spent on repetitive formatting tasks.

The down arrow feature works particularly well on longer pages, providing clear visual cues that encourage visitors to explore additional content below the fold.