Hero Banner

Tips & Guidance

  • Remember that the image will resize based on the width of the screen. 
  • We suggest providing an image at 1920px wide and 500px high with the understanding that the top and bottom of the image will be cropped out on wider screen views
  • It is not ideal to include text or graphic elements as part of the hero banner due to the way it resizes across devices.
  • If it is necessary, ensure the graphics are in the vertical centre of the image for best rendering across devices 
  • On the dynamic template, the hero banner is created using the full width slider module (same as the homepage module). We select ‘no text overlay’ and set the pixel height to 300px or 400px (or whatever you like)
  • There is also the option to add the banner to the page teplate itself (in the same way you would with older page templates). The only issue with this is you cannot select a separate image for mobile, the mobile banner will be cropped to the centre. 


  • Desktop: 1920 wide x 400px high
  • Mobile: 400 wide x 400 high
You can download pdf guide here: