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 designer...

Hi! I’m Katie. Helping busy business owners create bold online brands and stand-out, non-boring websites is my jam. I’m passionate about giving once-upon-a-time-website DIYers, ambitious entrepreneurs and founders back the time to focus on doing the things they love the most in their businesses, giving them clarity in their online presence and the confidence to grow big!

Through this blog and on social media I share my advice and best practices with  business owners on how to build strong brands that will start attracting their dream customers and website that work by focusing on strategy and business goals.

When I’m not working with inspiring business owners or designing wedding cakes, you’ll probably find me dreaming of what my next meal will be, the best fruit garnishes for a gin and tonic or where we’ll travel to on our next adventure.

The latest on the blog

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 businesses”. And of course I am, but not for the reasons you might think. I am a branding and website designer, but I’m also a female founder and business owner just like you. I know what it’s like to run a business and to feel all the struggles...
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 important to be authentic in business. I know from personal experience this is definitely true. The more you allow yourself to just ‘be yourself’ the more you attract people. The part I genuinely believe people fear about it though, is that by attracting,...
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 you might be wondering how on earth you actually do this. If you feel you’re not attracting the right kind of clients, then this is for you. A lot of business owners might be under the impression that revamping their visual branding (logo, colours)...

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 business. We look at bringing things back to basics and look at the very foundations of your business and its reason to be.   Without this process, I can’t create a strategic brand. A brand with purpose and connection to your ideal clients needs...

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 them? Having a website is just the beginning, but no one will know about it or remember to go there unless you tell them to. Not just once, or twice, but continuously and consistently and in a number of different ways. The great news is, I've got...

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 mean feat. And whether you created your own site, or worked with a designer to create it, you’ll know that it takes time and effort to make it happen. But there a number of reasons why a business website should never be seen as finished. It can be...
Designing at desktop computer aerial view- Studio Lago Design

How to boost your website’s conversion rates

If you're reading this, you probably have a website already but are struggling to convert those visitors into loyal customers. Boosting your website conversion rates doesn't have to be rocket science. It’s actually all about getting inside the head of those you want to serve. Let me tell you how… Know your people Before we dive into tactics and strategies, let's talk about the basics....

5 ways to book more clients through your website

If you're looking to ramp up your client bookings through your website, you've come to the right place. I've got some killer strategies to share with you, so, grab a coffee or a cup of whatever you fancy, take a seat, and let's dive into these five strategies to turn your website into a client-booking machine. Showcase your skills with a stunning portfolio You're a creative service provider, so...

What your business is missing by not having a website

Let's cut to the chase: not having a website for your business today is like trying to win a marathon with one shoe missing. As a website designer, I've seen how a well-crafted website can turbocharge a business, and it pains me to see some businesses still on the sidelines.  I’m not just a website designer but also a consumer, just like you and just like your ideal clients. I know that when I...
Studio Lago Design Malarkey Cakes Website mock up

What Websites Need Now: Staying Ahead in the Digital Game

As a business owner, you’ll already know, the internet is a bit of a jungle. And it keeps evolving, and if you're not careful, you might get lost in the digital undergrowth. So, you might be wondering "What do websites need to thrive in this ever-changing online landscape?" Let’s take a look at how you can make sure you stay ahead of the game and that your website stands out. Fast Load Speed...