Hero Section

The Hero section creates a full-bleed, cinematic introduction to your page with image or video backgrounds.

Adding a Hero Section

1. Open the theme editor
2. Click Add section
3. Select Hero

Background Options

Image Background

1. Click Select image in section settings
2. Upload a high-quality image
3. Recommended: 2400px wide, 16:9 ratio minimum

Video Background

1. Enter a YouTube or Vimeo URL in the Video URL field
2. Video plays automatically, muted, and looped
3. On mobile, the image displays instead of video

Video URL formats:

• YouTube: https://youtube.com/watch?v=VIDEO_ID
• Vimeo: https://vimeo.com/VIDEO_ID

Height Options

| Option | Viewport Height | Best For | |--------|-----------------|----------| | Small | 50vh | Secondary heroes | | Medium | 70vh | Standard use | | Large | 85vh | Impactful statements | | Full | 100vh | Full-screen heroes |

Content Positioning

Place your content anywhere on the hero using the 9-point grid:

Vertical: Top, Middle, Bottom Horizontal: Left, Center, Right

Example combinations:

• Middle Center - Classic centered hero
• Bottom Left - Editorial style
• Middle Right - Asymmetric layout

Overlay Styles

Add a layer between background and content:

| Style | Effect | |-------|--------| | None | No overlay | | Solid | Single color overlay | | Gradient | Fade from dark to transparent | | Vignette | Darkened edges, lighter center |

Adjust Overlay opacity (0-100%) to control darkness.

Available Blocks

Add content blocks to your hero:

Subheading

Small text above the main heading, often used for categories or taglines.

Heading

The main hero text. Choose from Small, Medium, or Large sizes.

Text

A paragraph of supporting text. Limit: 1 per hero.

Button

Call-to-action buttons. Up to 2 buttons allowed.

Button styles:

• Primary - Solid background
• Outline - Transparent with border
• Underline - Text link style

Enable Show arrow for an animated arrow icon.

Additional Settings

Scroll Indicator

Toggle Show scroll indicator to display an animated arrow prompting users to scroll down.

Parallax

Enable Parallax for a subtle depth effect as users scroll. The background image moves slower than the content.

Color Scheme

Select a color scheme to style the text and buttons.

Best Practices

Image Selection

• Use high-contrast images or add overlay for text readability
• Ensure focal point works with your content position
• Test on mobile to verify cropping works

Content Length

• Keep headings short and impactful
• Limit text to 1-2 sentences
• One clear call-to-action is usually best

Performance

• Compress images before uploading
• Use JPG for photos, PNG only if transparency needed
• Videos should be hosted on YouTube/Vimeo, not uploaded directly