What is a homepage hero section?
A homepage hero section is the first thing visitors see when they visit your website. So yes, it’s super important and yes, you need one.
A homepage hero section is all the information on your homepage above the fold, so this means before any scrolling happens at all. Think of it as the front cover of a book. A hero section’s job is to grab your visitor’s attention. You can do this with bold text, images and video to intrigue them and leave them wanting to learn more about your business. Use your homepage hero section to give clear information to your website visitors and grab their attention quickly to help them understand what the purpose of your website is and what they should do next.
As long as your homepage is where your website visitors first land on your website a hero section will be the first information they lay their eyes on. Chances are that if your website visitors don’t land on your homepage first, they are more than likely to view it at some point during their visit.
As you’ll probably be aware in this internet and social media age, people’s time is short as are their attention spans, so the idea here is to really engage visitors from the get go and convince them that their in the right place for what they’re looking for and that they should find out more, therefore spending more time on your site.
In this guide I want to let you know about all the possible components of a homepage hero section and emphasise why it’s so important you use them, including…
- An attention grabbing heading
- Eye-catching imagery
- Video
- Targeted copy
An attention-grabbing heading
Your hero section’s attention-grabbing heading should literally say exactly what you do. It should be short, concise and to the point. There is no time or space for messing around here. Too long and you’ll lose your visitor’s interest, too short and you won’t be able to say everything you need to say. Your catchy headline should entice your visitors to read more and take action.
When writing your hero section heading, think about your elevator pitch. How would you tell people you meet at a networking event what you do in a professional and not-too-long-winded way? Take out any unnecessary words and keep in the key information and you have a great homepage hero section header.
Have a look at the below examples from dribble for hero section header ideas:
Eye-catching imagery
It’s so important to include some kind of imagery in your hero section as this can be a powerful communication tool and help let visitors know what you and your business are all about quickly. Images will attract visitor’s attention and set the scene for the look and feel of your whole site. They’ll also insert a clue here to the message that your brand values want to convey, so this may be an image that sums up your beliefs that you share with your ideal customers, it may be an image of you at work to set the scene, or perhaps the feeling you want to put across to your website visitors. Whatever it is, make sure this image is high quality and really helps communicate what your business does and what it represents.
Video
Video is king these days in oh so many ways. According to this article by Invideo Website visitors spend 88% more time browsing on websites that have video content. That’s seriously powerful.
If your aim is to get visitors to your website and then for them to stay (which it should be) then it’s time you started using video and an engaging video in your homepage hero section is a really great place to start. A video can perfectly capture your brand values, what you do and what you believe in in just a few seconds.
While the video content could be of you at work, talking about your business or showcasing your product, it could also be artistic or illustrated depending on your business, your brand and what you do.
The Studio Lago hompage hero section uses a GIF to showcase my portfolio.
Targeted copy
The copy you feature in the hero section of your homepage can really make or break the whole thing. The aim here is to give your visitors more of an insight into what you do and who you serve without boring them to tears at the same time.
Your visitors will be put off immediately if they see a whole big chunk of text. They’re far too busy and important to read that. The kind of copy you do need here is targeted copy featuring keywords that speaks directly to your ideal clients.
All the copy on your website should be written to speak directly to your dream clients. If it’s not, it’s not going to make them want to stay and push them towards that end goal for your site. If you’re stuck with your website copy it’s absolutely worth investing in a copywriter to get an external pair of eyes on your business and get what you want to say put into words to really help your website start converting.
It’s a really common mistake to either use far too much copy that takes your visitors around the houses, or not enough copy which can leave visitors confused about what you do because you simply don’t know what to say.
The most important thing to consider about the copy you use in your hero section is to make it skimmable and easy to read. White space is important and space out paragraphs if you do use more than one. Your hero section copy should aim to keep your visitor’s attention and lead them onto the next step which is…
A clear call to action
Your homepage hero section should tell your visitors what you want them to do next. If you think about your journey through a website, it can actually be really frustrating if you’re left hanging or you get lost with no clear instruction of where to go next. Leading your visitors to a website navigation dead end is a big no no, and your homepage hero section should immediately lead your visitor somewhere before they get distracted and leave your site.
If you want your visitors to contact you, tell them. If the main goal for visitors to come to your site is to sign up for something, lead them there. Perhaps you have a product based business and you are running a sale. Don’t wait for your visitors to go to your shop page and find that out for themselves. Tell them immediately.
It’s important to remember that your homepage hero section doesn’t have to be permanent. It can be seasonal and you could have a number of different designs on rotation or it can be ever changing according to your particular goals.
At this point it’s worth really accessing what your website goals are before going straight in and creating your homepage hero section. And if you need to create a number of different homepage hero sections and test out which is more successful at keeping visitors on your site.
If you’re stuck for ideas on how to get going and what content your homepage hero section should have, take a look at these inspiring designs over on dribbble.
If you have any questions about your homepage hero section then let me know in the comments or you can find out more about how to work with me on your website here.
