How do I upload an image to the Home Banner section?

To access this feature, go to any edit mode hub page and simply click on the Home Banner block in the edit mode preview screen

 

 

And select the desired section between the accordions

 

 

Title, Image and Description

To access this section, click to expand the Title, Image and Description accordion.

In this section you can:

• Edit the title of your project

• Upload your hero image with an easy drag and drop component

• Edit the alt text for your image (important for accessibility)

• Write the description in your banner with a customisable text field

• Add the link text and the link URL if you want to provide an early way for visitors to engage

 

 

 

Display layout

To access this section, click to expand the Display layout accordion:

Here you have the choice between 6 different layout options customers can choose from and will define how their hero image is displayed (please see examples below).

 

On top of this, we offer additional settings for the image:

• Transparent background colour: this setting will change the transparency on the highlight and the shapes and slightly show the image underneath.

• Overlay image: this setting darkens the image to increase readability.

 

 

Default:

This layout option allows customers to display an image only on the hero with no added layout - this options will look the same as the old hero banner.

     

Image and highlighted text:

With this option, the text on the hero will be highlighted in the main branding colour (please note the font colour will automatically change from white to black depending on the highlight colour for accessibility reason).

     

Image and square background:

This layout adds a coloured square/rectangle behind the whole text to improve readability. The colour of the square will be in the main branding colour (please note the font colour will automatically change from white to black depending on the square colour for accessibility reason).

   

Image and rounded background:

This layout adds a coloured square/rectangle behind the text to improve readability. The colour of the square will be in the main branding colour (please note the font colour will automatically change from white to black depending on the square colour for accessibility reason).

   

Square image and solid colour:

This layout adds a coloured rectangle on 70% of the hero on the left and will display the image on the remaining 30% on the right. The colour of the rectangle will be in the main branding colour (please note the font colour will automatically change from white to black depending on the square colour for accessibility reason).

   

Shaped image:

This layout adds a coloured rectangle and a round shape on 70% of the hero on the left and will display the image on the remaining 30% on the right. The colour of the rectangle will be in the main branding colour (please note the font colour will automatically change from white to black depending on the square colour for accessibility reason).