This article explains the difference between banners and hero areas in Finalsite CMS Composer and walks through setup, recommended dimensions, and best practices for each.
💡What this covers
This reference guide includes a comparison of banners vs. hero areas, banner types and their roles (header, footer, and sidebar), recommended image dimensions for homepage heroes, interior pages, and poster images, a glossary of hero area terminology, and slideshow best practices including slide count, focal points, and WCAG 2.1 accessibility guidance.
In this article
- Banners vs. heroes: What's the difference?
- Banner types and their roles
- Banner and hero image dimensions
- Hero area terminology
- Slideshow and slider best practices
Before you start
This article is part of our media guidelines series. Looking for something else? Check out the full set:
- Media guide 1: Setting up your site's branding and global standards
- Media guide 2: Image specs for every module
- Media guide 3: Building hero areas, banners, and sliders (this article)
- Media guide 4: Optimizing and uploading video
Have questions about your site's specific dimensions or media setup? Every site is unique! Look in these two places first for your site's custom treatments, enhancements, and site-specific directions:
Banners vs. heroes: What's the difference?
| Concept | What it is | Where it's managed |
|---|---|---|
| Banner | A global structural container that provides a consistent visual frame across multiple pages | Banners area in Composer |
| Hero area | A high-impact visual element designed to capture immediate attention at the top of a page | Resource elements on homepage or interior pages |
Banner types and their roles
| Banner type | Placement | Best practice |
|---|---|---|
| Header banner | Top of every page; contains logos and main navigation | Ensure the school logo is tightly cropped to avoid extra space |
| Footer banner | Bottom of every page; contains contact info and secondary navigation | Use transparent .png files for partner and accreditation logos |
| Sidebar banner | Left or right of the main content zone | Use a fixed 400 px width to ensure consistency across pages |
Banner and hero image dimensions
| Area | Recommended dimensions | Notes |
|---|---|---|
| Homepage hero | 1920 x 800 px | For adaptive layouts, 16:9 works best; for fixed height, follow style guide |
| Interior page banner | 1920 x 600 px | Usually a 3:1 or 4:1 aspect ratio to save vertical space for content |
| Sidebar banner | 400 px wide (variable height) | Width is the priority; height depends on sidebar configuration |
| Footer banner | Variable | Typically used for logos; use transparent .png for best blending |
| Poster image | 1280 x 720 px | Upload custom image in Resources to avoid black frames while video loads |
Hero area terminology
| Term | Definition |
|---|---|
| Homepage hero | The primary visual at the top of the homepage, often a slider or cinematic video |
| Interior hero | A specialized visual banner at the top of landing pages like admissions or athletics |
| Background video | A silent, looping video file that serves as a backdrop for headlines and buttons |
| Slideshow / slider | A hero function that rotates through multiple images or background videos |
| Poster image | A static placeholder image that displays while a video loads or on low-data connections |
Slideshow and slider best practices
- Limit slides: Use 3–5 slides maximum to ensure fast loading and maintain user engagement.
- Keep heroes short: Use 15–30 second atmospheric clips for the homepage. Save longer narrative videos for interior landing pages.
- Custom poster images: The first frame of a video is often blank. Upload a custom 1280 x 720 px thumbnail in Resources.
- Focal point protection: Keep your subject in the center 50% of the frame so nothing important is cut off on smaller screens.
- Accessibility: .vtt captions should be provided regardless of whether speech is present; where there is no spoken text, a descriptive transcript is required for unsighted users.
🌐 Accessibility tip: Avoid embedded text in media
Do not embed text, logos, or "lower thirds" directly into your image or video files. For images, this creates accessibility barriers for screen readers and results in unreadable text when media is cropped or clipped on mobile devices. Always use Composer's built-in text overlay fields instead.
Comments
Please Sign in to leave a comment if you don't see the comment box below.