Skip to main content
Government campaign user guide

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.

This is more significant for mobile users, as the components you include in the hero block will adjust so they appear beneath each other.

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

  • a Heading and Subheading (with no image), for example:

Government campaign user guide

How to build and manage a campaign site

  • Add a Logo, plus Heading, plus Banner image (image can be left or right aligned), for example:

This is a test campaign title

  • a Heading, plus sub-heading, plus Banner image, for 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