What Is a Website’s Hero Section?

If you move in web design circles, you’ve probably heard the term “hero section” before, but without explanation, it’s hard to know exactly what this term refers to.

In truth, your website’s hero section is one of the most important elements of the site as a whole; it can dictate whether people spend time on your pages or bounce off and head somewhere else.

With that said, it’s obviously pretty important to make sure your hero section is compelling and eye-catching, but what is a hero section and how can you make yours the best it can be? Check out our guide to find out!

What is a hero section?

In short, the hero section of a website is the part that appears underneath the site’s header. On most websites, that means you’ll see the business or brand’s logo, its main navigation menu, and then the hero section.

You can see a great example of a hero section right here on this Reddit post, courtesy of user comrade_pogaca. Admittedly, it’s one that many users seem to think requires improvement, but it demonstrates the hero section’s concept perfectly.

It’s a pretty recognisable web element, right? Now, let’s talk about what a good hero section offers to those who visit your website.

What does a good hero section contain?

Since the hero section is the first thing users will see, it stands to reason that it should contain important information that you want to communicate to website visitors immediately. Here’s a rough idea of what your hero section should contain.

• What your business or brand does. This is perhaps the most important element of a hero section. It should tell users who you are, what you do, and why they should choose you within a short space of time. Ideally, your title should communicate all of this information, but at the very least, a title and a paragraph should do the trick.
• A graphic or image. Users’ eyes will bounce right off your hero section if you don’t include some kind of image that demonstrates what your site is for. Ideally, it should be an image relevant to your business, but if you can’t find anything that illustrates what you do, a stock image that’s at least partially pertinent should be fine.
• Extra text describing your business. Of course, the title should communicate what your business does, but many businesses can’t be summarised in a single sentence. It’s important to include a short paragraph detailing what customers or clients can expect from you. Don’t make this too long, though; nobody wants to read an essay in a hero section!
• A call to action. Now that users are familiar with your site and what it offers, you should include a call to action to help them decide what to do next. Commonly-used CTA phrases in hero sections include the likes of “try it out”, “get started”, or “learn more”, and it’s important to decide which one you want to use based on the action you want customers to take next.

Why is the hero section important?

The hero section’s importance can’t be overstated. 

Studies have shown that the first ten seconds a user spends on a website are critical for capturing their attention, which means that the things they see within those first ten seconds will decide whether they stick with you or not.

The hero section will almost certainly be one of the first things they see, if not the very first thing; while your logo and menu may come above the hero section, it’s entirely possible they’ll see the hero section first if it’s eye-catching enough (which it should be).

As such, keeping a user on your site pretty much depends entirely on the hero section. If they don’t like what they see, they’ll find another site that gives them what they want.

Ways to make your hero section stand out

Of course, if you’re learning all about hero sections and their importance to the wider world of web design, it stands to reason that others are doing exactly the same thing.

That’s why you need to make sure your hero section stands out from the crowd, and there are a number of ways you can do that. Here are some of our top tips to help your hero section sing!

• Don’t overdo it. We can’t state the importance of this one. It might be tempting to include lots of calls to action, lots of text explaining your brand or business, and lots of images to illustrate your point, but simplicity is key when it comes to your hero section. Overdoing it means customers could feel overwhelmed by your site and choose to go somewhere that feels simpler and more straightforward to them.
• Use a relevant image. Earlier, we said that using an image that’s partly relevant to your brand’s purpose is fine for your hero section, and that’s certainly true, but you shouldn’t use an image that has little to no relevance. For instance, if your business is primarily focused around marketing or social media services, an image of audio equipment or gaming peripherals would be wholly inappropriate.
• Keep your text simple. Many users won’t actually read the paragraph you include as part of your hero section; it’s sad, but it’s true. That’s why it’s important to make sure any user who simply decides to scan the hero section rather than reading it in full can still fully understand what you’re trying to communicate. Use short, simple sentences and concepts to get your point across.
• Test, test, test. If possible, try to recruit some help to test out whether your website is working. Ask friends or family to give the site a look if they get a chance, and ask them whether they find the design appealing or what elements they’d click on first. Of course, your friends and family aren’t web designers, but they might represent the average consumer more than you do, and they’re also a great way to get out of your own head and see how things are looking from the outside.