Header 2 – Headline w/1-2 Images
Header 2 – Headline w/1-2 Images
Description
This header has a headline and one or two images. The layout is determined by the number of images.
Fields and Character Limits
*required fields
Headline*
- Character limits: Recommended limit of 90 characters including spaces.
- Help text: Enter the headline text. There is a recommended limit of 90 characters including spaces. This field renders as an <h1>. See Headers for guidelines and best practices for headlines and sub-headlines.
Primary Image*
- Limits: 2MB, 768 x 549 pixels
- Help Text: Move white plus icon to select your preferred focal point for automatic image cropping. See Images for guidance and best practices.
- One file only.
- 2 MB limit.
- Allowed types: png jpg jpeg,
- Images must be larger than 768x549px.
Alternative text*
- Help text: See Alternative Text for info about writing effective alternative text.
Secondary Image
- Limits: 2MB, 768 x 549 pixels
- Help Text: Move white plus icon to select your preferred focal point for automatic image cropping. See Images for guidance and best practices.
- Help text:
- One file only.
- 2 MB limit.
- Allowed types: png jpg jpeg,
- Images must be larger than 768x549px.
Alternative text*
- Help text: See Alternative Text for info about writing effective alternative text.
Available Style Options
- None
Where Can You Use This Section?
The section is available in the following templates and content types:
Templates
- Marketing
- Start
Content types
- Landing Page
Using on a cloneable Marketing or Start Template
- Select the vertical ellipsis to the right of the Edit button and select Remove to remove the current Header section.
View Screenshot - Select the Add Section Header button
- Locate Header 2 – Headline w/1-2 Images in the Header Section, select Add
View Screenshot - Enter the Headline
- Add the Primary Image by selecting the Browse button to upload from your computer, or select the link Open File Browser to find a previously used image
- Move white plus icon to select your preferred focal point for automatic image cropping.
View Screenshot - Enter the Alternative Text
- If you want the header to have two images select a Secondary Image repeat steps 6 - 8 for the second image.
- Select either Save as Draft or Published with the drop-down menu
- Select Save at the bottom left of the form
Adding to a new Landing Page
- Select the Add SectionHeader button
- Locate Header 2 – Headline w/1-2 Images in the Header Section, select Add
View Screenshot - Enter the Headline
- Add the Primary Image by selecting the Browse button to upload from your computer, or select the link Open File Browser to find a previously used image
- Move white plus icon to select your preferred focal point for automatic image cropping.
View Screenshot - Enter the Alternative Text
- If you want the header to have two images select a Secondary Image repeat steps 4 - 6 for the second image.
- Add at least one Body section
- Select either Save as Draft or Published with the drop-down menu
- Select Save at the bottom left of the form
Accessibility
- Alternative text is required for all images. See Alternative Text for info about writing effective alternative text.
Guidelines and Best Practices
- If two images are used be sure they look visually compatible, for instance one image could be of students and the other of campus beauty.
- This header option may be used on primary or secondary pages when you have 1 or 2 photos that appropriately set the tone for your page.
- When using two photos, keep in mind that there is a slight overlap so you should choose images where you won’t lose pertinent information in the overlapping space.
- You will need to choose a primary photo.
- The primary photo will be the only one that shows on mobile devices.
Removing a Section
To permanently remove a section from a page:
- Select the vertical ellipsis to the right of the Edit button at the top-right of your section, select Remove
View Screenshot - You must replace the Header Section with another option. Pages must have a Header
- Select Save at the bottom left of the form