Motta Industries Blog

The top of a homepage has a hard job. In the few seconds after a page loads, a visitor decides whether they are in the right place, whether the business can help and what they should do about it. The hero section, the large block of headline, supporting line, image and button that greets them, carries most of that weight.

Many hero sections fail quietly. They feature a slogan that could belong to any company, a stock photo of a handshake, a rotating carousel of five messages and two buttons that compete for attention. Visitors do not complain. They simply scroll past without a clear idea of what happens next, or they leave.

A homepage hero section that works does three things: it says plainly what the business offers and for whom, it gives a reason to believe and it points to one obvious next step. This guide walks through each part and the technical details that decide whether visitors ever see it as intended.

Start with what the visitor needs to know

Before writing a word, list the questions a first-time visitor brings. Usually there are only a few. What do you do? Is it for someone like me? Where do you work? What does it cost or how does it start? How do I take the next step?

The hero cannot answer all of them, but it should answer the first two and point to the rest. A landscaping company might lead with the service and the area it covers. A software consultant might lead with the problem they solve and the type of client they serve. In both cases, the visitor should be able to repeat the business’s offer in one sentence after reading the hero.

A practical exercise is to show your current hero to someone outside the business for five seconds, then ask what the company does and what they would click. If their answer is vague or wrong, the hero needs work no matter how polished it looks.

Write a headline that describes, not decorates

Headlines in hero sections often drift toward slogans. They sound inspiring in a meeting and say very little to a stranger. Words like “innovative,” “solutions” and “excellence” appear on so many sites that visitors skim past them.

Google’s August 1, 2019 post What site owners should know about Google’s August 2019 core update included a list of self-assessment questions about content quality. Two of them apply directly to hero headlines: whether the headline or page title provides a descriptive, helpful summary of the content, and whether it avoids being exaggerating or shocking in nature. Those questions were written about search content, yet they make a good test for any headline a visitor reads first.

A descriptive headline names the service and, ideally, the outcome or audience. “Commercial roofing repair across the Tri-County area” tells a visitor more than “Building a better tomorrow.” The supporting line beneath it can add the detail that sets the business apart, such as same-week inspections, a warranty or a specialty.

Keep both short enough to read at a glance on a phone. If the headline wraps to five lines on a small screen, it is too long. Read it aloud, too; if it sounds like something no customer would ever say, rewrite it in the words your customers use when they call.

Give visitors a reason to believe

A clear promise invites a quiet question: why should I trust this? The hero is the right place for a short, specific answer, placed close to the headline rather than buried at the bottom of the page.

Good proof is concrete and checkable. It might be the number of years in business, a license or certification relevant to the work, the regions served, a short quote from a named customer used with permission or a recognizable association membership. One or two items are enough. A row of a dozen badges starts to look like decoration and pushes the main button down the screen.

Avoid vague superlatives such as “best in the industry” or “unmatched quality.” Visitors have seen them everywhere and they cannot be verified. A plain statement such as “Family owned since 1998, serving three counties” does more work in fewer words.

If the business has strong reviews, a brief summary with a link to the full source lets visitors check for themselves. Keep any star rating honest and current, and make sure it matches what visitors will find if they look elsewhere.

Choose one primary action

The most common hero mistake is offering too many choices. A hero with “Get a quote,” “Learn more,” “Our services” and “Watch video” asks the visitor to decide before they understand the business.

Pick the single action that most visitors who are ready should take. For a service company that is usually a request for a quote or a call. For a business with longer sales cycles, it might be booking a consultation or viewing pricing. Make that button visually dominant and label it with what happens, such as “Request an estimate” rather than “Submit” or “Click here.”

A secondary link is fine for visitors who are not ready, but it should look clearly secondary. A text link to see past work or read about the process lets a curious visitor keep exploring without competing with the main action.

Think about what happens after the click as well. If the button leads to a long form or a generic contact page, the promise of the hero breaks. The next screen should continue the same conversation, repeat the offer in a sentence and ask only for the details needed to respond. A visitor who clicked “Request an estimate” should land on a short estimate form, not a page of general contact options and office hours.

Pick an image that supports the message

Hero images often get chosen last and for the wrong reasons. A wide, attractive photo can fill the space while saying nothing about the business. Worse, a busy image behind text can make the headline hard to read.

Choose imagery that shows the work, the result or the setting your customers recognize. A photo of your actual team on a job site, a finished project or a product in use builds more trust than a generic office scene.

When text sits over an image, check legibility carefully. The W3C’s WCAG 2.1 Recommendation, published June 5, 2018, sets a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large-scale text under its Contrast (Minimum) criterion. A light headline over a bright sky or a white button over a pale photo can fail that standard even when it looks fine on a designer’s large monitor. A solid or semi-opaque panel behind the text is often the simplest fix.

The same Recommendation’s Headings and Labels criterion says headings and labels should describe topic or purpose. Mark up the hero headline as a real heading rather than styled text inside an image, so screen readers and search tools can understand it.

Think twice about carousels and motion

Rotating sliders remain popular because they let several departments put a message at the top of the page. For visitors, they often mean reading half a sentence before it slides away.

If you keep motion, give people control. WCAG 2.1’s Pause, Stop, Hide criterion says that for moving, blinking or scrolling information that starts automatically, lasts more than five seconds and is presented alongside other content, there should be a mechanism to pause, stop or hide it. Autoplaying background video falls under the same thinking.

In most cases, a single strong message is easier for visitors to absorb than a rotation of five weaker ones, and it forces the business to decide what matters most. If several offers truly matter, consider placing them in a clear row of cards just below the hero, where visitors can scan them at their own pace.

Make the hero load fast and hold still

A hero section is usually the largest element on the screen, which makes it the part that most affects how fast the page feels. Google’s Chromium team introduced Web Vitals on May 5, 2020, describing loading experience, interactivity and visual stability as core user experience needs. Largest Contentful Paint marks the point when the page’s main content has likely loaded, and Cumulative Layout Shift quantifies unexpected movement of visible content.

Both metrics often hinge on the hero. A huge uncompressed background photo or video can delay the largest paint. A headline that appears and then jumps down when a banner or web font loads creates layout shift, and visitors may tap the wrong thing as content moves.

Practical steps help. Size hero images for the screens that will display them and use modern compressed formats. Reserve space for images and banners so content does not jump. Avoid placing a cookie notice or promotion bar above the hero in a way that pushes everything down after the page appears. Then measure with real-user data where you can, rather than relying only on a test from a fast office connection.

Test the hero on real devices

A hero designed on a wide desktop screen can fall apart on a phone. Images crop unpredictably, text stacks awkwardly and the main button may drop below the visible area.

Review the hero on at least one small phone, one larger phone and a laptop, using actual devices, not only a browser preview. On each, check whether the headline, supporting line and primary button appear without scrolling. Look at both portrait and landscape orientation. If the image crops away the subject that made it meaningful, use a different crop for mobile or a different image entirely.

Once the hero is live, watch what visitors do. Analytics can show whether people click the primary button, scroll past it or leave. Recordings and heatmaps, used with appropriate consent, can show where attention goes. Change one element at a time, such as the headline or the button label, so you know what made the difference.

When the hero is a symptom of something bigger

Sometimes rewriting the hero exposes deeper issues. The business may not have agreed on its main offer, the navigation may contradict the headline or the site may be built in a way that makes changes slow and risky.

If a new headline and button are all you need, that can be a small, contained update. If the hero is one sign that the whole site no longer matches the business, a website redesign may be the better investment. Motta’s custom website design work starts with the questions your visitors bring, and our UI/UX design team tests layouts on real devices before anything goes live, so the top of your homepage tells people exactly what to do next.