Hero

Overview

The Hero section provides a bold and highly visual entry point for your page, designed to capture attention with prominent imagery, video, headline text, and calls to action. Its flexible layout blends powerful media with modular content, ensuring your story or campaign message is immediately visible. With a wide range of customization options, this section is ideal for feature campaigns, branding moments, or persuasive messaging.

⚠️ Important: Use the Hero section to create a unique and inviting experience—its flexible media and content options help focus user attention where it matters most.

Key components and functionality

Imagery settings

Imagery settings offer precise control over the look and feel of the Hero section, helping you create impact on every screen size. Well-chosen visuals are essential for narrative focus and brand strength.

Featured image placement

Image or video placement sets the overall structure for your hero layout.

1. Background

   1. The media fills the entire section as a background, with layered content above.

2. Left

   1. Media appears to the left side of your text and blocks.

3. Right

   1. Media is shown on the right side of your content.

   2. Default: right

4. No image

   1. Disables featured media entirely.

Featured image

Upload the primary image for this section. This core visual is the anchor of most hero designs, displayed according to your placement selection.

Mobile featured image

Add a mobile-specific image to ensure ideal cropping, clarity, and load time on small screens.

1. This is especially helpful when the desktop image does not adapt well to mobile layouts.

2. A well-chosen mobile image can dramatically improve the section’s impact and usability for phone visitors.

Featured video

Replace the primary image with a self-hosted video to add movement or animation. The section will show either an image or a video, not both.

1. Select clips that are clear, lightweight, and impactful even when short or muted.

2. Video backgrounds are best used with high-contrast overlays to ensure text remains readable.

Supported block types

The Hero section accommodates a wide variety of content and layout possibilities through these block types:

1. Breadcrumbs

2. Button

3. Heading basic

4. Icon with text

5. Image

6. Rich text basic

7. Separator

8. Share/Print UI

9. Video

These blocks can be combined and ordered to support immersive banners, unique brand storytelling, and strategic calls to action—all within your top section.

Usage notes

1. Use only high-quality, web-optimized images and videos for fast load times and crisp visuals.

2. Always set a separate mobile image if your primary artwork does not adapt or crop well to portrait formats.

3. Adjust overlay color and opacity for strong text contrast—the right overlay can ensure legibility even over busy images or video backgrounds.

   1. Test all text overlay and button color combinations for accessibility.

4. Tune padding and spacing settings to maintain balance and visual clarity across all devices.

5. Keep the layout focused—avoid overcrowding with multiple blocks or excessive text.

6. Always preview the Hero section on desktop, tablet, and mobile to confirm a consistent and polished appearance.

7. If using video, enable mute by default with autoplay and set captions or alternative descriptions to improve accessibility.

8. Leverage a mix of headings, rich text, and buttons to combine clear messaging with compelling visuals.

💡 Tip: Experiment with the order of your content blocks and overlay settings for the best contrast, clarity, and impact. Always prioritize accessibility and readability across every device.