Header 1 – Hero Image w/Text Box

Header 1 – Hero Image w/Text Box

Description

This header has a full-width hero image and a text box with an optional link. Choose left or right text orientation. Choose from three background colors for the text box.

View this Section in the Section Gallery

Fields and Character Limits

*required fields

Image*

  • Limits: 5MB, 2560 x 1097 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
    • 5 MB limit
    • Allowed types: png jpg jpeg
    • Images must be larger than 2560x1097 pixels

Alternative text*

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

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.

Link URL

  • Help text: Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as http://example.com. Enter <front> to link to the front page. Enter <nolink> to display link text only.

Link Text

  • Character limits: Recommended limit of 30 characters including spaces.
  • Help text: Enter the link text. There is a recommended limit of 30 characters including spaces. Avoid link text like Click Here, Learn More and More. See Links for more info, including accessibility concerns, examples and best practices.

Available Style Options

  • Text Orientation*
    • Left
    • Right
  • Box Color*
    • Blue
    • Steam
    • White

Where Can You Use This Section?

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

Templates

  • Start

Content types

  • Landing Page

Using on a cloneable Start Template

  1. Locate Header 1 – Hero Image w/Text Box in the Header Section
  2. Select Edit
  3. Remove the placeholder Image
    View ScreenshotRemove the placeholder Image
  4. Add an image select the Browse button to upload from your computer, or select the link Open File Browser to find a previously uploaded image
  5. Set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
    View ScreenshotSet the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
  6. Enter the Alternative Text
  7. Replace the placeholder text with the Headline
  8. If you would like a link replacethe Link URL and Link Text
  9. Go to the Style Options tab and chose the text orientation and box color
    View ScreenshotGo to the Style Options tab and chose the text orientation and box color
  10. Select Save at the bottom left of the form

Adding to a new Landing Page

  1. Select Add Section Header
  2. Locate Header 1 – Hero Image w/Text Box in the Header, select Add
    View ScreenshotLocate Header 1 – Hero Image w/Text Box in the Header, select Add
  3. Add an image select the Browse button to upload from your computer, or select the link Open File Browser to find a previously uploaded image
  4. Set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
    View ScreenshotSet the focal point by moving white plus icon to select your preferred focal point
  5. Enter the Alternative Text
  6. If you would like a link enter the Link URL and Link Text
  7. Go to the Style Options tab and chose the text orientation and box color
    View ScreenshotGo to the Style Optionstab and chose the text orientation and box color
  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.
  • Avoid link text like Click Here, Learn More and More. See Links for more info, including accessibility concerns, examples and best practices.

Guidelines and Best Practices

  • Use this header option when you have a high-quality photo that sets the tone for your site.
  • If using a text box over the image, keep your text very short and direct.
  • When choosing a photo you will have the option for your overlapping text box to appear on the left or right side or a notched text box on either side.
  •  Look for photos where the focal point is balanced with the text area, ensuring that you will not lose any critical visual information by the overlapping or notched text box.

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