Setting up your homepage hero

The homepage hero is the large visual banner at the top of your school's homepage, typically displaying a slideshow of images with text overlays. Setup involves uploading images to Resources, configuring a gallery, and connecting it to the Resource element in the homepage banner.

This article walks through the complete workflow for setting up your Finalsite CMS homepage hero area, sometimes called Homepage Panels in your Website Instructions. It covers Composer permissions, locating your required image and video specifications in your site instructions, understanding Resources and Galleries, updating your hero gallery, configuring the Resource element including slideshow timing, and publishing your changes. Common issues like blank hero areas, blurry images, and caching problems are also covered.

In this article

• Before you start
• Step 1: Confirm homepage permissions
• Step 2: Reference your site instructions for media specifications
• Step 3: Identify which gallery is connected to your hero
• Step 4: Create or replace media in a gallery
• Step 5: Configure the hero Resource element
• Step 6: Publish your changes
• Troubleshooting
• FAQs

Step 1: Confirm homepage permissions

Before you begin, confirm you have edit access to the homepage.

• You need a minimum permission level of View, Edit, and Publish at either the page level or global level. Learn more in the article, "Composer permissions."
• If you cannot see the Compose toggle on the homepage, you likely don't have the required permission level. Contact your main site administrator or Finalsite Support to update your granular page permissions.

Step 2: Reference your site instructions for media specifications

Every Finalsite design has specific requirements for hero images and videos to ensure they look crisp on all devices. 

• Navigate to your Website (or Site) Instructions page in the Composer page tree and locate the Panel Image & Video Sizes accordion to find your required aspect ratio (e.g., 16:9) and recommended resolution (e.g., 2880 x 1100 px).

Step 3: Identify which gallery is connected to your hero

Before uploading new content, identify where the current images are stored. A gallery is typically created for you during implementation and connected to the hero's Resource element.

1. Navigate to your homepage in the page tree and click to open it.
2. Enter Compose mode using the toggle in the bottom left corner.
3. Hover over the hero area until the settings gear appears, then click it to open the Resource element settings.
4. Note the name of the gallery currently connected. You'll use this in the next step.

Resources vs. Galleries: Resources is your media storage — ingredients organized in folders. Galleries assembles those resources for display. Your page's Resource element pulls from a gallery, not a folder directly, so media must be in Resources before it can appear in a gallery.

Step 4: Create or replace media in a gallery

1. Go to the Resources module, then select Galleries.
2. Locate the gallery connected to your hero, or create a new one. Consider renaming it something specific like "Homepage hero 2026" to make it easier to find later.
3. Make sure the media you want to display is already in Resources:
   • Not yet uploaded? See the article "Upload a resource."
   • Already in Resources? See "Add media into a public gallery" in the Galleries article.
4. Add alt text to every image for accessibility.
5. Drag and drop items into the order you want them to appear in the slideshow.

Step 5: Configure the hero Resource element

1. Return to the Resource element settings on your homepage in Compose mode.
2. Click the Browse button and select your updated gallery.
3. To control slideshow timing, look for the Controls or Slideshow tab and adjust:
   • Transition speed: How long it takes to fade or slide between images.
   • Display time: How many seconds each image stays on screen.
4. Click Save to update the element.

⚠️ Important: Do not change the Format of any homepage Resource elements. These formats are tied to your site's custom layout and changing them can break the page design.

Step 6: Publish your changes

Review your changes in Preview mode on both desktop and mobile before going live. When everything looks correct, publish the gallery in Resources and publish the page in Composer. Both must be published for changes to appear on the live site.

Troubleshooting

FAQs

1. I updated the gallery, but the old images are still there. Why?
Composer sometimes caches previous selections. Try re-selecting the gallery in the element settings and clicking Save again.

2. Why does my image look different on my phone?
Most hero sections stretch to fill the screen. Because a phone is tall and narrow while a desktop is wide, the edges of your image may be cropped. Keep the most important part of your image, such as a student's face, in the center 50% of the frame.

3. Can I change the speed of the slideshow?
Yes. In the Resource element settings, find the Controls or Slideshow tab and adjust the Transition speed and Display time.

4. Can I add a link or button to the hero images?
This depends on your design. Some support it out of the box; others may require a work order. Reference your Website Instructions for guidance.

5. How many images should I have in my hero slideshow?
Use 3 to 5 images. Too many images slow down the initial page load, and most visitors scroll past the hero before the sixth or seventh image appears.