Learn how to upload an alternative Header image on your website that is more suitable for mobile device display.
Why is this useful?
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 into a smaller screen, you now have the option to upload an image which is more appropriate for mobile viewing.
Where can you add Mobile Header images on your CMS?
- Homepage slideshow
- Exhibition records
- All hero header enabled sections
- Custom pages
- Parallax Full-bleed image feature panel
- Viewing Room teaser image
How to add Mobile Header images to the different areas of your website
Homepage slideshow
- Go to Pages > Home and click on the pencil icon to open the edit screen of your Home page
- Navigate to the Header Slideshow section of the page
-
Select the pencil edit icon in the relevant Mobile Image file
- Press ‘Replace Image’ in the window that pops up, and then ‘Choose File’
- Upload your new image
-
Save changes
Exhibition records
- Go to Records > Exhibitions and navigate to your chosen Exhibition record
- Select the pencil edit icon to open the record edit screen
- In the edit window scroll down to Images
-
Find the Home page mobile image field
- Select Upload image
- Upload your new image
- Save changes
Hero header enabled sections & Custom pages
- From your CMS, go to Pages and find the Page where you would like to customise your hero header
- Click on the pencil icon to open the edit screen
- Scroll down to the Page Header section
- If not already toggled on, turn on the Customise page header toggle
-
Find the Header mobile background image field
- Select Upload image
- Upload your new image
- Save changes
Parallax Full-bleed image Feature panel
- Go to your Viewing Room record, or your Custom Page edit screen where you wish to add/edit a Full bleed image Feature panel
- From the Feature panel edit screen, find the full-bleed image panel you would like to edit and click on the pencil icon to open the edit window.
- If you wish to create a new panel, click on 'create new panel' and select 'full-bleed image' from the panel type menu
- Scroll down to the Content section of your full-bleed image Feature panel
-
Find the background mobile image field
- Select Upload image
- Upload your new image
- Save changes
Viewing Room forthcoming teaser image
- Firstly, please ensure that Hero headers are enabled for Viewing Rooms. Navigate to Settings > Settings > Hero Headers > Enable hero headers.
- Go to Records > Viewing Rooms > All viewing rooms and find the Viewing Room record you would like to add an alternative Mobile Header Forthcoming Teaser image.
- Click on the pencil icon to open the edit screen
- If not already enabled, turn on the Enable teaser toggle under Forthcoming Teaser. Please note, to enable teaser, the viewing room must be dated in the future
-
Scroll down to find the Header mobile image field
- Select Upload image
- Upload your new image
- Save changes
Cannot find the Hero headers mobile image feature field?
Only certain themes have access to the Hero headers functionality, these include Aspect, Aperture and Drayton. If you are using the other themes (Mode, Monochrome Light or Monochrome Dark) and would like to use this feature, it is possible to change themes. Please drop us an email if you would like to do so.
What happens if I do not use this feature?
The CMS will continue to use the existing Main image as the Header Image for mobile view.