Build a Hero Header Template for Content Pages or Posts

In this tutorial I will give you a step-by-step guide on how to build a Hero Header template that can be used in multiple Pages and Posts articles in your WordPress site.

For this Hero Header we will be using GeneratePress Elements and GenerateBlocks for which I gave view a brief overview in the previous tutorial. 

The ‘Hero Header’ area is technical jargon to refer to the area at the top of a website article containing all the usual information, such as Title, Author and Date.

Here’s a video demo from the brand’s official channel: GeneratePress – Block Element Page Hero Demo.

In the following section I will show you exactly how I built my Hero Header for WPWebsiteWiki. Feel free to copy my Header layout, however if you want to do something different don’t hesitate to experiment on your own website.

The Hero Header template we will create can be used on Posts or Pages, depending on the Display rules you set in the element.

Here is a snapshot of how my Hero Header looks in a Post I have published on the site:

As you can see, this Hero Header Template contains 5 items, which are:

1. The Navigation breadcrumbs:  this is a navigation scheme that shows the user where they are in a website. In the snapshot above, the breadcrumb is Home > WordPress Tips.
2. The Author: this is a line which shows the author’s name. In the above it says: By Jon.
3. The Publish/update Date: This line shows when the article was published or last updated.
4. The Featured Image: this is the main image of the blog Post or Page
5. The Title: This is the H1 title of the article.

I will show you how to set each of these items, but first we need to create the empty Element.

Creating an Element in GeneratePress

To start creating your Hero Header Element, you will need to start with a blank Element. Go to the Elements menu in your WordPress dashboard.

Go to Appearance > Elements > Add New Element 

The element type we need to choose is a Block. Press CREATE.

In the Element page go to the right-hand sidebar (if this is not showing, click on the Settings COG wheel in top-right corner).

Under Element Type drop down menu, choose PAGE HERO.

GeneratePress offers you some ready-made templates for Hero Headers, however I will create mine from scratch.

Let’s start by putting in the name of the Element. I’ll call it ‘Hero Header Template’.

Keep in mind that this title will not show on your website. It is just the name of your element so you can easily identify it from the list of all the Elements you will have.

Now let’s start creating the 5 items which make up our Hero Header Template.

Creating Breadcrumbs for Hero Header Template

As we saw from the finished Header image above, the first Block in our Hero Header template will be the breadcrumbs.

Click on the + sign on the right of the page, (just below the title) to choose your first block.

I always recommend starting with a Container Block. All the other blocks for our Hero Header will be included within this container block. This way they are grouped together, and you have complete control over the width of the Element you are creating.

Choose the CONTAINER icon from the drop-down option that comes up when you pressed on the + sign.

In the right-hand settings menu, under Layout, your Container settings should always be full width.

The Inner Container setting should be set to contained width. The container Width will depend on the width you set for the rest of your site. For my Hero Header I will set the Container width to 800.

Now press the + button that is inside the container and once again you have the list of blocks available to choose from. This time we will need to click on BROWSE ALL to get a more detailed list of available blocks.

The blocks will appear on the left-hand column.

The top section of this column shows the 4 GenerateBlocks blocks. The icons of these blocks are colored blue to distinguish them from the WordPress default blocks.

Most of the time you will be using the GenerateBlocks blocks to create your elements because they give you more flexibility and options to tailor the features to your needs.

Now click on the HEADLINE Block.

The headline will automatically be an H2 by default. We need to change this to a Div, since the breadcrumbs will be generated by a shortcode.

Go on the options bar that pops up over the Headline and choose Div instead of H2.

It should show a D now instead of the H2 there was previously.

In this Headline element we will include our breadcrumbs that will automatically change based on the page the user is in. For this we need to get a short code from RankMath plugin.

So, open your WP dashboard in a new tab (right-click on WP logo in top-left and choose ‘open link in new tab’).

Go to Rank Math > General Settings

Now choose the Breadcrumbs tab and copy the short code at the top of this page. The shortcode should be [rank_math_breadcrumb].

Now go back to the Element page where we were creating our Hero Header and paste the shortcode in the Headline space.

Make sure the Headline is still marked as D in the options bar (i.e. Div and not Heading or something else), otherwise the shortcode will not work.

At this stage, you can go to the Block settings and start styling the breadcrumbs to your preference, including Typography, Colors, Spacing, etc., however I suggest you do this later.

Let’s continue creating the other parts of our Header template before we start styling, because when it all comes together you will have a better idea of the styling you want to implement for your Hero Header Template.

Creating Author Name and Publish Date for Hero Header Template

To create the next block, click on the breadcrumb block we just created and from the pop-up bar click on the three vertical dots at the far right. Choose INSERT AFTER from the drop down to include the next block.

We do it this way instead of just pressing the + sign below the first block, because we want the next block to be created within the same Container block for all the elements of our Hero Header Template.

In this section we will be including the Author Name and Publishing Date within the same line. To do this we will need to use a grid so that we can put the two blocks side by side.

So, press on the + sign on the right, click on BROWSE ALL, and choose GRID.

Now from the box that pops up you will need to choose which layout you want. In this case we will go with the 2-box grid.

In the left side of the grid we will include the Author name and on the right side we will include the Publish date.

Since the author’s name can be different for each article based on who is writing the article, we will need to select a dynamic option here for our Author name.

Click on the left-hand box of the grid and click the + sign to add a block in the grid.

Just as we did before, choose a HEADLINE block and change it to Div instead of H2 so that a D comes up in the block pop-up bar.

In the pop-up bar we will also choose the Dynamic button option and select ‘Post Author name’ from the drop-down list.

Once you click on this, some further options are available. We will insert the following:

• In the ‘Before text’; insert the word ‘By’ followed by a space.
• In the Dynamic link type: choose Author archives.

Remember to click on the SAVE DRAFT (top-right of page) every now and again to save the work you’ve done till now on your Hero Header Template.

Note that for the Author Archives to display the right information you must set the Author Bio in your WordPress User account settings.

To do this, go to your WP dashboard in a new tab (right-click on WP logo in top-left) and in the left-hand options menu click on Users > Profile.

In the Users settings page insert your name, nickname, and display name. The display name is what will show in the Hero Header Dynamic Author Block we just created.

Also, further down include your Biographical Info and Profile Picture (you will need these for the author box we will be creating in the next tutorial).

Let’s get back to our Hero Header Template.

We’re still on the grid section. Now let’s complete the right-hand part of the grid where we will insert the Publish date.

This will also need to be dynamic as it picks up the date when we publish a Post or Page, and also picks up the updated date when we update a Post or Page.

Click on the right box in the grid, click +, choose HEADLINE, and once again change it to Div. Now click on the dynamic button option in the pop-up bar and from the drop-down choose POST DATE.

From the Dynamic Post Date we will use these options:

• In the ‘Date type’: choose ‘Published Date’
• Turn ON the ‘Replace with updated date’ option
• In the ‘Published Date Before text’: insert the words Published on: (followed by a space)
• In the ‘Updated Date Before text’: insert the words Last update on: (followed by a space).
• Dynamic Link type: Leave empty

SAVE Draft

You can also add icons in front of the Author Name and Publish Date.

To do this click on each respective left and right box within the grid and on the right-hand sidebar you have the ‘icon’ option.

Click on this and on GENERAL under it. Choose a suitable icon and you can also set the color for this icon to make it stand out.

I kept the brand colors for my icons;

Creating Featured Image for Hero Header Template

The next part of our Hero Header Template is the featured image.

Once again, we need to insert a new block within the container, so click on the three vertical dots on the pop-up bar of the grid block we just created, and choose INSERT AFTER.

Now click on the + sign in the new block and select DYNAMIC IMAGE. (Be careful; don’t click on the ‘image’ icon, but the ‘Dynamic image’ icon. You will probably have to browse for this from the full list of Block icons).

The image is dynamic because it will be automatically inserting the featured image we upload with each post.

From the Dynamic image Type options, select FEATURED IMAGE.

Since our featured image for any Post we publish will now be shown though this element we will need to adjust the image display settings for Posts. Otherwise, the image will show in duplicate on your Posts.

To do this, head to your WP dashboard (in a separate tab);

Click on Appearance > Customize > Layout > Blog

Click on the SINGLE tab and on the POSTS tab further down and make sure that the ‘Display featured images’ box is unticked.

Creating the Title for our Hero Header Template

The final item within our Hero Header Template is the actual title of the Post or Page.

To create this let’s go ahead and click on the three vertical dots on the pop-up bar of the image block we just created and choose INSERT AFTER.

Click the + sign on the right of the empty block and choose Headline.

In this block we will include our Post Title, but since the post title changes for each Post we will need to select a dynamic option here for our Headline.

So, from Headline block pop-up bar click on the Dynamic button and from the Dynamic Text Type options list, select TITLE.

The other dynamic options below this you don’t need to change. Therefore for the ‘Before text’ option and Dynamic link type’ option, you can leave these empty.

Make sure also that this block is set to H1 since it will be our main Post title.

That’s it. All the features of our Hero Header Template have been created. Now we have to set the Display Rules so that this Hero Header template features automatically in all Posts we publish.

Setting Display Rules for the Hero Header Template

Scroll down to the bottom of the Hero Header Template Element page where you will find the Display Rules tab.

There are 3 sections for the Display Rules settings:

1. Location: here you choose the general area within your website where the Element will display, such as Entire site, Front Page, Blog, Posts, Pages etc.
2. Exclude: here you choose specific areas where the element will not display. As an example, if you choose Entire Site in the ‘Location’ settings, but you choose Front Page in the ‘Exclude’ section, then the Element will show across all the site but not on the Front Page.
3. Users: This is rarely used, but it allows you to set display Elements for specific WordPress users only.

For our Hero Header template we want this to show up on all Posts we publish. Therefore, we will only need to select from the ‘Location’ option and choose POST.

That’s it. Now hit the PUBLISH button in the top-right corner of the screen.

Let’s see how it looks. Go to one of your published Posts in your website and see how it looks on desktop and mobile.

To adjust the design, spacing, colors etc. now, keep this Post open in a separate tab and go back to your Hero Header Element. Play around with the Block settings here for each item we created in the template.

After each change, go back to the live Post and refresh the page on your browser. This will show you how the updates or changes you made will look.

As an example, below you can see how my original Hero Header Template looked when I first created it, and then how it looked after I played around with the spacing and typography.

Note that in the example below, I had originally decided to put the Article Title above the picture. Since then, I changed the style.

Before

After

That’s all for this tutorial. Go ahead and play around with your Blocks and Elements and familiarize yourself with the features.

In the next tutorial I will show you how to build the Author Box template Element to include under every article you or your authors publish on the website.

As usual you can also refer to my full list of WordPress Tutorials for other tips and guides.