Masthead
Adds a Masthead with large heading, optional course search bar or text and CTAs and panel of content with optional animation.
How to use
- Choose a Colour Scheme: Orange, Purple, Purple Light, Red or Teal
- Optionally add a Heading Prefix to show in small text above the Heading
- Add a Heading
- Optionally add a Heading Suffix to show in small text below the Heading. If adding Top Text or showing the Course Search Bar recommend to limit the Heading Suffix to 15 characters
- Optionally add Top Text to display in the top section of the Masthead below the Heading.
Please note when Top Text is populated this will display instead of the Course Search Bar
Along with the the Top Text the following elements can be set:- By default the Top Text aligns to the right on larger screens, check the Top Text Align Left element to change the alignment to the left
- Optionally add a Primary CTA under the Top Text. Add Top CTA 1 - Text for the button text and either select a section or content item for the Top CTA 1 - Internal Link (ignore the Use default link text checkbox), or paste the full URL for the Top CTA 1 - External URL (please do not enter both)
- Optionally add a Secondary CTA under the Top Text. Add Top CTA 2 - Text for the button text and either select a section or content item for the Top CTA 2 - Internal Link (ignore the Use default link text checkbox), or paste the full URL for the Top CTA 2 - External URL (please do not enter both)
- To show a Course Search bar and 'View courses a-z' CTA after the Heading select the Course Search section from the Site Structure for the Show Course Search element
- When the Course Search bar is showing a Browse Subjects CTA can be added, select the Subjects section from the Site Structure for the Show Browse Subjects CTA element
- By default the Animation on element is checked, this will reveal the contents of the panel over the Heading when the user scrolls. Uncheck the Animation on element to disable this animation, and the panel is shown by default under the Heading.
- Select a suitable image from the Media Library for the Background Image.
Recommend image is at least 2200px x 1610px. The image can be any size or aspect ratio, and will be cropped and resized for desktop 2200px x 1610px and mobile 780px x 1688px automatically by a service called PXL. Find out how PXL crop and resize works. - Add Left Panel Text, this shows in large text over the image
- Optionally add a CTA button under the Left Panel Text. Add CTA Text for the button text and either select a section or content item for the CTA Internal Link (ignore the Use default link text checkbox), or paste the full URL for the CTA External URL (please do not enter both)
- Optionally add Right Text, this shows in a coloured panel over the image
Content Type Details
ID: 410
Name: Masthead
Description: Adds a masthead to a page, with a heading and a scrolling animation that shows the rest of the content
Minimum user level: Contributor
Content Type Elements Details
| Name | Description | Size | Type | Required |
|---|---|---|---|---|
| Name | The Name Element | 80 Characters | Plain Text | Yes |
| Colour Scheme | Select from the list | N/A | Select Box (List: Masthead Colours) | Yes |
| Heading Prefix | Add text that comes before the Heading | 15 Characters | Plain Text | No |
| Heading | Add the Heading | 20 Characters | Plain Text | Yes |
| Heading Suffix | Add text that comes after the Heading | 30 Characters | Plain Text | No |
| Show Course Search | Select the Course Search section from the Site Structure to show the Course Search bar | N/A | Section/Content Link | No |
| Show Browse Subjects CTA | Select the Subjects section from the Site Structure to show a Browse Subjects CTA in the Course Search bar | N/A | Section/Content Link | No |
| Top Text | Add Text to display in the top of the masthead below the Heading. When Top Text is used the Course Search cannot be displayed, see component library | 200 Characters | Plain Text | No |
| Top Text Align Left | By default Top Text aligns to the right on larger screens, check to align to the left | N/A | Check Box (List: Yes - Unchecked) | No |
| Top CTA 1 - Text | Add Text for CTA to show below the Top Text, only displays it Top Text is added | 50 Characters | Plain Text | No |
| Top CTA 1 - Internal Link | Select a section/content for an internal link | N/A | Section/Content Link | No |
| Top CTA 1 - External URL | Enter full URL including https:// for external URL, only enter this if you are NOT entering an internal link | 250 Characters | Plain Text | No |
| Top CTA 2 - Text | Add Text for CTA to show below the Top Text, only displays it Top Text is added | 50 Characters | Plain Text | No |
| Top CTA 2 - Internal Link | Select a section/content for an internal link | N/A | Section/Content Link | No |
| Top CTA 2 - External URL | Enter full URL including https:// for external URL, only enter this if you are NOT entering an internal link | 250 Characters | Plain Text | No |
| Animation on | Checked by default to turn animation on, uncheck to turn off | N/A | Check Box (List: Yes - Checked) | No |
| Background Image | The image on the background | N/A | Media | Yes |
| Left Panel Text | A panel with wider text on the left side | 200 Characters | Plain Text | Yes |
| CTA Text | Add Text for CTA under the Left Panel Text | 50 Characters | Plain Text | No |
| CTA Internal Link | Select a section/content for an internal link | N/A | Section/Content Link | No |
| CTA External URL | Enter full URL including https:// for external URL, only enter this if you are NOT entering an internal link | 250 Characters | Plain Text | No |
| Right Panel Text | A panel on a coloured background on the right side | 500 Characters | HTML | No |