How to upload and customise hero header images at the top of your website pages
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.
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.
You can choose between the following hero header styles:
- Full-bleed (fit browser window)
- Contained (fit inside page margins)
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
Apply a fixed aspect ratio to your hero headers or adjust the header height site-wide
Hero header sections
Choose your hero header visibility preferences for detail pages and main pages
Hero headers will display with content specific to the record, rather than the generic section header.
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).
- Login to CMS > Pages > Edit a page
- 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.
- Login to your CMS > Records > Edit a record
- Scroll to 'Header image' > 'Header background image' > Upload image.
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.
- Login to CMS > Records > Viewing Rooms
- Edit a Viewing Room or create a new record
- Scroll to 'Page Header' > enable to customise your page header