Block Elements – Theme Builder

    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.

    ALSO READ:  CSS Styling

    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.

    ALSO READ:  A Sample Post with Comments

    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: