All page layouts now include a hero section at the top and a full-width section at the bottom as standard zones. There are 5 layouts in total — Full width, 50% / 50%, 25% / 75%, 75% / 25%, and 33% / 33% / 33% — and every one of them has a hero zone. The "hero layout" is no longer a separate variant. This article walks through using the hero page section effectively.

What the Hero Page Section is

The hero page section is the area at the very top of a page, above the page title and main content. Use it to make a strong first impression on visitors — a campus photo, an event banner, a horizontal navigation bar, or a row of call-to-action buttons.

Because hero zones are in every layout now, you don't pick a "hero layout" — you pick any of the layout templates and put hero content in the top zone if you want one.

What you can put in the hero page section

The Hero zone's Add Page Block modal offers five block types (distinct from the page-level modal, which offers ten):

Content — text, hyperlinks, embedded images/videos. All of the content you can add in a content page block — though most content will look better in the body of the page than in the hero.
Photos — single image or gallery banner. The best use of the Hero Page section!
Section Menu — horizontal navigation across the top of the page.
Buttons — call-to-action row (Apply Now, Donate, Register, etc.).
Links — a list-style block for grouped links.

Files, Supply Lists, News, Events, Staff, and Staff Block are not available in the Hero zone — those are page-level blocks that go in the content area below.

To add a block to the hero page section, scroll to the top of the page editor and click + Add in the hero area, then pick the block type from the Add Page Block modal.

If you want the hero page section to be empty (no banner, no nav), just don't add a block to it — the layout still includes the zone, it just collapses visually when there's nothing in it.

Hero photos: Constrained vs Full width

When you add a Photos block to the hero zone, click the gear icon on the block to choose how the image displays:

Constrained — image fits within the page's center column, with standard side margins.
Full — recommended image stretches edge-to-edge across the page. More dramatic; good for landscape banners.

To switch:

Click the gear icon on the photo block
Choose Constrained or Full
Click Save Draft and preview to see the result

Some site designs may not handle Full-width hero images cleanly. If your hero image looks stretched, distorted, or clipped, try Constrained — and contact Edlio Support if neither width option looks right.

Hero Section Menu: horizontal nav across the top

A Section Menu in the hero zone displays horizontally across the top of your page, in contrast to the sidebar Section Menu which displays vertically.

	Sidebar Section Menu	Hero Section Menu
Direction	Vertical	Horizontal
Position	Right or left sidebar	Across the top
Best for	Long lists, persistent nav	Short lists, prominent nav

You can have a Section Menu in the sidebar AND a Section Menu in the hero zone — they show the same pages (they're tied to the same section). Most sites pick one or the other.

The horizontal Section Menu may render in greyscale rather than your site's branded colors on some templates. If you want it to match your school's branding, contact Edlio Support about customization.

When to use a hero page section

Hero page sections earn their keep on:

Department landing pages — department-specific photo and quick links
Event pages — event banners, registration buttons
Athletic pages — team photos, season schedule shortcuts

Internal/utility pages (policy pages, FAQ pages, contact information) usually don't need hero content — leave the zone empty and let the page title carry the visual weight.

Image selection tips

High-quality, school-appropriate images
Landscape orientation works best for Full width; portrait or square for Constrained
Avoid text overlaid on the image — page titles handle that, and overlaid text is hard to read at mobile sizes
Test on mobile — hero photos crop differently on phones than on desktop

Troubleshooting

Problem	Try
Hero image looks stretched or distorted	Switch between Constrained and Full; verify your source image has good resolution
Section Menu in hero shows wrong pages	Check page organization in the section — hero and sidebar Section Menus mirror each other
Hero photo cuts off important content on mobile	Pick a less detailed image, or use Constrained
Hero photo conflicts with site design	Contact Edlio Support for design-level adjustments

Hero layouts