GeneratePress Page Headers

WordPress > Dashboard > Page Headers

Content

The ‘Big Head’ Page Header Content is display using Template Tags

{{post_title}}
{{custom_field.page_header_slug}}
{{custom_field.page_header_body}}
 
{{custom_field.page_header_label}}
 
button url: {{custom_field.page_header_label}}

The {{post_title}} pulls the post title of the page.
The {{custom_field.term}} is drawn from the custom fields on the page.
Change the custom field value to update the header content.

The Content container is resized and positioned left using Additional CSS.

Featured Image

The Page Header uses the Featured Image of the page.
Additional CSS is used to scale the image based on the viewport height. And reposition it depending on screen size.

Merged with Header

The Page Header is set to Merged with Header.
This can be changed within the Page Header > Advanced

One Header many pages

Using these features means a single header can be customised for each new page.

GeneratePress Sections – ‘blocks’

Blocks have different styles.
Each style is assigned by a Custom Class.
They are added to the Section > Settings > Custom Classes.

The grid

The grid is comprised of 33% wide sections.
This requires the additional section-flex-33 class.
Each block style has various sizes for each break point.
Blocks will automatically fill empty space. They can vary in size if space permits.
This is noticeable if a full width section is placed after a header-block.
Also when the final row has less than 3 blocks.

fig. block % width based on break point

For a full width Section, as per this Section and the video section at the foot, don’t apply the section-flex-33 selector.

Video Section

The video player works with YouTube only. You can add your own player if you wish.
This is a full width section and contains a simple closed div.
It requires a class of youtube-player
And a data-id which is the final string in your YouTube URL.