Page Hero Element

  1. To begin, navigate to Appearance>Elements
  2. Select “Header” from the element type dropdown

You’ll be taken to the Settings panel:

Element Classes

Add custom classes to the Page Hero element that you can use to target custom CSS.

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. In most cases, using “contained” is the better option.

Horizontal Alignment

This applies to any content (text, buttons, etc.) used in the hero.

Full Screen

This option will force your Page Hero to take up the entire viewport of your page. This is a great option to guarantee the hero image always occupies the full height available regardless if the user is on mobile or desktop.

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. We strongly recommend using at least some degree of padding.

Background Image

Add background image to your Page Hero content, you have two options:

  1. 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.
  2. Custom Image: Upload a custom image for this specific Page hero.

Both options work great and if you’re using the Full Screen setting above, custom images tend to work best.

Background Image Position

Set the position of the background image. this is an enormously useful setting and should be guided by the image used. In general, you want to select a position that corresponds with the image’s primary subject material. This will help keep as much of that primary content in the viewable screen area across all device types.

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. This will reset the default background position in that the image will have more of the top section displayed on page load in order to accommodate the scrolling animation.

Note: Requires Featured Image or Custom Image to be selected.

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

The Site Header settings provide the ability to layer the Page Hero below the header and navigation, use a custom version of your logo, and customize navigation colors.

Merge with Content

Place your Page Hero behind header and navigation elements. You can opt to apply only on desktop or set to all device types. More details below on those options.

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. You can make the background transparent by using the opacity slider.

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.

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.

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

Adjust the colors of your navigation so they match this Page Hero. You can make any background color transparent using the opacity slider.

Example:

The following is an example of using a Page Hero merged with content and setting all header and navigation items to transparent backgrounds:

You can accomplish this look by setting the following items to zero transparency:

  1. Header Background
  2. Navigation Background
  3. Optionally, you can set the background hover colors to zero transparency as well

You can set transparency to zero by using the right slider tool and dragging it to the bottom-most position:

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, events, and even drill down into categories, tags, venues, etc.. You can go in the other direction and make an element 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.

In the above example, the element has been set to only display on single event pages that have a “SPECIAL EVENT” event category assigned.

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. this is only applicable for user that have a member or ecommerce driven frontend experience.