GeneratePress Premium 2.0 introduces the first ever Block Based Theme Builder. Through a combination of the Block Element and the GenerateBlocks plugin you can now build and style your own theme elements directly from the block editor.
Written by: Jayden Martin
Published on:
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:
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.
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.
Jayden Martin is a talented individual who excels in multiple creative domains. As a color expert, painter, and DIY hobbyist, Jayden possesses a deep understanding of color theory and its application in various artistic endeavors.
With a keen eye for aesthetics and a knack for DIY projects, Jayden constantly explores new techniques and mediums, pushing the boundaries of their artistic abilities.
