Hero layouts allow you to add eye-catching visual elements to the top of your web pages, making them more engaging for students, parents, and visitors. This guide will walk you through setting up and customizing hero layouts on your school website.
What is a Hero Layout?
A hero layout adds a special visual area at the top of your page, appearing above the page title. Think of it as a banner area where you can showcase important images or navigation menus to grab visitors' attention immediately when they land on your page.
Getting Started with Hero Layouts
To add a hero layout to any page:
Navigate to the page you want to edit in your admin panel
Look for the "hero layout" options in your page settings
Select one of the available hero layout templates
Your hero area will now appear at the top of the page, above the title
What Can You Add to a Hero Layout?
Hero layouts accept three types of content:
Photos and images
Section Menus (horizontal navigation)
Buttons for calls-to-action
Working with Hero Images
Adding and Managing Photos
Adding photos to your hero area works the same way as adding photos anywhere else on your site. You can easily add, adjust, and remove images as needed.
Image Display Options
When you add a photo to your hero area, you have two display options:
Constrained Images:
The image fits within the center area of your page
Maintains standard page margins
Good for images that work well with your existing page layout
Full-Width Images:
The image stretches completely across the page from edge to edge
Creates a more dramatic, immersive effect
Perfect for landscape photos or wide banners
To change between these options:
Click the gear icon on your photo block
Choose either "Constrained" or "Full" width
Preview your page to see how it looks
Design Compatibility Note
While hero layouts work with most website designs, occasionally certain design elements may cause display issues. If you notice any problems with how your hero images appear, contact technical support for assistance.
Adding Section Menus to Hero Areas
What is a Section Menu?
A Section Menu is a navigation tool that helps visitors quickly jump to different pages within a section of your website. For example, if you have an "Athletics" section with pages for different sports teams, a Section Menu would list all those team pages.
Horizontal vs. Vertical Section Menus
Side Panel Section Menu: Appears vertically in your page's sidebar
Hero Section Menu: Appears horizontally at the top of your page in the hero area
Setting Up a Hero Section Menu
When you add a hero layout, you can:
Add a new Section Menu to the hero area
Move an existing Section Menu from the sidebar to the hero area
If you choose to keep both a sidebar Section Menu and a hero Section Menu, they will display the same pages - they're duplicates of each other.
Section Menu Colors
The horizontal Section Menu in your hero area may appear in grayscale colors rather than your site's branded colors. If you'd like the menu colors to match your school's branding, contact technical support for customization assistance.
Best Practices for School Websites
When to Use Hero Layouts
Hero layouts work particularly well for:
Homepage: Welcome visitors with your school's main image or key navigation
Department Pages: Showcase department-specific photos or quick links
Event Pages: Feature event photos or important announcements
Athletic Pages: Display team photos or season schedules
Image Selection Tips
Choose high-quality images that represent your school positively
Ensure images are appropriate for all audiences (students, parents, community)
Consider using photos of school events, campus scenes, or student activities
Make sure text on your page remains readable with your chosen hero image
Navigation Considerations
Use hero Section Menus for main navigation that you want visitors to see immediately
Keep sidebar Section Menus for secondary navigation or when page space is limited
Test your navigation on both desktop and mobile devices to ensure it works well
Troubleshooting Common Issues
My hero image looks stretched or distorted:
Try switching between "Constrained" and "Full" width settings
Ensure your original image has good resolution and appropriate dimensions
The Section Menu isn't showing the pages I expect:
Check that all pages you want to include are properly organized in your site structure
Remember that hero and sidebar Section Menus will always show identical content
My page layout looks different than expected:
Preview your page before publishing to check the appearance
Contact technical support if design elements seem to conflict with your hero layout
By following this guide, you'll be able to create engaging, professional-looking pages that effectively showcase your school's content and help visitors navigate your website more easily.