Hero Section
The Hero section creates a striking first impression with a full-width banner at the top of your homepage.
Settings
Section titled “Settings”| Setting | Description |
|---|---|
| Heading | Main headline text |
| Subheading | Supporting text below the heading |
| Button Text | Call-to-action button label |
| Button Link | CTA destination URL |
| Background Image | Full-width background image (recommended: 1920x1080px) |
| Background Video | Optional video URL for animated backgrounds |
| Overlay Opacity | Control text readability over images (0-100%) |
| Content Alignment | Left, Center, or Right |
| Text Color | Override text color for contrast |
| Section Height | Full viewport, Large, Medium, or Small |
| Top/Bottom Padding | Spacing controls |
Best Practices
Section titled “Best Practices”- Use high-quality images (at least 1920px wide)
- Keep heading text short and impactful
- Use overlay opacity to ensure text remains readable
- Test on mobile devices where images are cropped differently
- Add
fetchpriority="high"to hero images for faster loading