Volume uses total of 6 block elements and 1 header element to customize the post archives and single post templates. For more information on Block Elements you should read the following documentation:
All done ? Lets take a look at each of the Elements Volume is built with.
Archive Navigation
Position: After Post Loop
Element Type: Archive Navigation
Hook name: after_main_content
Display Location: Blog, All Archives
A simple 2 button block displaying static prev and next labels with icons, with a dynamic link of Next Post and Previous Post.
NOTE: Within the Block settings the option to Disable default pagination has been checked.
Author Box
Position: Above Right Sidebar
Element Type: Hook
Hook name: before_right_sidebar_bar
Display Location: Posts > All Posts
Drawing its dynamic data from the User Meta ( Profile ) it uses a GP Dynamic Image Block for the Author Avatar, a Headline Block for the Author Name, a GP Dynamic Content Block for the Author Description and a Button with static text and a dynamic link to the Author Archives.
Post Archive template
Position: Post Archive Cards
Element Type: Content Template
Hook name: n/a
Display Location: Blog, All Archives
This card replaces the default themes post template used on the Blog and Archive Cards.
First off the content is placed inside a parent Container Block, at the top of which is the GP Dynamic Image Block set to display the Featured image which has been set to a medium-large ( 768px ) image size.
Below the Image is a nested Container Block which has an Advanced > Additional CSS Class of post-summary this class is necessary for CSS to align the elements vertically.
Within the post summary there are several blocks set to display the post category terms, the post title, the post excerpt and finally a inline row to display post meta.
NOTE: This element is a Parent Element. What makes it a parent is that the following element is one of its Children.
– First Post Template
Position: Post Archive Cards
Element Type: Content Template
Hook name: n/a
Display Location: None – inherited from Parent: Post Card
This element is grid layout version of the Post Card Block Element. It has not Display Rules as it inherits them from its parent ( the Post Card Block Element ). In the sidebar settings you will see it has Apply to: First Post.
Note: in the Customizer > Layout > Blog –> Columns we have the Make First Featured checked. This gives this element a specific class of featured-column which is used in Custom CSS to make it fill the entire row on Desktop and Tablet.
Post Navigation
Position: Above Footer on Single Post
Element Type: Post Navigation
Hook name: before_footer
Display Location: Posts > All Posts
Using a prebuilt Navigation Template that displays the Next Prev Post label and title over the respective featured image.
Single Post Hero
Position: Below Header ( merged ) Single Post
Element Type: Page Hero
Hook name: after_header
Display Location: Posts > All Posts
The Single Post hero is comprised of two main elements:
The parent Container Block
This comprises of a solid background color, a Dynamic Image Background displaying the Featured Image which is set to Display the medium-large ( 768px ) image and positioned to the Right Center.
The parent container block has an Advanced > Additional CSS Class of: page-hero-block which is used for CSS to reposition the image on Tablet, and remove it altogether on Mobile.
Within the parent Container is a 1 column grid – the single column is set to 75% width on Desktop and 100% on Tablet an Mobile. Within this grid container we’re displaying dynamic Post Title (H1), the Post Excerpt, followed by a Post Meta layout.
GP Dynamic image block – mobile only
This block is set to display the Post Featured image using an image size of medium-large ( 768px ). In the Advanced > Additional CSS Classes we’re using 2 x hide-on-* classes to remove the image block on Desktop and Tablet.
Single Post Merged Header
This is a Header Element – its sole purpose is to created the Merged Header effect on the Single Post. It does not contain any Page Hero content – it simply merges the site header with the first block on the post, which is the Single Post Header Block.
You can find out more on the Header Element here: