Header 7 – Two-Column

Header 7 – Two-Column

Description

This header has a headline, a short text area, an image and an optional button. Select left or right text orientation.

View this Section in the Section Gallery

Fields and Character Limits

*required fields

Image*

  • Limits: 2MB, 758 x 549 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 768 x 549 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.

Headline*

  • Character limits: Recommended limit of 30 characters including spaces.
  • Help text: Enter the headline text. There is a recommended limit of 30 characters including spaces. This field renders as an <h1>. See Headers for guidelines and best practices for headlines and sub-headlines.

Short Text

  • Character Limits: Recommended limit of 180 characters including spaces.
  • Help text: Enter the short text. There is a recommended limit of 180 characters including spaces.

Button

  • The Button is optional.

Button 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 25 characters including spaces.
  • Help text: The link text has a recommended limit of 25 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

Where Can You Use This Section?

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

Templates

  • Basic + Content
  • List
  • News

Content types

  • Content 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 SectionHeader button
  3. Locate Header 7 – Two Column in the Header Section, select Add
    View ScreenshotLocate Header 7 – Two Column in the Header Section, select Add
  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. 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. Enter the Headline and Short Text
  8. If you would like a button Enter the URL and Link Text
  9. Go to the Style Options tab and select either the Left or Right orientation
    View ScreenshotGo to the Style Options tab and select either the Left or Right orientation
  10. Select Save at the bottom left of the form

Adding to a new Content Page

  1. Select the Add SectionHeader button
  2. Locate Header 7 – Two Column in the Header Section, select Add
    View ScreenshotLocate Header 7 – Two Column in the Header Section, 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. 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
  5. Enter the Alternative text
  6. Enter the Headline and Short Text
  7. If you would like a button Enter the URL and Link text
  8. Go to the Style Options tab and select either the Left or Right orientation
    View ScreenshotGo to the Style Options tab and select either the Left or Right orientation
  9. Add at least one Body section
  10. Select either Save as Draft or Published with the drop-down menu
  11. Select Save at the bottom left of the form

Accessibility

  • Avoid link text like Click Here, Learn More and More. See Links for more info, including accessibility concerns, examples and best practices.
  • Alternative text is required for all images. See Alternative Text for info about writing effective alternative text.

Guidelines and Best Practices

  • The headline text field has a maximum character limit of 40 characters including spaces. Be aware of that limit when writing the headline text.
  • The image is a horizontal display. Vertical photos will be cropped to the horizontal aspect ratio.
  • The button text field has a maximum character limit of 25 characters including spaces.
  • This header option can be used when you have limited photo resources and short high-priority copy or a call the action.
  • The text and button allow you to bring your most important info up into the header.

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