Hero banner

A hero banner is a large image that captures the user's attention and sets the tone for the page. The page's H1 heading displays in the centre of the image and you can also add up to 3 buttons under the heading.

Hero banners are best used for promotional pages where the aim is to sell a concept to your audience.

Use a hero banner when:

• the page is promotional and needs to be visually engaging
• the image relates to the content below
• a strong image will connect with users and encourage them to scroll.

Don't use a hero banner if:

• you don't have an appropriate and relevant image
• the page is task-focused and a large image will be distracting
• the content below is already image heavy
• the panel page already has a default page header.

Hero banners can be created or deleted by:

• site builders.

Existing hero banners can be edited by:

• editors
• site coordinators.

Creating a hero banner

Use the in-place editor to create a hero banner:

1. Click 'Customize this page' in the black Drupal menu at the bottom of the page, then click the plus icon (+) in the blue box at the top of page.
2. Select 'UQ' from the side menu, then click 'Hero banner'.
3. Enter the title for the hero banner. This will appear on the page as a H1.
4. Click 'Browse' to select an image from the file browser.
5. Make changes to the image's appearance under 'Customise display options', if required.
6. Optionally, add a title and link for any buttons. Use relative paths for links within your site.
7. Click 'Finish' to add the hero banner to the page.
8. Click 'Save' in the black Drupal menu at the bottom of the page to publish the changes.

Do not apply the section style to hero banners.

Editing a hero banner

To edit a hero banner, follow the instructions for editing panels on panel pages.

You can edit the title, image, buttons, layout and tinting.

Hero banners can be edited in Drupal to change their appearance. Once you've selected an image for your hero banner, you can change the:

• tint
• text colour
• banner height
• padding.

When you edit or add a hero banner, these options appear under the 'Customise display options' header:

Layout

Here, you can change the height of the hero banner:

• Default is standard height.
• Thin banner is shorter than default.

A thin banner is useful if you want users to quickly move into the main content.

Bottom spacing

This controls the spacing between the banner and the panel under it:

• No spacing means the panel below will sit flush against the hero banner.
• Bottom spacing adds a small space under the hero banner.

Apply bottom spacing to a hero banner if the panel below doesn't have a section (for example, breadcrumbs).

Theme

Here, you can change hero image tinting and the colour of text and buttons.

For tinting, choose between:

• No tint means the image will display unchanged.
• Dark tint dims the image and makes light text easier to see.
• Light tint adds a white layer over the image and makes dark text easier to see.

For text colour, choose between:

• Light text will make the title and buttons display in white. Works well with dark tint.
• Dark text will make the title and buttons display in black. Works well with light tint.

• Only have one hero banner on your page.
• Always make the hero banner the first panel on the page.
• Keep titles short and meaningful. Avoid titles like 'Welcome to the X website'.
• Optimise images for the web and crop them appropriately.
• Ensure text and buttons don't cover important parts of your image, such as people's faces.
• Choose simple images with a good contrast ratio so text is easy to read.
• Button links should direct users to pages on your site rather than to external pages.
• Use the 'Caption' field to add an image credit, if necessary.

• Default page header
• Image dimensions and cropping
• Links
• Optimising images for the web.

Fill in all required fields and as many optional fields as possible to provide the best user experience.

Button link fields

You can add up to 3 buttons to a hero banner.