Find out how I created the above hero header in my tutorial.
In this tutorial, I’m going to show you how to do just that. Make your content stand out for readers with a hero header, and make it sexy to a degree.
GeneratePress is incredibly versatile, I know that, and if you’re using GeneratePress, you probably know that as well.
Everyone wants their content to stand out, what better way than with a hero header. Not only is it eye-catching it’s a great way to grab a users attention.
First of all, you will need the GeneratePress premium plugin; unfortunately, you cannot create a hero header without using the premium version.
Mind you it only costs $49.95 for a license, and it can be used on unlimited sites, so it’s an investment granted, but the more you work with GeneratePress, the more you will come to realise it could work for a varied range of projects.
Either for you or for your clients’ sites.
In absolute truth, GeneratePress is by far the best WordPress theme I have ever worked with. I’ve spent a killing on multi-purpose themes. I made the investment, and I’ve never looked back, it’s just an absolute joy to work use.
Let the tutorial commence
In this tutorial, I will take you through the process of creating your very own hero header, without the need of any complex coding or multitude of plugins!
In your WordPress back end navigate to Appearance then Elements.
Here you can add a new element. In this case, we need to select the Header. This is what we will be building!
Choose header as a new element
As you can see from the image below, this will bring up a new section for us to fill in. Don’t worry, it might look a little complicated, it really isn’t it.
Naming your hero header and adding content
Now that we have the hero header ready let’s add some content to it. Here you can add HTML to the hero to make it stand out. See below snippet for what I’ve added.
<h1 style="font-size:50px;">How to make a hero header in GeneratePress</h1> <p style="font-size:24px;">How the heck did I make this header for my tutorial?</p> <p><a href="#how">Find out below</a></p>
Here you can tinker around with some text adjust the font size and more. It’s worth noting that GeneratePress has a smooth scroll feature.
So if you add a class to your button of smooth-scroll, when a visitor clicks on the button in your header it will scroll (smoothly) to the anchor heading of your choosing.
In this case, I’ve made my heading ‘Find out how I did the above in my tutorial.’ an H2 and using Gutenberg I’ve added an HTML Anchor of how.
By doing this and using the “href=”#how” this will make the button in the header scroll smoothly and nicely to the beginning of this tutorial.
It’s nice and easy to do, and despite my past loathing of Gutenberg, I’ve come to quite like it. Who knew?
Of course, you can do this in the classic editor as well.
All you need to do is add an ID to your H2 heading using the text editor, not the visual editor.
See below for an example:
<h2 id="how">Find out how I did the above in my tutorial.</h2>
Of course the above can be whatever you wanted. So have a play around with your text and make it yours.
GeneratePress settings for the hero header
Quite a few settings are on offer here; this is just the first tab called “Page Hero”. The Page Hero section is where the meat of your hero header will reside, think text, images and of course colors.
Overview of settings
Let’s go through the settings, so you’re better equipped to build your very own awesome hero header. I’ll be as plain speaking as possible as not everyone is a coder. Myself included!
If you want to add custom CSS and go to town, you can give your element a unique class and write some CSS if you’re going to.
Very useful if you’re proficient with CSS and really want to add your stamp on things.
Here you can change the container width of the hero header, choose from full width or contained.
If you decide to pick contained, it will only go to the limits of your site layout you’ve set in the WordPress Customizer.
Here you can choose to have your content, full width, or contained. The same rules apply as the container.
So you could have a container with a full-width layout, then your content “inner container” as contained, which is what my example at the top of this tutorial uses!
If you want your content in a different place, you can do so here.
You can choose from left, right and lastly center. I have chosen center in my here header.
If you want your hero header to be full screen you can change that here.
Perfect for adding an email subscribe box or call to action etc. I’ve decided not to do that on my hero header.
This is cool. Here you can set your padding (space between) the top, right, bottom and left. It’s in pixels or PX. I’ve chosen to go for 200 top, right 50, 200px for the bottom and left 50px.
You can also set the padding for mobile by clicking on the mobile icon.
Here I’ve gone for top 150, right 10, bottom 50 and lastly left 10. It means my hero header will display nicely on mobile devices.
You have a few different options here. You can choose to use a custom image and upload it.
Not use a background image full stop or if you’d prefer to use the featured image attached to the post.
More options here which are excellent. Here you can choose how you want the background image to display.
From left top, left center, and a whole lot more. I’ve kept mine at left top.
If you want your image to move as a user scrolls down the page, you can check this box.
If you’d prefer it to stay in situ like mine leave it unchecked.
Disable featured image
If you want to disable the featured image on the post, you’re creating the hero header for you can do so here.
By doing this, you will override the featured image on your post and use your custom one.
Here you can use the background color as an overlay color. I’ve checked this box, and in keeping with my site, I’ve gone for a purple color.
As mentioned above, I’ve chosen a purple color. I’ve added some transparency, using the color picker of rgba(86,14,163,0.61). That way you can see my hero header image through the purple.
Text color, link color and link color hover
All very self-explanatory here. I’ve chosen white for my text color. I’ve purposefully left the link color and hover color alone as I don’t need them for my hero header.
You can use them for your header though so have a play around with them to get your look and feel just right.
My hero header settings
You don’t have to follow my tutorial verbatim; I’m just giving you an idea of how to do it. My settings are as above and should give you some idea of how to put it all together in GeneratePress.
Site header settings
If you’ll note from my hero header, my menu has no background as such. It has no block of color behind it. That’s due to the section above. Let’s go through it, so you understand how it all works.
Merge with content
I wanted to have my header merge with the content. There are three different settings here. It’s easier if I show you how it looks as opposed to explaining it all. See below for my header.
So as you can see from the above images, you can see the differences with your own eyes. There is one other setting here called merge on desktop only, which is self-explanatory.
Offset site header height
Here you can add some padding to prevent your header overlapping, useful if you have a raft of menu links, that take up a lot of space. You can adjust the padding for desktop and mobile here.
This is such a great feature. If you’d like to add a different logo to your post/page you can simply upload it here. Very useful indeed.
Man, I love GeneratePress, it’s my go-to WordPress theme, it’s just bloody awesome.
Here you can change the navigation location. Choose from the default (which uses the settings from the WordPress customizer) or select from the following:
Below header, above header, float right, float left, left sidebar, right sidebar and lastly no navigation at all.
Now, this is important. Due to the fact I want my menu to have no color behind it. I want it to look seamless and not stand out with a solid background color.
By checking the box for this and leaving all the other settings (which are listed below) it prevents the menu from having ANY kind of colored background. Awesome.
If you’d like to override the nav background you can just that. Through a color picker, you can make it unique, very useful if you have a selection of articles within a specific niche.
If you’d like to change the color of your text again use the color picker to make a selection that compliments your nav background color.
Navigation background hover
When users head towards to your menu and select something, you can make it stand out by selecting a color of your choosing.
Navigation text hover
This applies to the actual text within your menu, so make sure it fits in with your color scheme.
Navigation background current
This setting allows you to change the color of the current post/page being visited in your menu. If of course it’s listed in your menu!
Navigation text current
Similar to the nav background setting, however, this affects the text itself. Again this will only work if the post/page is listed in your nav menu.
Display rules for your hero header
You want your hero header to display right? Pointless creating it if no-one can see it. Don’t worry we can make this visible on our post, or pretty much anywhere!
Display rules are a breeze to use. They have a few bonuses as well. For this hero header tutorial, I’ve chosen the post option from the dropdown menu and typed in the title of my article.
So that means, this hero header will only ever be shown on this post. No where else. Told you it was easy!
Location for header
GeneratePress has a number of different locations for you to show your hero header on. You can choose from site wide, specific posts, pages, categories and much more.
Giving you a real granular control over where you show your hero header. It’s a great feature and another reason I use GP all the time.
If you enable your hero header site wide, but want to exclude it from specific pages, posts, categories etc, you can narrow that down here.
Another fantastic feature. Great if you’re using something like WooCommerce. You could create a page header to display only to customers who are logged in, and only customers that are logged in.
Imagine being able to have a hero header offering a discount code to logged in customers, make it full screen on a specific product to get their attention!
Much better than an annoying popup don’t you agree?
Adding rules for your header
Each section in the display rules lets you ad a location rule. So for example if you wanted to show your hero header on more than one page but not the rest, just add a rule.
The same methodology can be applied to the exclude settings and of course users.
The last section deals with internal notes, which is handy if you have a load of headers you’d like to keep track of or make notes for your sanity!
Getting fancy with hero headers
I really could go to town here. I mean really. You could add special offers to your hero headers, only show them to specific users, only those who are logged in, or not logged in. Individual pages, give your post categories some oomph and more.
Tutorial over, hope you enjoyed it!
By using my tutorial hopefully you will have a better idea of not only how to create a hero header in GeneratePress, but many other ways and thoughts on how to get peoples attention.
Don’t forget; I’ve written a few other tutorials for GeneratePress you might be interested in if you’d like to take a look at the rest of them below.