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.
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:
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.
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.
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.
Controls the maximum width of the Hero Section content.
Spacing Mobile & Desktop
Adjusts the vertical spacing at different screen sizes.
Inner Section Spacing
Adjusts the padding of the inner section
Controls the text alignment of content inside the Hero Section.