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

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.

The post Page and Post Heroes appeared first on MorningCoach Daily Coaching System.