Introduction to hero headers on your website

Last edited: 12 March 2025 14:10

This article will give you an overview of hero headers and the styles of hero headers to suit your website. 

Overview

In this introduction to hero headers, we'll run through how you can upload hero images to the top of your website pages as well as customize the appearance and visibility of these large full-width images site-wide. 

Definition

Image Specifications and tips

Because of its prominent place in your website pages, it's important to choose suitable high-quality images to upload to your CMS. 

• Size: Hero header images should be at least 1600 x 1000px, but should ideally be 3200 x 2000px or larger to be optimised for upscaling for retina devices. 
• Format: As a general rule, horizontal or ‘landscape’ images work better for your hero headers. 
  
• Responsive websites: The images will intelligently react to this and always fit the specified area. On a desktop machine, full-bleed homepage images will probably appear in landscape format. On a mobile device, the same image will automatically be viewed in a narrow portrait format, though you now have the option to add alternative images for mobile device.
• The best rule of thumb to follow is that images with important content in the centre work best, as this ensures that this content is always visible. Try to avoid using images that place important content too near the edges.

Mobile hero headers

Alongside our responsive website design, there is now the option to add alternative images for mobile device. 

This feature allows you to have more control over the way your website looks on a mobile device. If your existing full-width header image does not translate well onto a smaller screen, you now have the option to upload an image which is more appropriate for mobile view.

Please see the following help note for more guidance on how to add Mobile Hero Headers.

Hero header settings

Choosing your site-wide preferences for hero headers. 

Enable hero headers

You can enable and customize the hero header settings site-wide by going to Settings > Settings > Hero Headers > Enable > Save. 

Header styles

You can choose between the following hero header styles:

• Full-bleed (fit browser window)

• Contained (fit inside page margins)

Header default overlay strength: This controls the strength of the background image overlay mask. Use the toggle to create more tint or less tint. The overlay mask does not apply to the overlay text. 

Less tint: the background image is lighter and the white text brightness remains the same

More tint: the background image is darker and the overlay text is brighter

 

Automatically swap header text colour: when enabled the text colour will switch between black and white depending on the brightness of the background image. Please note that enabling this will disable any custom hero header background colours and overlay tint settings.

 

It is important you consider applying an overlay for your hero header background images as this can make your overlay text more readable. If the overlay tint is too little then the text might not be visible enough. Applying a good contrast between the text brightness and the image brightness may also score you points for having good accessibility for your SEO ranking. 

 

Hero header overlay text: As standard, text such as the page title is positioned over the header image. Disable this to show more simple page titles below the header image. Please see below screenshot. 

 

 

Header overlay text layout: choose between Centred text and Left Centred text for the placement of overlay text on your hero header image. 

 

 E.g Left centred

 

Hide top and bottom masks: enable this to hide the top and bottom overlay masks for the hero header.

Header size

Apply a fixed aspect ratio to your hero headers or adjust the header height site-wide 

 

Hero header fixed aspect ratio: choose between not applying a fixed aspect ratio or decide if you wish to apply a fixed aspect ratio for your hero headers between these options: 3:2, 21:9, 16:9 or 3:1. 

 

For example - 3:2 fixed aspect ratio:

 

Warning: Fixing the aspect ratio overrides the height settings below.

 

General header height: use the toggle to set the height shorter or full-bleed for the header in all your hero header pages (including the main pages, e.g Artists, and record pages, e.g Exhibitions). 

 

For example - making the height more full bleed for the main pages (e.g Exhibitions)

 

Record page header height: use the toggle to set the height shorter or full-bleed for the header in record detail pages, this applies where 'Use record data in hero sections' has been set.

 

For example - making the height shorter for the exhibition detail pages

 

 

Hero header sections

Choose your hero header visibility preferences for detail pages and main pages

Detail page hero headers = select which individual detail page records, e.g Artist records, you wish to enable hero headers for. Hero headers will display with content specific to the record, rather than the generic section header.

Hide hero within sections = select which main page sections you'd prefer to disable hero headers for altogether (including the main landing page and the record detail page). 

 

Slideshow controls

Enable navigation buttons for the hero header slideshow. This applies if you upload more than one image to your hero headers, thereby creating a slideshow. These buttons are useful if you are trying to achieve a more accessible website, for more information on Accessibility and the guidelines, please visit this article: Website accessibility guidelines. 

 

---

Related Articles 

• Uploading hero headers to pages and records
• How to add fonts to your website CMS
• Can I change the theme of my website?