Banners

Banners create a strong visual impact by combining imagery and text, and often link to other content making them effective for highlighting key messages or calls-to-action (CTAs).

• After opening a page, click the blue plus icon at the top of the page to add a new section. Select ‘Banner’ from the pop-up window.
• In the banner window:
  • On the 'Layout' tab, select from the range of layout options available.
  • On the 'Content' tab, add an optional banner link.
  • On the 'Styles' tab set an optional anchor link.
• Click 'Apply' to insert the banner on the page.

• A banner has four editable areas. Hover over each area and click the blue plus icon to edit.
  • Heading (mandatory): Add the heading text and select the heading level from the drop-down menu. If using the banner at the top of the page, the page title should always be an H1.
  • Text (optional): Add and format the text. The text should be short, clear and purposeful.
  • Button (optional): Add the text, link, optional icon and icon settings.
  • Image (mandatory): Click 'Add media'. Then you can either:
    • 'Choose file' to upload an image from your computer. Please read the advice about using suitable images (i.e. image dimensions, file size, format).
    • Select from the images already available.
    • Click 'Insert' and add an optional link and captions.
• Click 'Apply' to add each element to the banner.
• After adding a banner, you can amend any of the areas by clicking on them and using the edit pane which opens on the right. Any changes you make are immediately updated in the preview page to the left.

Use the toolbar to:

Image

• Move the component up or down the page
• Edit the component settings, e.g. layout
• Copy the component
• Save the component as a reusable template to use elsewhere on your site
• Delete the component from the page.

Back to top