Introduction to hero headers on your website

How to upload and customise hero header images at the top of your website pages

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 customise 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 to 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 customise the hero header settings site-wide by going to 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. 

 

Upload to your pages

You can upload your hero images directly to the pages you wish. First, you'll need to go to the back-end of the Page you are editing and enable 'Custom page header'. 

The option is available for any of the main record sections you've not selected to hide from the main Hero Header Settings, and for any Custom Pages you've created (Pages > new record). 

Steps

1. Login to CMS > Pages > Edit a page
2. Scroll to 'Page Header' > Enable 'Custom page Header' > Customise your header

Header text overlay: Enter any text details (header title/subtitle) 

Single image upload: Upload a 'header background image' or if you want a slideshow affect then you can upload or select multiple images to the 'Header image slideshow'. 

Multiple image slideshow: Alternatively, you can upload a 'Header background colour' by selecting a Hex code from the colour wheel. 

Hide header: You can always hide the header in this section by ticking this option. 

 

Upload to your records

You can upload hero headers to your individual records, like Exhibitions, Artists, News, etc. 

Steps

1. Login to your CMS > Records > Edit a record
2. Scroll to 'Header image' > 'Header background image' > Upload image.

Viewing Rooms

For your Online Viewing Room records, you can go the full stretch with our latest hero header functionality. This includes uploading a header background video to having more control on the text layout and colour. You can even set a unique mask overlay and header height for a specific Viewing Room. 

Steps

1. Login to CMS > Records > Viewing Rooms
2. Edit a Viewing Room or create a new record
3. Scroll to 'Page Header' > enable to customise your page header