A large, full-width visual section that introduces the page.
Key Takeaways
- Available only on pages using the Full Width Layout.
- Configure under Page Settings → Page Attribute Values → Hero.
- Prioritize videos over background images.
- Content alignment can be set to Left or Center.
- Hero height, overlay opacity, and color can be customized per page.
Best Practices
- Use a clear, engaging heading (does not need to match the page title).
- Keep messaging focused and actionable, supported by buttons.
- Use half-height heroes to encourage users to start scrolling.
- Always include a fallback image when using video, in case the video is unable to load.
- Provide mobile-specific images or optimized video settings for better performance.
- Start with WebM video format, then include MP4 as a fallback.
- Optimize media using tools like TinyPNG to reduce file size.
- Adjust overlay opacity to ensure strong contrast between text and background.
- Choose theme colors that enhance readability and visual consistency.
- Keep mobile performance in mind—avoid large file sizes and mismatched ratios.