Header 5 - Headline w/Image/Video

Header 5 - Headline w/Image/Video

Description

This header has a short headline that can be on top or bottom of a large photo or video.

View this Section in the Section Gallery

Fields and Character Limits

*required fields

Headline*

  • Character limits: None.
  • Help text: Enter the headline text. It should be a maximum of 50-60 characters. This field renders as an <h1>. See Headers for guidelines and best practices for headlines and sub-headlines.

Image

  • Limits: 2MB, 1140 x 641 pixels, png jpg jpeg.
  • 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 1140 x 641 pixels.
    • If both an image and a video embed code exist in this section the image will take precedence.

Alternative text*

  • Help text: See Alternative Text for info about writing effective alternative text.

Video Embed Code

  • Limits: The video must be high quality.
  • Help text: Enter a video embed code. If there is both an image and a video embed code entered, only the image will appear. Remove the image to display the video.. Be sure your video includes captions for accessibility. See Videos for more info about embed codes and captions.

Available Style Options

Headline Orientation*

  • Top
  •  Bottom

Where Can You Use This Section?

The section is available in the following templates and content types:

Templates

  • About
  • List
  • Marketing

Content types

  • Landing Page

Using on a cloneable 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 5 – Headline w/Image/Video in the Header Section, select Add
    View ScreenshotLocate Header 5 – Headline w/Image/Video in the Header Section, select Add
  4. Enter the Headline
  5. Select Remove to remove the placeholder image
  6. To add an image select the Browse button to upload from your computer, or select the Open File Browser linkto find a previously used image or add a Video Embed Code
  7. 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
  8. Enter Alternative Text if you’ve uploaded an image.
  9. Go to the Style Options tab and select either the Sans Serif or Serif font option
    View ScreenshotGo to the Style Options tab and select either the Sans Serif or Serif font option
  10. Add at least one Body section
  11. Select either Save as Draft or Published with the drop-down menu
  12. Select Save at the bottom left of the form

NOTE: if both an Image and a Video Embed Code are in place the Image will appear. To use a Video make sure there is no Image

Adding to a new Landing Page

  1. Select the Add SectionHeader button
  2. Locate Header 5 – Headline w/Image/Video in the Header Section, select Add
    View ScreenshotLocate Header 5 – Headline w/Image/Video in the Header Section, select Add
  3. Enter the Headline
  4. Add an image select the Browse button to upload from your computer, or select the Open File Browser linkto find a previously used image or add a Video Embed Code
  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 Alternative Text if you’ve uploaded an image
  7. Go to the Style Options tab and select either the Top or Bottom headline orientation
    View ScreenshotGo to the Style Options tab and select either the Sans Serif or Serif font option
  8. Select either Save as Draft or Published with the drop-down menu
  9. Select Save at the bottom left of the form

NOTE: if both an Image and a Video Embed Code are in place the Image will appear. To use a Video make sure there is no Image

Accessibility

  • Alternative text is required for all images. See Alternative Text for info about writing effective alternative text.
  • Be sure your video includes captions for accessibility. See Videos for more info about embed codes and captions.

Guidelines and Best Practices

  • This header is a great option when you have one large image to display and do not necessarily have any headline copy for the top of the page.
  • A short page title works well directly below or above the image.
  • Video may also be used in place of the image.
  • The photo or video needs to be high enough resolution to look good.
  • If there is an image and a video embed code then the image displays.
  • The video only shows if there is no image.

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