Block Guide

I am a GP Page Header


Safe SVG plugin is pre-installed to support SVG Images

Sizing the site logo using CSS:

.site-logo { width: 50px; }

Sizing the footer widget logo:

.footer-logo (width: 50px;}

Primary Navigation

A consolidated (primary and secondary menu) Slide Out toggle and Search button.

Styling is controlled within the Customiser.

Secondary Menu

A desktop below Page Header menu presenting the blog post categories below the page header.
Simplicity is the main focus of Block. No Tag search, filters or other stuff to get in the way.
Styling is controlled within the customiser apart from the 1px Top Border which is set in Additional CSS.

Page Headers

GeneratePress Page Header add-on is used throughout this sight. Simply because they are awesome.
There are 4 in total: Blog Page, Category Pages, Single Posts and Single Pages.
You can edit or add to them thought the WP Dashboard > Page Headers.

Each of them has a Colour background set to overlay.
Under the Advanced Settings they are set to merge with Header.
Within the advanced you have the option to change navigation colours for that Page Header.

The content

Blog Page and Archives

The GeneratePress Blog page has been lovingly styled. The card layout is created using CSS Grid.
It works perfectly for 2 to 4 columns.

Setting featured image sizes:

It is advisable to reduce or increase the Featured Image size in the Layout > Blog > Featured images when adjusting columns.
Fonts are set to around 0.8em of the heading and body typography settings.
Colours can be changed within the Customiser and Additional CSS.

Single Post Page

As seen on other blogging sites, single posts content is displayed within a maximum width column of 36ems. The Em size is defined within Additional CSS under typography html {font-size: 18px};
This is to provide the optimum reading experience for users.
Any element that is wrapped within a container carrying the class of extended-container will stretch to almost full width of the screen.

Like so:

<div class=”extended-container”>Extended content here</div>

Single Pages

Like this one are a standard GeneratePress template page. The current contained with is set to 1200px in the Customiser > Layout > Container. Pages support Page Builder Container settings.