Page and Post Heroes

Spread the News:

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.

bandedmongoose logo

Share your story with us

Would you like to write a blog post? We’re always looking for real stories to share on our blog. If you don’t want to write a post yourself, you can also share your story with us, and get involved in our press and campaigning work.

Scroll to Top