Hero Image: a large web banner image with text

Unsplash

Page Headers (hero images): what are they?

“In web design, a hero image is a large web banner image, prominently placed on a web page, generally in the front and center, a hero image often consists of image and text, and can be static or dynamic.”

On this page I’ll explain what GeneratePress page headers are. I’ll explain how to make page headers in a different tutorial.

Do not confuse Page Headers with Featured Images

  • Page headers can be full width or contained
  • Page headers have their own positioning settings
  • Page headers can display text and images
  • Page headers can have an image or color background
  • Featured images are NOT page headers
  • Featured images have their own positioning settings

Just to make it clear, on this page I’ll be telling you about Page Headers in GeneratePress.

I’ll deal with featured images in another tutorial.

What do page headers look like?

There are three basic styles…

  • Full width page headers
  • Contained page headers above the content area
  • Contained page headers inside the content area

This is a full width page header

In this instance I merged the page header with the site header and navbar

Full width Page Header merged with the site header and navbar
Full width Page Header merged with the site header and navbar

The next image is a contained page header located above the page content

A Contained Page Header positioned above the page content
A Contained Page Header positioned above the page content

The next image shows a contained page header located inside the content area

This is a contained page header located inside the content area
This is a contained page header located inside the content area

Same header, different location

I used the same page header for each of the three screenshots above. I just changed the location of the page header from above content area to inside content area. For the first image, which shows a full width page header, I also used the page header’s advanced settings tab to merge the page header with the site header.

Where are the page header settings?

  • You make new page headers via the WordPress dashboard Page Header tab
  • You can associate a page header with a page or post in two ways.
  • Go to : Dashboard > Page Headers > Global locations or…
  • As you edit a page or post look for the Layout dialogue box below the WordPress post editor. Select the Page Header tab, then choose a page header for that individual page or post from the drop down list.
  • To locate your page headers above or inside the content area of your pages and posts go to: Dashboard > Appearance > Customize > Layout > Page Header. Then choose Page Header Location, Above Content Area or Inside Content Area.

What I hope you understand before you move on to the page header tutorial…

  • I wanted you to understand that page headers and featured images are two different things and each have their owns settings.
  • I wanted you to have a good idea of the three styles of page header I showed in the images above.
  • I wanted you to understand that page header can be located above the page content or inside the page content.
  • I wanted you to understand that you can merge the page header with the site header, filling the whole browser window at the top of the page.

I’ll explain how to make and the use page headers in detail in a separate tutorial.