Banner image (Carousel)

Use this guide to add and edit your banner.

Features

The Banner is the main section of your homepage.

The updated component:

allows you to add or change your banner heading and text
allows you to have a single static image on your banner
allows you to have multiple images as a carousel
allows you to update your banner images
has a long banner heading or a short heading with a short description
a configurable call to action button that can go to a page on your website or an external website
allows the positioning of the text description and heading to be adjusted left or right to suit your images.
allows a video background to be used (from Brightcove)
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:

Image: Example banner carousel with right aligned text and a call to action button

Step 1: Navigate to the homepage

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 2: Create the banner component

Select Edit in the top right of the page. This button is next to Preview.
Click on the wide "Drag components here" section, choose the banner component from the list of available components.
Follow the instructions above to edit the new banner component

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.

If you don't have a banner added already:

Click on the wide "Drag components here" section, choose the banner component from the list of available components.
Follow the instructions above to edit the new banner component

Step 4: Edit your banner properties

Your banner must include at least one image and alternate text. The other elements such as a text box including a heading and a short description are optional.

The content tab

Image: The banner content configuration options.

Text alignment

Text alignment determines the position of the heading, introduction content and the call to action button if you are using them. They can be aligned left or right to suit your preferences.

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 170 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.
Click on the Select button in the top right.
The link appears in the Link Destination field.
If you wish to include a link to an external website, you can now do so by typing in the full address, for example https://www.google.com/. The external link will also show an icon.

The media tab

Image: The banner media configuration options.

Background media type

Background media type controls the type of background that will be used for your banner. The following options are possible:

None: This will not use any background, you'll just have the primary colour and basic heading and text content that you configured in the content tab.
Static image: This will let you upload a single static image from your computer or choose one from assets if you have one uploaded already. Alternate text is required.
Image carousel: This will let you configure a number of image slides for your background. You can have up to six. The images are selected from assets that you've already uploaded. Once configured, you'll also see controls below the banner to navigate through the slides and pause or play the slides. Alt text is required for each slide.
Brightcove video: This option allows you to select a video from your Brightcove account that will appear in the background. By design the video will not autoplay.

Step 5: Apply the changes

Select the tick to apply your changes.
View the page in preview mode or view as published to see how it looks. You can resize the browser window to check how your changes look on tablet and mobile device layouts.

Publish your changes

For changes to be updated on your live school website you will need to publish the page.

Please note, if your school website banner image has a rectangle box you will need to login to edit mode, select the spanner icon on the banner and then untick 'Long heading style'. This will remove the rectangle box and bring back the 'Welcome' text.

Why do I need to provide alt text?

Including alt text with your images is an important part of making your web pages accessible to your readers who use assistive devices such as screen readers and also users that use non-graphical web browsers.

In both cases, the user will obviously not be able to view the image. Instead their web browsing device will read/display the ALT text that is associated with the image. This is especially important if the image conveys information that is required for the user to fully understand the information on the web page.

A note on auto-playing videos

A common topic is auto playing videos. In general we recommend against videos autoplaying. Unexpected audio may also distress users with cognitive or sensory sensitivity. The video streams also take up the the data allowance of your users without their permission.

Many users complain bitterly that autoplay videos are a nuisance. Some users even install browser addons to block videos from playing completely. Some internet browsers have inbuilt controls to stop autoplaying videos.

Return to top of page

School website service training and support