Hero Banner
A full-width hero with image, video, heading, subheading, and up to two call-to-action buttons.
Settings
| Setting | What it does |
|---|---|
| Image | Desktop hero image |
| Mobile image | Optional mobile-specific image |
| Video URL | YouTube or Vimeo URL for video background |
| Heading | Main headline text |
| Heading size | Small (h1), Medium (h0), Large (hxl) |
| Subheading | Rich text below the heading |
| Button 1/2 | Label, link, and style (primary/secondary/link) |
| Animation | None, Fade up, or Subtle zoom |
| Content position | 9-point grid (top/middle/bottom × left/center/right) |
| Text alignment | Left, Center, or Right |
| Section height | Adapt, Small, Medium, Large, Full-screen |
| Overlay opacity | 0–100% dark overlay over the image |
| Color scheme | Scheme 1–5 |
Image Recommendations
- Desktop: 1920×1080px minimum (16:9 ratio)
- Mobile: 750×1000px (3:4 ratio)
- Format: JPEG for photos, under 500KB
- Use high-quality lifestyle photography
Tips
- Set overlay opacity to 30–50% so text remains readable over busy images
- Use "Full-screen" height for maximum impact on the homepage
- Provide a mobile image for best results on phones — desktop images often crop poorly