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.

View this Section in the Section Gallery

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

  1. Select the vertical ellipsis to the right of the Edit button and select Remove to remove the current Header section.
    View ScreenshotSelect the vertical ellipsis to the right of the Edit button and select Remove to remove the current Header section
  2. Select the Add Section Header button
  3. Locate Header 2 – Headline w/1-2 Images in the Header Section, select Add
    View ScreenshotLocate Header 2 – Headline w/1-2 Images in the Header Section, select Add
  4. Enter the Headline
  5. 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
  6. Move white plus icon to select your preferred focal point for automatic image cropping.
    View ScreenshotMove white plus icon to select your preferred focal point for automatic image cropping
  7. Enter the Alternative Text
  8. If you want the header to have two images select a Secondary Image repeat steps 6 - 8 for the second image.
  9. Select either Save as Draft or Published with the drop-down menu
  10. Select Save at the bottom left of the form

Adding to a new Landing Page

  1. Select the Add SectionHeader button
  2. Locate Header 2 – Headline w/1-2 Images in the Header Section, select Add
    View ScreenshotLocate Header 2 – Headline w/1-2 Images in the Header Section, select Add
  3. Enter the Headline
  4. 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
  5. Move white plus icon to select your preferred focal point for automatic image cropping.
    View ScreenshotMove white plus icon to select your preferred focal point for automatic image cropping
  6. Enter the Alternative Text
  7. If you want the header to have two images select a Secondary Image repeat steps 4 - 6 for the second image.
  8. Add at least one Body section
  9. Select either Save as Draft or Published with the drop-down menu
  10. 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:

  1. Select the vertical ellipsis to the right of the Edit button at the top-right of your section, select Remove
    View ScreenshotSelect the vertical ellipsis to the right of the Edit button at the top-right of your section, select Remove
  2. You must replace the Header Section with another option. Pages must have a Header
  3. Select Save at the bottom left of the form