Page Content Sections - Hero Image Section

Use the Hero Image Section when you want to place a wide visual image on a page.

What this section is for

This section is a simple image section.

It works well for:

• a strong visual at the top of a page
• a wide image break between sections
• a linked promotional graphic
• a banner-style image that supports the page content

Helpful details:

• On landing pages, the image displays across the full browser width.
• On default pages, the image displays across the main content column.
• This section does not include its own headline, caption, button, or text overlay fields.

Fields in the Hero Image Section

Section Title

Use Section Title to help your team identify the section while editing the page.

Helpful detail:

• This title is internal only. It is not shown on the website.

Hero Image

Use Hero Image to upload or select the image shown in the section.

Helpful details:

• The image is cropped to an 8:3 aspect ratio.
• The editor recommends an image between 1920 x 720 and 2880 x 1080.
• For faster page loading, it is best to keep the file as optimized as possible.
• You can choose existing media as well as upload a new image.
• After uploading or choosing existing media, use the crop controls in the field and then save the page.
• If the image is later removed from the Media Library, the section will not render on the page.

Alt Text

Use Alt Text to describe the image for screen readers, search engines, and anyone who cannot see the image clearly.

Helpful detail:

• A short, plain description is usually best.

Link URL

Use Link URL if the image should be clickable.

Helpful details:

• Leave this blank if the image should be visual only.
• Internal links can use a path such as /events.
• External links should use the full website address.

Open in New Window

Use Open in New Window when you want the image link to open in a new browser tab.

Helpful detail:

• This setting only matters if Link URL has been filled in.

Active

Use Active to control whether this section is included when the page is rendered.

Helpful detail:

• If Active is turned off, the section stays in the page editor but does not appear on the website.

Important behavior to know

• This section shows only the image itself.
• If you add a Link URL, the entire image becomes clickable.
• If Open in New Window is turned on, that link opens in a new tab.
• If you need text above or below the image, add another section nearby such as a Simple Text Section.

How to add a Hero Image Section to a page

1. Open the page you want to edit.
2. Go to the Page Content area.
3. Click Add new section.
4. Choose Hero Image Section.
5. Enter a Section Title for internal reference.
6. Upload or select the Hero Image.
7. Crop the image to fit the required 8:3 shape.
8. Add Alt Text.
9. Add a Link URL if the image should open another page.
10. Turn on Open in New Window only if that link should open in a new tab.
11. Make sure Active is turned on.
12. Save the page.
13. Review the page on the website.

Practical image tips

• Start with a wide image so the crop is easier to manage.
• Keep important faces, text, or logos away from the extreme edges.
• Use clear, descriptive alt text.
• For internal navigation, it is usually best to leave Open in New Window turned off.
• For external destinations, opening in a new tab may be helpful.
• Check the finished page on both desktop and mobile.

If the section is not behaving as expected

Check these items first:

• the page was saved after your edits
• the section's Active toggle is turned on
• the image was successfully saved in the section
• the image was not later removed from the Media Library
• the link format in Link URL is correct
• the crop is not cutting off the most important part of the image

Related topics

• Pages - Learn how pages and page sections are managed.
• Media Library - Manage uploaded images and the crop workflow used in image fields.
• Page Content Sections - Hero Video Section - Use this when the section should display a video instead of an image.
• Page Content Sections - Simple Text Section - Add normal text content before or after the hero image.