So you just opened up a website in your browser — what do you see first?
Well, traditionally, you should see a logo, a navigation bar of some sort, and an “intro” section — otherwise known as a hero section.
With a lot of our traffic landing on the website homepage, the hero section is the last thing you want to neglect.
You need to pull the visitor in immediately, and add interest.
So how do you do that successfully?
Let’s breakdown the anatomy of the perfect page hero design for your website homepage.
#1. A Great Headline
First and foremost, every great hero section needs a compelling headline.
This headline should achieve 2 things for you:
- Tell the visitor what you do
- Make the visitor interested
It’s the very first thing someone is going to read when they land on your website, so you cannot waste the opportunity.
If you are too generic, nobody will care.
If you are too wordy, people will scroll on quickly.
So aim to create a catchy headline that’s no more than 8-10 words maximum, and keep the two objectives in mind above.
#2. A Call to Action
You’ve achieved one goal already — they have landed on your website.
But the next action you want is to try to convert that visitor.
Within your hero section is your first opportunity to achieve that, but you must include a call to action.
A call to action can be a few things, depending on the goals of your conversion. Here are some examples:
- A button to Book a Call, Get a Quote, or Buy a Product
- A sign up form to subscribe to your newsletter
- A form to download a lead magnet or freebie
Throughout your website, you should have 1-2 primary goals established to encourage the user journey as they navigate. This hero section CTA should aide in that goal.
Keep in mind — you can include 2 call to actions on your hero section. Much like I do on my agency site:
The double call to action here needs to be highlighted with specific hierarchy — in my example, the left button is more prominent, and the right is secondary. I’m pointing visitors to learn more about what I do first, but ultimately I want them to reach out — which is the cause for the Get Started.
Don’t include 2 call to actions without making one more visible — otherwise you will confuse the visitor and they won’t take any action.
#3. A graphic or element of interest
The final piece to the puzzle to curating a successful page hero design is including a graphic or element of some sort.
This can be in the form of a background image, an illustration, or other image.
Now, this graphic should be selected carefully to also ensure that it is supporting your main headline and call to action.
For example, if you are including a form to download a lead magnet, then the graphic could be a cover image to the download.
Or if you provide pet supplies, then you’ll want a graphic of a happy dog using your product.
No matter what it is, make sure that it stands out, but balances with the headline and call to action.
The graphic is a supporting element, not always the main focus.
How does your page hero look?
Visit your own website now and take a look at your page hero — check to see if it covers the 3 pieces: a great headline, a call to action, and a graphic element.
If not, create some new ideas and test them — you can always swap out your hero every month, quarter, etc. and see what’s more successful.
Thanks for reading! Have a great one,
