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.

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

When you create a new Header element, you have a couple choices.

Page Hero

Element Classes – Add custom classes to the Page Hero element.

Container – Choose whether your Page Hero outer container will be contained or full width.

Inner Container – Choose whether your Page Hero inner container will be contained or full width.

Horizontal Alignment – Choose the horizontal alignment of your Page Hero content.

Full Screen – This option will force your 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 your Page Hero content. The padding value is taken from your content. Use the toggle to set different padding for desktop and mobile.

Background Image – Add background image to your 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 your 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, text color and link colors for your Page Hero content.

Site Header

Merge with Content – Place your site header on top of the content below it. See more info here.

Offset Site Header Height – Add to the top padding of your Page Hero to prevent overlapping.

Header Background – Select the background color of your header with this Page Hero.

Site Logo – Upload a different logo for this specific Page Hero. This is especially useful if Merge with Content option is enabled.
Note: Requires an existing logo uploaded in Site Logo.

Navigation Logo – Upload a different navigation logo for this specific Page Hero. This is especially useful if Merge with Content option is enabled.
Note: Requires an existing logo uploaded in Navigation Logo.

Navigation Location – Use a different navigation location than the global setting for this specific Page Hero.

Navigation Colors – Adjust the colors of your navigation so they match this Page Hero.

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.