How to use a Hero block

A Hero block is used to emphasise the title of your campaign site. It should be the first block on your home page.

How to use a hero block

The Hero block is a coloured banner which can include a header, subtitle, logo and image. The colour options for the Hero block are defined when you set up your site’s colour theme. There are many combinations of these components, but adding more makes the hero block appear on more of the screen. 

This is more significant for mobile users, as the components you include in the hero block will adjust so they appear beneath each other. This can affect the initial impression and impact of your site, especially for mobile users. Find out how to preview your page on other devices.

A banner is a full-width component and will display incorrectly on desktop screens if you use it on a page with a navigation sidebar. This sidebar appears when you set subpage navigation (hierarchy) on a page. We advise you only use banners on your front page, or on pages without child pages (for example, the home page).

There are 3 main ways to use the options available in a hero block:

  • a heading and subheading: can give a clear and effective introduction to your site, for example:

Government campaign user guide

How to build and manage a campaign site

  • a logo, title and image: can associate your campaign with your department and branding, for example:

Government campaign user guide

  • a title, subtitle and image: can give users more information about your campaign and associate it with your branding, for example the Plant The Future page or this comparative example:

Government campaign user guide

How to build and manage a government campaign

You can also:

How to add a Hero block with a heading and subheading

To add a Hero block with a heading and subheading:

  1. Click the plus (‘+’) button to add a block to your page.
  2. Type ‘hero’.
  3. Click the ‘Hero’ option.
  4. Check the ‘Text’ option is selected (highlighted in blue).
  5. Type your site title in the ‘Heading text’ box.
  6. Type your subtitle into the ‘Content’ box.
  7. If you want to change your banner’s colour click ‘Options’ on the left and select a colour from the drop-down menu under ‘Colour theme’.

How to add a Hero block with a logo, title and image

Before you add the Hero block you must have the images you want to use. These must:

  • be .jpeg files
  • have transparent backgrounds
  • be 200 by 200 pixels (if it’s a logo)
  • be 500 by 300 pixels (if it’s an image)

To add a Hero block with a logo, title and image:

  1. Click the plus (‘+’) button to add a block to your page.
  2. Type ‘hero’.
  3. Click the ‘Hero’ option.
  4. Click the ‘Logo’ option (it will highlight in blue).
  5. Click ‘Add Image’ to upload your image to the site.
  6. Type your site title in the ‘Content’ box.
  7. Click ‘Banner Image’.
  8. Click ‘Add Image’ to upload your image to the site.
  9. If you want to change your banner’s colour click ‘Options’ on the left and select a colour under ‘Colour theme’.

How to add a Hero block with a title, subtitle and image

Before you add the Hero block you must have the image you want to use. This must:

  • be a .jpeg file
  • have a transparent background
  • have a central focal point
  • be 500 by 300 pixels

To add a hero block with a logo, title and image:

  1. Click the plus (‘+’) button to add a block to your page.
  2. Type ‘hero’.
  3. Click the ‘Hero’ option.
  4. Click the ‘Logo’ option (it will highlight in blue).
  5. Type your site title in the ‘Content’ box.
  6. Click ‘Banner Image’.
  7. Click ‘Add Image’ to upload your image to the site.
  8. If you want to change your banner’s colour click ‘Options’ on the left and select a colour under ‘Colour theme’.

In this section