Settings (Pro)

The Hero Section module adds a new page header banner area below the Site Header. This section is sometimes referred to as a page header or banner area. See the highlighted area in the screenshot below for a better understanding of what a Hero Section looks like:

When the Hero Section is enabled on a post or page, it repositions the page title inside of it. The pages featured image can be used as the background image.

Settings

When the Hero Section module is enabled, some new sections become available in the Customizer. All of the main settings are located in the Hero Section > Settings section:

Enable on

Allows you to choose which page types the Hero Section should be enabled on. The Hero Section can also be enabled/disabled on a per page basis using the individual page settings:

Use post/page featured image if available

This setting controls whether or not to use a pages featured image as the Hero Section background.

Move breadcrumbs inside hero section

If this setting is checked, a pages breadcrumbs will be moved inside of the Hero Section, below the page title.

Show divider line below title

If checked, a divider line will be displayed beneath the page title.

Add negative spacing to content

For visual purposes, checking this setting will move the page content slightly higher up the page, overlapping the Hero Section.

Colors

There are multiple color settings provided for Customizing the look of the Hero Section. There are no background colors in this group of settings, instead they are in the Gradient Colors setting which you can read about next.

Background Gradient

The Gradient color settings allow you to add a background gradient to the Hero Section. To use a non-gradient background, simply make both colors the same.