Banner image

Use this guide to add and edit the Banner image.

Features

The Banner image is the main image on the homepage.

The component:

• allows you to add or change your banner heading and text
• allows you to update your banner image
• links the banner to a page
• has a long banner heading or a short heading with a short description
• can only be used on the homepage.

The size of the banner image depends on your website theme. Check the image dimensions for further information.

Example Banner image:

Step 1: Upload the banner image

• Before you can add a new image to your banner you must upload the image to Assets.
• Follow the guide to upload an image to Assets.

Step 2: Navigate to the homepage

• Log in to Adobe Experience Manager and select Sites.

• Your school's home page will already be selected.
• Select the icon to the left of Home. The tick will appear and your selection will turn blue.
• Select Edit in the menu bar that appears across the top of the screen. 

Step 3: Open the banner 

• Select Edit in the top right of the page. This button is next to Preview. 
• Select anywhere in the banner to activate the component.
• Select the spanner icon to edit your banner. This is the Configure button. 

Step 4: Edit your banner properties

Your banner must include an image and alt text. The other elements such as a text box including a heading and a short description are optional. 

Heading  

• Enter the Heading. This will appear as the title on the banner. 
• Use less than 32 characters. 
• If you need more than 32 characters use the long heading banner. 
• Use sentence case. 

Short Description

• Enter a Short Description.  This paragraph will appear below the heading. 
• Use less than 140 characters including spaces. 
• End the paragraph with a full stop. 

Link Label

• Enter a Link Label if you would like to include a link in your banner. The Link Label describes the link location. For example: Contact us.

Link Destination 

• In the Link Destination field, select the tick icon to navigate through your website pages to find the page you want your banner to link to when selected. 
• Once you have found your page, select the icon to the left of the page name. The tick will appear and your selection will turn blue.
• Select the Select button in the top right. 
• The link appears in the Link Destination field.

Long heading banner 

• If you need more than 32 characters for your heading you can use the Long heading banner.
• Select the box next to Long heading banner. A tick will appear in the box. 
• This will remove the short description and link options.
• Use up to 70 characters for your heading.

Step 5: Edit your banner image

• In the Image path field, select the tick icon to navigate through your image and document assets to where you have previously saved your banner. 
• Once you have found your banner, select the icon to the left of the banner name. The tick will appear and your selection will turn blue.
• Select the Select button in the top right. 
• The image path appears in the Image path field.

Step 6: Add your alt text

• Enter the alternative text for your image into the Alt text field.
• See the image guidelines for more information on alt text.
• Select the tick on the top right of the pop-up to save the banner settings. 

Step 7: Publish the homepage

• For changes to be updated on your live school website you will need to publish the page.
• Select the slider icon in the top left corner. This is the Page Information button.
• Select Publish Page from the drop-down. 
• If you don't see Publish Page you are an Author and will need to select Start Workflow instead. Go to our Author publish a page for more information.

 You may also find useful

• Homepage
• Examples of available themes
• Log in to Adobe Experience Manager
• Image dimensions
• Author publish a page