Hero Section Design for Small Business Websites

A visitor lands on your homepage, sees a giant stock photo with "Welcome to our website" across it, and leaves before scrolling. You paid for a site that looks professional, but the first screen never tells people what you do, where you do it or how to get in touch.

That first screen is the hero section, and on a small business site it does more work than any other part of the page. Good hero section design is less about striking visuals and more about answering three questions in about five seconds. Here is how I build them for local businesses, with real sizes, word counts and the mistakes I fix most often.

What a hero section has to do

The hero is everything a visitor sees before they scroll. On a phone that might be 650 to 750 pixels tall. On a laptop it is roughly the top 700 to 900 pixels. In that space, a small business hero needs to answer:

1. What do you do? In plain words, not a slogan.
2. Who or where do you serve? A town, a region or a type of customer.
3. What should I do next? One clear action, usually call, book or get a quote.

If a stranger cannot answer all three after a five second glance, the hero is not working, no matter how good it looks.

Writing the headline and supporting line

The headline is the biggest text on the page and the place most sites go wrong. "Quality You Can Trust" could belong to a plumber, a bakery or a law firm. Visitors skip it because it tells them nothing.

A better headline names the service and the place. Compare these:

Keep the headline under about 10 words so it fits on two lines on a phone. Under it, add one supporting sentence of 15 to 25 words that gives a reason to choose you: years in business, a guarantee, response time or a specific credential. "Licensed electricians serving Bristol since 2009, with same day callouts for most repairs" does more than any tagline.

The call to action button

Every hero needs one primary button. Not three. When a hero offers "Learn more", "Our services", "About us" and "Contact", visitors often pick none of them.

• Use a verb and the outcome. "Get a free quote", "Book an appointment" or "Call 0117 555 0142" beats "Submit" or "Learn more".
• Make it large enough to tap. At least 44 by 44 pixels, and on mobile I make the main button close to full width.
• Give it contrast. It should be the most visually distinct element in the hero. If your brand color is soft, use a darker shade for the button.
• Add one secondary option at most. A plain text link like "See our prices" sits under the button without competing with it.

For service businesses that take phone calls, put the phone number in the hero or in a sticky header, not hidden in a menu. The reasons are in why your phone number belongs outside the mobile menu.

Why a full screen image slider usually hurts

A lot of templates and some designers still default to a full screen rotating slider with four or five images. Clients ask for them because they look busy and impressive. I talk almost every client out of them.

Sliders hide most of their content, since few visitors wait for slide three. They push the actual headline into smaller text over a moving background, which is hard to read. And they are heavy. Five large images can add 2 to 4 MB to the page, which on a mid range phone over a patchy connection can mean several seconds before anything useful appears. That slowness is part of why a website feels slow even on a fast connection.

One strong, real photo, or no photo at all with a clean background color, usually performs better. If you have several images you love, move them to a gallery or project section further down the page.

Choosing an image that does real work

If you use an image, make it specific to your business. A photo of your actual team, your van, your shop front or a finished job tells visitors far more than a stock image of smiling people in a meeting room.

Some practical rules I follow:

• Export hero images at about 1600 to 1920 pixels wide in WebP or a well compressed JPEG, aiming for under 200 KB.
• Provide a smaller version, around 800 pixels wide, for phones.
• Do not lazy load the hero image. It is the first thing people see, so it should load first.
• If text sits over the photo, add a dark overlay of about 40 to 60 percent opacity so white text passes contrast checks.
• Check how the image crops on a phone. A wide horizontal shot often loses its subject on a narrow screen.

On mobile, I often place the image below the headline and button instead of behind them. Text over a photo is much harder to read at small sizes, and stacking keeps the action visible without scrolling.

A hero section design that works for most local businesses

When I start a small business site from scratch, this is the default hero I sketch first, then adjust:

1. A short headline naming the service and location.
2. One supporting sentence with a concrete reason to trust you.
3. One primary button, plus a phone number for call based businesses.
4. A small trust line beneath it, such as a review rating, years in business or a membership badge.
5. One real photo beside the text on desktop and below it on mobile.

That structure carries through to inner pages too. A strong service page design uses the same pattern at the top of each service, so visitors who land deep in the site still get a clear first screen.

Before you publish, test it. Show the homepage on a phone to someone who does not know your business for five seconds, then take it away and ask what you do, where, and what they would tap. If they hesitate on any answer, rewrite that part.

Frequently asked questions

What should be in a website hero section?

A clear headline that says what you do and where, one supporting sentence, a single primary call to action and, if it helps, one relevant image. Small trust signals like reviews or years in business also work well here.

How tall should a hero section be?

It does not need to fill the whole screen. On desktop, 500 to 700 pixels is usually enough. On mobile, make sure the headline and main button are visible without scrolling, even if the image sits lower.

Are image sliders bad for small business websites?

In most cases, yes. They slow the page, hide most of their content and make headlines harder to read. One strong image or a clean background with clear text usually works better.