singledigitalpresence.vic.gov.au

Add a hero image or introduction banner - Vic Gov digital guide

A step-by-step guide to adding a hero image or introduction banner to a landing page.

This section describes campaign pages. See the Campaign blocks (primary and secondary) page for guidelines on those content components.

Create a new landing page

To create a new landing page follow the instructions on the Create a new content page guide, make sure you choose the landing page content type.

Once you've completed those steps, follow the additional steps below to complete your campaign page.

Add a feature hero image

Campaign pages will have a feature hero image in the page banner (see example below).

A hero image behind heading and sub heading text on a webpage

The following dimensions are required for the hero image.

1600px wide x 600px high (keep this dimension in proportion).

Image must be at least 72dpi.

Guidelines for selecting a hero image

  • Avoid images that are complex
  • If using an image with people, make sure they are positioned to the right side of the image (Otherwise they will be hidden by the page title)
  • Do not have text in the image (this fails accessibility)

Adding a hero image

To add a hero image to your campaign page:

1. In the Page Header tab, click Hero Image.

2. Click Select images

3. Browse and select your image from the Library tab if uploading an existing image.

4. If you're uploading an image for the first time, click on Add image, then Choose file and browse your computer for your image.

5. Complete the Name field. Make the name of the file meaningful to the image, so it can be easily found using Media search. For example, a photo of a teenage girl laughing should be titled 'Teenage-girl-laughing'. If it’s a photo of a well-known person, you should include their name and position in the title (e.g. Joan-Kirner-former-Premier-of-Victoria).

6. You can define a focal point for your image so the image so the image will be cropped to the required proportions/dimensions for each device based on the focal point. Only 1 focal point can be added to an image.

To add the focal point, select the point using your mouse by clicking the image.

Focal point - images - example

7. Complete the Alternative text field for your image. This is a description of the image for users who can’t see the image; it’s an important accessibility requirement. If the image is simply decorative, add two double quotes in the alt text field; this tells the screen reader to skip it.

8. Click Save image.

Choose a theme

Once you have added a hero image, you can select a Light or Dark theme. This will apply a style to the heading and sub heading text in your banner.

The Light theme is best suited to images that feature light colours. This theme places text directly on top of the image featuring blue heading text and black sub heading text.

The Dark theme is best suited to images that feature dark colours. This theme places heading text on a blue background with white sub heading text (see example above).

To select a theme:

1. In the Page Header tab, use the drop down box under the heading Theme to select Light or Dark.

Now you're ready to Save and preview your campaign page. Use preview to check how the Hero Image looks on the page. 

Make sure you adjust your browser size to check how the image responds across different screen sizes.

Introduction banner

You can add an Introduction banner to a landing page. It appears under the heading 1 and introduction.

Call to action banner - how it appears in the front end

To add an introduction banner to your landing page, select the Header content tab:

Header content tab
  • Select Introduction banner from the component drop down
  • Add Component

Add the following fields if applicable:

  • Title (mandatory)
  • Summary (mandatory)
  • Banner type (mandatory):
    • Standard: without an icon
    • With icon: adds an exclamation mark (!) as an icon beside the title of your introduction banner
  • Banner display type (mandatory):
    • Featured links: adds a link style with an arrow against each link
    • Buttons: adds a button style to each link
  • Links (you can add up to 3 links to your banner):
    • URL: link to a page you'd like to highlight in your banner
    • Link text/Button label: Call to action text/label for your link
Introduction banner - back end view of fields

Reviewed 30 September 2020

Vic Gov digital guide

Was this page helpful?