Page and Post Heroes

Page Heroes are those big bold images and headlines you find at the top of your posts and pages. They sit just below the Site Header and added using the Header Element module, when activated provides the Elements menu in Dashboard > Appearance > Elements

Dispatch has two Header Elements in place. But you can add as many as you need.

Magazine Grid – Home Page

Combined with the WP Show Posts plugin this header creates a 5 post card grid. Very few settings are required. These are the main points:

Hero Content: WP Show Posts Short code
Element Classes: wpsp-grid wpsp-card
This creates the grid and styles the cards
Padding: Zero padding
Makes the grid fill the hero
Display Rules: Front Page

The shortcode required is found in the WP Show Posts list you created. More detail on creating these special lists can be found here.

Single Post

Method: Block Element – Page Hero
Background Image: Dynamic Featured Background Image on Container Block
Content: Headline Blocks displaying dynamic Post Title, Post Author, Post Data and Category Terms
Display Rules: All Posts

Creating new Block Elements

Creating a new Block Element is as easy as creating a new post. This article explains how to:

Block Element Overview

Display Rules

Display Rules are used to determine where a Block Element is displayed. Here are some pointers:

Front Page

When you select a blog or a static page in Dashboard > Settings > Reading as your Front Page. You must specifically apply that as a Display Rule for it to display.

Display the Dispatch Header Elements on other pages

Simply edit the Header Element and add additional Display Rules.

Copy an existing Block Element

So you think these Block Elements are awesome. But you want to add your own versions to some other posts, and there is not duplicate feature. Well just add one of the Duplicate Post plugins found on wordpress.org and your in business.

Related Posts

A guide to styling and making Dispatch your own

Dispatch is a Magazine style blog for your new website. Each of its features have been designed and built using GeneratePress and WP Show Posts. As expected…

Hooks – Custom Theme Elements

Dispatch uses a few Hook Elements and Block Elements to create some Custom Elements in the site.All of them provide dynamic output and should not require any…

How to change the Custom Colors

Changing Colors in Dispatch are mainly done via the Theme Customizer. Certain elements such as Page Heros are controlled within the Header Element and are covered in…

Style Guide

Heading One H1 Heading Two H2 Heading Three H3 Heading Four H4 Heading Five H5 Heading Six H6 Font: Playfair Playfair is a transitional design. In the…