Web Guide: Hero Header

The Martech Hero Header element is used at top of a page.

Select from two heights, short or tall, and depending on the image quality, the text selected can be dark or light. You can also add a call-to-action button.

In mobile view, the image is at top, followed by the text on a blue background.

Expert Tip: Since a page can only have one H1 header for good SEO, there are two selections for the code (H1 and H2), but both render the same visual — see below.

This is a H1 Title

When using the Short Hero Height make your image 1600 x 300 px.
HOME
home

This is a tall image and a H2 title

And a subtitle using H6. When using the Tall Hero Height make your image 1900 x 580 px.
HOME
HOME

View on Mobile:

A webpage design with a logo, a main title stating "Thisis a tall image and a H2 title," a subtitle "And a subtitle using H6," and two "Home" buttons.

LIVE SITE EXAMPLES:

  1. Tall element on MBA site — https://mba.wharton.upenn.edu/
  2. Short element on MBA internal page — https://mba.wharton.upenn.edu/student-life/

How to add martech hero header element

  1. Open page for edit >  select “martech hero header element” from wp bakery page builder element selections.
  2. Open element > make size selection [short or tall];
  3. Select your background image. Select your image where prompted from onsite media repository or your desktop.
  4. Add content in text box [this will be the content that appears over the background image]
    Tip:  This content is usually a Header 1 and/or Header 2 and “centered”
  5. Option to add a linked button is available.
  6.  Click “Save changes”
  7. Select “Full Window Page” for page Template
    Tip:  page template option located on right hand side of page
  8. Hide page title: to hide the “Page Title” 
    when in edit mode – hide page title function is located on the right hand side of the page  under “Page Options”
  9.  Save the page as a “Draft” or if ready to go live, select “Publish”.