Header Element Overview

The Header element replaces our old Page Header module. This element has most of the same options as the old Page Headers. If you need help migrating from your old Page Header, see this article.

For a step by step guideline of creating a page hero, please see this article.

To create a new Header Element, go to Appearance > Elements and click “Add New”. From the Element dropdown list, choose “Header”.

Content

Content is required if you want to use the background image option below.

The content box accepts any HTML (headings, paragraphs etc.), shortcodes (slider, contact forms etc.) or template tags.

If you only want to use the background image without adding any content, simply add some HTML comments:

<!--This is a comment.-->

Page Hero

Element Classes

Add custom classes to the header element.

Container

The container option is what the page hero background image or color is applied to.

Full: The page hero will span the entire width of the screen.

Contained: The page hero will be the same width as the container.

Inner Container

This option refers to the inner container which holds the page hero content.

Full: The content will span the entire width of the screen.

Contained: The content will be the same width as the container.

Horizontal Alignment

Choose the horizontal alignment of the page hero content.

Full Screen

This option will force the page hero to take up the entire viewport of your page.
Note: Requires Merge to be selected in Site Header tab.

Padding

Add padding to the page hero content.

The height of the page hero is determined by the top and bottom padding.

Use the toggle to set different padding for desktop and mobile.

Background Image

Add background image to the page hero content.

Featured Image – Use the Featured Image added in the pages or posts as the background image. You can also select a fallback image to show when no featured image is added in the individual page or post.

Custom Image – Upload a custom image for this specific page hero.

Background Image Position

Set the position of the background image.
Note: Requires Featured Image or Custom Image to be selected.

Parallax

Enabling this option will apply a parallax effect (moves as you scroll) to the background image.
Note: Requires Featured Image or Custom Image to be selected.

Disable Featured Image

Disable the featured image on posts with this page hero.
Note: Requires Featured Image or Custom Image to be selected.

Background Overlay

Use the background color as a background overlay.
Note: Requires Featured Image or Custom Image to be selected.

Colors

Set the background, color and link colors for the page hero content.

Site Header

Merge with Content

Place your site header on top of the content below it. See more info here and some examples here.

Offset Site Header Height

Add to the top padding of the page hero to prevent overlapping.

Without offset:

With 100px (header height) offset:

Header Background

Apply a specific header background color to go with this page hero. This would replace the header background color set in the customizer.

Site Logo

Apply a specific logo to go with this page hero. This is especially useful if Merge with Content option is enabled. See an example here.
Note: Requires an existing logo uploaded in Site Logo.

Navigation Logo

Apply a specific navigation logo to go with this page hero. This is especially useful if Merge with Content option is enabled. See an example here.
Note: Requires an existing logo uploaded in Navigation Logo.

Navigation Location

Use a specific navigation location for this page hero. This would replace the global navigation location set in the customizer.

Navigation Colors

Apply specific navigation colors for this page hero. This would replace the navigation colors set in the customizer. See an example here.

The sticky navigation colors will still inherit the global
navigation colors settings in the customizer.

Display Rules

In order for your element to display anywhere on your website, you must set certain conditions within the Display Rules tab.

These settings allow you to display your element throughout your site. You can choose specific pages, posts, categories etc.. You can even tell the element to display across your entire site.

You can also exclude the element using the same conditions. For example, you can tell your element to display throughout your entire site, excluding the About page.

Location (required) – Choose when this element should display.

Exclude (optional) – Choose when this element should not display.

Users (optional) – Display element for specific user roles.

Internal Notes

This tab an optional tab. The content here will not show up at the front end. It is used to help you remember why this element was added.