The Hero Section is a prominent and consistent design element that appears across most page types, offering flexibility to enhance your site's visual appeal and usability. This guide walks through its functionality and customization options.
(note this is sped up 30% but if you'd like the original that's here on Loom)
Adding and Customising Hero Content
1. Default Behavior:
- If left blank, the hero section will not display an image or video, resulting in a clean appearance with nothing at the top of the page.
2. Adding Images or Videos:
- Use the Add Content option to include images or videos.
- Images:
- Upload a selected image (e.g., an aquarium image).
- Save and publish to display the image in the hero section.
- The system automatically optimizes images for different sizes and devices.
- Videos:
- Input a YouTube or Vimeo link.
- Optionally, upload a poster image to ensure a smooth visual transition while the video loads, avoiding a blank frame.
Enhancing with a Carousel
- Adding multiple images automatically generates a carousel, complete with navigation dots and sliding functionality.
- Carousels can be used on any page type (e.g., subpages, news stories, events) to feature multiple visuals.
Adding Hero Content Panels
Overlay Panels:
- Panels provide an accessible alternative to embedding text within images, supporting screen readers and maintaining accessibility.
- Hero Content Panels can include:
- Titles
- Subtitles
- Call-to-action buttons with links.
Position and Style:
- Panels only appear if the Full Screen option is enabled.
- Adjust panel positioning (e.g., center or bottom alignment) to optimize visibility on mobile and desktop.
- Apply themes, such as light or dark overlays, to improve text readability against the background.
Use Cases:
- Campaign pages or homepages.
- Highlight specific calls-to-action, such as "Explore the Resort."
Fine-Tuning the Design
- Adjust Panel Widths: On larger screens, expand panel widths for better visibility and balance.
- Block Themes: Use light or dark themes to improve contrast between text and the background image or video.
- Alignment Options: Center-align text and buttons for a polished look.
Advanced Features
Signpost Bar:
- Add Signposts for clear shortcuts to important sections, such as key information or promotions.
- Signposts include:
- Icons
- Links
- Subtext.
- Limit the number of signposts (up to 5 recommended) to avoid clutter.
Transparent Header Option
If you need to create a more immersive page (e.g. for a seasonal event or themed experience) then you can turn on the Transparent Header option.
- You can find the Transparent Header option on the Page Settings tab.
- Ensure background images are dark enough to maintain menu contrast.
Mobile overrides and new crop layout options
We’ve added two powerful new features to help you make the most of your key visuals:
1. Mobile Image Override
You can now upload a separate mobile-specific image to avoid awkward crops.
👉 Ideal for images with important content near the edges.
Tip: Use a portrait or square version for mobile and a wider landscape for desktop.
2. Uncropped Hero Image Option
There’s also a new “uncropped” mode that reduces the amount of auto-cropping across screen sizes.
👉 Great for showcasing full artwork or visuals with detail across the whole frame.
Combine this with a mobile override for best results.
These updates give you more control and flexibility when bringing your attraction to life online. Give them a try on your dev site first and tweak as needed!
