Have you ever heard of the hero section of a website?

True confession? It has nothing to do with Ironman, WonderWoman, or Thor (I know, bummer, right?!). But it’s still a pretty important concept, so stick with me.

The hero section is the area of your website that first shows up under your logo and menu before ANY scrolling takes place.

Think first impressions.

This valuable piece of website “real estate” is the equivalent of the right or wrong outfit on a blind date. Use it right, and it’s the perfect little black dress with the best accessories. Use it wrong, and it’s that velour tracksuit from the 70s with gold chains. (How’s that for a visual?)

So exactly how can you take advantage of this part of your website so it works for you and your brand? Your hero section has the daunting task of telling your visitors:

What you offer
Why it’s important
What to do next

And it must do all of that in about 5-15 seconds because that’s about how long it takes people to decide whether to leave a web page or not (can you say “short attention span?!”).

Here are FOUR key elements that should be included in an effective hero section.

The Hero Image

Arguably one of the most critical components of the hero section because consumers are typically drawn more to powerful graphics than simple lines of text—the hero image—is by far the best way to create a great first impression on your landing page.

The hero image could be a product shot or a person using the product, or even a video. What’s most important is that it grabs attention and supports the Headline and Subheadline (see next sections).

The Headline

The Headline CLEARLY tells what you do. This is NOT the place to be inspiring, vague, or to ask a question. This IS the place to be direct, concise, and specific. Clarity always trumps being clever!

So, as an example, if your company is Acme Locksmith Company, your headline could be..

We’ll Get You in the Door and Back to Your Life

Once you have a clear, concise headline, the Subheadline can do some of the heavy lifting for you.

The Subheadline

Sometimes referred to as the tagline, this tells your visitors either about the transformation your product or service offers, the problem you can solve for them or what you can do for them, and why it’s important.

Use your subheadline to give the visitor a picture of the benefits of your product/service. Set yourself apart from your competition, or state how your product/service can solve a major problem. In our above example for Acme Locksmith Company, the tagline could be...

24/7 Locksmith Services in 30 Minutes or Less

The Call to Action

The CTA tells your visitors what to do next and should be extremely easy to find. A bold-colored button typically works well. There are a variety of options for what you can say here:

Get Valuable Intel with our Newsletter
Download Our Free App
25% Off Your First Purchase
Claim a free trial
Schedule a consultation call

Whatever option you decide to go with, avoid the mistake of NOT including a CTA as this leaves a potential customer scratching their heads, wondering what to do next.

Final Thoughts

The famous quote “You never get a second chance to make a first impression” is certainly true of websites—which is why the importance of having a really traffic-stopping hero section can’t be overstated.

At CCM…

We have a passion for helping small business owners DIAL-IN all the aspects of the marketing puzzle. We especially love creating conversion-ready website copy. We’ve helped to optimize websites in dozens of industries, and we’re ready to help you scale up.

Is Your Website’s “Hero Section” Serving You Well?