Image of me-Studio Lago Tablet

What is a homepage hero section and what should it include?

Dec 20, 2021

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
Studio Lago Homepage hero section

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:

Homepage hero section example header
Homepage hero section example header
https://dribbble.com/shots/14819655--Exploration-Hero-Section

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.

Studio Lago Homepage hero section

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.

About the writer…

I’m Katie and I’m besotted with taking adventurous female creatives, coaches and educators on a journey of discovery of their business from the foundations up, to give them a crystal clear brand vision and a new found confidence to make an impact.

I know what it’s like to start a business and then find yourself on the road to burnout because actually, you’ve taken so many wrong turns and lost sight of the reasons why you started on your journey in the first place.

I hope these design notes inspire you to create the brand of your dreams. 

Katie x

The latest design notes…

Learnings from my own rebrand

Some would announce their new look... Their new brand, logo and website. I'm here to announce a hell of a lot more than that. I'm reaching the...

How to beat brand shame

I speak to a lot of business owners who tell me a similar story… They are ashamed of their brand and they just don’t feel it’s doing its job for...

What you need to stand out online to all the right people

I get it. All the online gurus are shouting about this one big thing that you need to help your business stand out online. Courses, workshops,...
Studio Lago Design business card front and back

Why you need brand guidelines

You know how there are just some brands that feel like they “work”? Like when you walk into your favourite shop and things just feel aligned? That...
Designing at desktop computer aerial view- Studio Lago Design

“I don’t need a website” (and other stories you’re telling yourself)

Ok I get it. The first thing you’re thinking is “Well of course you’re going to tell me I need a website if you run a business creating websites for...
Studio Lago Design Malarkey Cakes Website mock up

5 steps to building an authentic brand

The word ‘authentic’ seems to get bandied around a lot and as business owners we have been told time and time again that it’s more and more...
Katie Lake Volcof of Studio Lago Design

How to identify your core brand values

Ok firstly, why should you identify your core brand values? Well, you’ll no doubt have heard a lot of talk about attracting your ideal customers and...

My Core Business Values and why they’re so important

I’ve been on a journey of rediscovery in my own business recently. This is a journey I take my clients on when they work with me on elevating their...

5 Simple ways to drive more traffic to your website

You’ve got a website, and that’s the first step. But, in an ocean of billions of websites, how will people know it’s actually there unless you tell...

Why your website is never ‘finished’

As a service based business, a website is one of the most powerful parts of your marketing strategy you can possibly have. Creating a website is no...