Website Hero: How To Get & Keep Website Visitors’ Attention

These days, people don’t have time to spend 5-10 minutes on your website. They’re most likely visiting your website while doing other things. But the fact that most website visitors are in a hurry doesn’t mean you can’t turn your website into a sales machine. After all, your website hero is a person’s first impression of your website, good or bad. In fact, you can start by turning your website hero into the most attention-grabbing, lead-converting part of your homepage.

What is the website hero?

Okay, so I make the #1 mistake of every marketer: used a term that you might not understand. Here’s the website hero for CenCalTinting, one of the best auto restyling shops in California:

When you first load cencaltinting.com, the screenshot above is what you’ll see – without scrolling.

In short, a website hero is the part of the homepage that you can see (without scrolling) when the website first loads for you.

Website hero vs. website header?

Often, the term “website hero” is confused with the website header. But, the website header is usually referring to the top part of the website hero, where the navigation menu, logo, and other important elements are located.

Using our CenCalTinting example, the website header is the top white portion of the screenshot that includes the logo, navigation, license number, phone number, and call-to-action button.

Why is the website hero important?

When people first visit your website, they want to find answers to 5 questions as fast as possible:

• What do you do?
• How does that benefit them?
• Where are examples or results of your work?
• What do other people say about you/your work?
• Do you appear trustworthy and professional?

A good website hero lets you answer all five of those questions without making users have to scroll. But, only if you do it right.

Best practices for a good website hero

You’ve likely come across a website with a bad header before. Maybe it had no call to action (CTA) or the hero image was so large that the web page took 10 seconds to load.

Either way, it’s very important that you pay special attention to your homepage hero section during the web design process.

Display your value statement front and center

Your value statement is one of the most important pieces of content on your website, even more than your call to action. A good value statement clarifies your offer, your audience, and your promise. Here’s an example from Lucid Tech Services:

As you can see, Lucid Tech’s website has a relevant hero image of a support professional and a clear, compelling value statement for its target B2B audience . When people see this hero section, they immediately know what Lucid Tech can provide and how it will benefit their company.

Use original photos for your hero images

Most construction companies have a stock image, outdated website design, and a boring or confusing tagline. That’s why Trademark Fresno decided to do things differently. They invested in original photography of their building, their staff, at-work pictures, and other eye-catching shots. Then, Trademark Fresno went a step further and redid their website design so it reflected the high quality and stellar user experience they provided as a company. With a bold tagline, high-resolution images, and a clear call to action (CTA), Trademark Fresno captures the attention of website visitors without them even needing to scroll down the page.

Include a specific, clear call to action (CTA)

To most people, fences are plain and boring. But to BlacklineHHP, fences are their livelihood. Capturing people’s attention on a fence website isn’t easy but BlacklineHHP does it. Using a full-length, high-resolution banner image of their black vinyl fences and a clean website design, BlacklineHHP engages visitors within the first few seconds of them visiting their web page. It’s also worth noting the two call to action (CTA) buttons that BlacklineHHP uses:

• View Gallery: This is the primary CTA because it’s the first thing people want to do on the website.
• Request A Quote: For fence buyers that are closer to making a purchase, BlacklineHHP makes it simple and easy to get a fence quote.

Point visitors to a relevant secondary page

The web design on Foster agency Karing4Kids’s website includes a great hero image and call to action (CTA). First, they concisely summarize their mission as an agency, which is to provide a structured and nurturing place for at-risk children. Then, they include a hero image of a young child that looks happy and content, which alludes to the agency’s desired goal for the children they help each day.

Follow eye-tracking patterns in your text and image placement

Fresno landscaping company Transform Landscape also does a great job with their hero image in their web design. When you visit Transform Landscape’s website, their web design includes high-resolution hero images of landscapes they’ve created and maintained for customers over the years. The two call to action (CTA) buttons help website visitors immediately take action, either to visit Transform Landscape’s project gallery or to contact the company for a landscaping job.

Use hero images of your product or staff at work

Project management software ClickUp encourages people to sign up with a one-field signup form, a concise tagline, and great reviews from Capterra and other software review platforms. ClickUp also incorporates many example images of their product in action. Since the hero is often the first thing people see on a website, these eye-catching product snapshots help users envision themselves using the product. This means they’ll be more likely to convert from a passive browser to an engaged buyer.

Want a better website? Call AMARQUEZ

Our professional website developers will create a design that maintains a great user experience while encouraging people with great photos and a compelling call to action (CTA). If you’re ready for a great web design that includes great hero images and a compelling call to action (CTA), give AMARQUEZ a call.