Skip to McMaster Navigation Skip to Site Navigation Skip to main content

Hero Banners and Call-to-action (CTA) Banners

What is a Banner?

A banner is a rectangular advertisement on your page that can be linked to other pieces of content. There are 2 types of Banners; Hero Banners and Call-to-action (CTA) Banners.

Hero Banners

WHAT IS IT?

Hero Banners are in the Page Header and should be one of the first things a user sees when landing on the page. They are full-width elements that can display a text, a link, an image (or video).

 

HOW TO USE IT?

  1. Access the Page Editor.
  2. For a Landing Page Template, a ‘Hero Banner’ editing box will be generated at the top of the editing page. For a Default Page Template, the ‘Use Hero Banner’ checkbox at the top of the editor must be selected.
  3. Select ‘Add Hero Banner’ to generate a new Hero Banner. (Please note: Adding multiple Hero Banners will result in a carousel that will follow the same order as the Hero Banner panels in the page editor.)
    1. Background: Options are image or image and video. An image should always be set. In the case of image and video, if the video fails to play then the image will appear in its place. The image and video fields will appear. For more about adding images, please refer to the Image Management page. For video, the field requires the YouTube Video link.
    2. Vertical Alignment: This allows for a minor adjustment to the vertical alignment of the image. 
    3. Details: This is where the text is set for the Hero Banner. There are five options:
      1. No details: No text.
      2. Left Text: Text appears in a white graphic on the left.
      3. Right Text: Text appears in a white graphic on the right.
      4. Center Text: Text appears in the center, overlayed on the image.
      5. Center Logo: Instead of text, an all-white transparent background PNG can be set on top of the image. (Accessibility Note: Due to contrast issues related to web accessibility, a dark image must be used for this option).
  4. To add a link/button to the Hero Banner, the ‘Link Type’ field can be used for all text/details settings except ‘No Details’. For more information about adding links and working with the MacSites link builder, please visit the Link Management with Link Builder page in this documentation.
  5. To re-order Hero Banner order when multiple banners are set, select the number field and drag & drop to rearrange.
  6. Important note: There is no undo for this action. To remove a banner, select the remove icon on the right side of the panel field.
  7. When ready to publish, select ‘Update’.

 

WHERE CAN IT BE USED?

 

RECOMMENDED USE CASES

  • Call-to-action for other areas of the site
  • Marketing campaigns
  • Details about the site/page

 

EXAMPLES

MacSites Homepage

MPS Homepage

CTA Banners

WHAT IS IT?

Call-to-action (CTA) Banners are full-width banners that can be placed anywhere on a landing page. They are a good way to break up content and insert visual “stops” into the page. They can display a title, a description and a link.

 

HOW TO USE IT?

  1. Access the Page Editor.
  2. Scroll down to the ‘Add Element’ button and select ‘Banner’.
  3. A banner editing box will be generated. It contains the following options:
    1. Banner Type: Narrow or Large (refers to the vertical height of the banner).
    2. Background Colour
    3. Title
    4. Content
    5. Image: Refers to a background image. (For more about adding images, please refer to the Image Management page.)
    6. Link (Refer to Link Management for more information on how to work with the Link Builder)
  4. To add additional banners and generate a carousel, select ‘Add banner’ within the group.
  5. To re-order banners, select the number field and drag & drop to rearrange.
  6. Important note: There is no undo for this action. To remove a panel, select the remove icon on the right side of the panel field.
  7. When ready to publish, select ‘Update’.

 

WHERE CAN IT BE USED?

 

RECOMMENDED USE CASES

  • Call-to-action for other areas of the site
  • Marketing campaigns
  • Newsletter sign-ups

EXAMPLES

MacSites Homepage (The News & Update Banner halfway down the page).