The Page & Post Heros are built using GP’s Header Element.
Learn more about the Header Element
Common Page Hero Settings
Element Classes: overlay
This applies a Custom CSS Inner Box Shadow overlay to improve contrast on the site header / navigation.
Container: Full Width
Inner Container: Contained
Padding: Top: 18% and Bottom: 20px.
This will keep images responsive whilst maintaining bottom spacing
Background Image: Featured Image
Background Overlay: Yes – black tint.
HTML Markup
Hero content contains some HTML markup. This is required for the custom styling.
All of them use a <div class=”inside-header”></div> wrap.
This adds the same padding and alignment that the Site header uses. It is used to maintain alignment.
Page Header
Template Tags: {{post_title}}
Dynamic display of Page Title
Display Rules: All pages
Blog and Front Page Header
Template Tags: None
Uses static H1 text.
Display Rules: Blog & Front Page
Single Post Header
Template Tags: {{post_terms.category}} , {{post_title}} , {{post_date}} and {{post_author}}
Display Rules: Single Post
Site Header: Merged with transparent header & navigation.
Offset Site Header Height: 140px
Site Header height offset is used to maintain hero heights and to stop content from falling behind the header. The current header height will change depending on the header contents size.
