Hero - Simple with Background Image
A simple full width text banner with a background.
View a live demo of this section.
Modules:
How to Use This Section
The Hero - Simple with Background Image section creates an impactful full-width banner that spans the entire viewport width, making it ideal for homepage headers, landing page intros, or campaign announcements. This section combines visual appeal with functional content delivery through its layered design approach.
When you drag this section into your page editor, you’ll get a structured layout that places your text content over a customizable background image. The Background Overlay module gives you control over the image’s opacity and color treatment, ensuring your text remains readable regardless of the background image you choose. You can adjust the overlay darkness or even apply brand colors to maintain consistency with your site’s design.
The Theme Rich Text module serves as your primary content area, supporting headlines, subheadings, and body copy. Unlike basic text modules, this component automatically inherits your theme’s typography settings while still allowing custom formatting when needed. Consider using this section when you need more text flexibility than a standard hero banner provides.
For calls-to-action, the integrated Theme Button module ensures your buttons match your theme’s styling automatically. You can configure multiple buttons side-by-side or stack them vertically depending on your conversion goals.
Best practices for this section:
- Choose background images with sufficient contrast areas for text overlay
- Keep headlines concise since this section works best with focused messaging
- Use this section early on pages where you need to establish context quickly
- Test your overlay settings across different devices to ensure readability
This section works particularly well on service pages, product launches, and event announcements where you need to combine compelling visuals with clear, actionable messaging.