Hero banner
Single full-width hero image with overlay text and CTAs.
Updated 2026-05-09
A simpler alternative to slideshow when you only need one hero. Same overlay, content, and height controls.
Settings
| Setting | Notes |
|---|---|
| Image (desktop / mobile) | Mobile override optional |
| Section height | original / normal / fixed |
| Image overlay opacity | 0–80% |
| Eyebrow | Small label |
| Heading + italic part | Two-piece heading; the italic part renders in the heading font's italic variant |
| Sub-text | Body text |
| Button 1 / 2 | Label + URL + style |
| Content position | 9-position grid |
| Content width | narrow / medium / wide |
| Hero link | Whole hero clickable; falls back to Button 1 URL if empty |
Section height: original
When Section height = original, the hero matches the image's natural aspect ratio. The mobile image (if set) gets its own ratio. This is the default for cinematic hero imagery.
Avoid mixing fixed height with vertical-format imagery — you'll get awkward crops.
Italic heading part
The two-piece heading lets you mix roman + italic in the same line:
Live differently with [our] handcrafted ceramics
↑ italic part
This is decorative — the italic falls back to roman if the picked font has no italic variant.
Tips
- For high-impact hero imagery, Section height = normal with Container width = full gives the cinematic feel.
- If the image has its own typography baked in, hide the heading and rely on the image alone.
- Set Hero link so the whole banner is clickable on mobile — saves a tap vs. hunting for the small button.
Need a hand? Contact support.