Hero Section Design: A Practical Guide for UK Trade Websites

Desktop and mobile hero layouts shown together

A hero section is the first screen a visitor sees on your homepage, before they scroll. Good hero design does four jobs in a few seconds: it says what you do, where you do it, why you can be trusted, and what to do next. For a trade business, that last part usually means one thing: pick up the phone.

This guide covers the parts of a hero, how to write the headline, how to choose and size the image, what belongs above the fold on a phone, and a checklist you can run against your own homepage today. The examples are drawn from the trades, not from software start-ups, because a plumber in Corsham and a SaaS company have very different heroes to build.

Tkmarketing

Build a Trade Website That Earns Calls

TK Marketing builds SEO-optimised websites for UK trade businesses, with conversion-focused design and monthly management to keep them fresh and functional.

Explore trade website services

TL;DR

A hero needs five things: a clear headline, a short supporting line, a real image, one main call to action and a small piece of proof.
Say the trade and the area in the headline. Visitors from Google want to know straight away that you cover their town.
Design for the phone first: your phone number should be tappable without scrolling.
Keep the hero image light. Heavy files slow the page, and speed is a design decision, not just a technical one.
Test one change at a time and watch calls and form enquiries. No layout guarantees results.

What a hero section is, and what it is not
The five parts of a hero that works
Writing the headline
Choosing the hero image
The call to action: one main job
Trust proof inside the hero
Consistent contact details help Google as well as people
What belongs above the fold on a phone
Layouts that suit trades
Perspective: what we see on trade homepages
Hero section checklist for your own site
How to test changes without guessing
Where TK Marketing fits
FAQ
Sources

What a hero section is, and what it is not

The hero is the uppermost part of the page, the area visible on arrival without scrolling. People also call it “above the fold”, a phrase borrowed from newspapers. On the web the fold moves with every screen size, so there is no single line to design to. A laptop might show 700 pixels of height, a small phone far less once the browser bars take their share.

That is why it helps to think in priorities rather than pixels. Whatever sits at the very top of the page, on the smallest screen your customers use, must carry the message. Everything else can follow below.

A hero is not a slideshow, a mission statement or a place for your company history. Rotating banners hide your best message behind a timer, and most visitors never see the second slide. One message, one action, is the rule that holds up best for local services.

The five parts of a hero that works

Part	Job	Trade example
Headline	Say what you do and where	“Roofers in Corsham and across Wiltshire”
Supporting line	Add the reason to choose you	“Repairs, re-roofs and flat roofs, quoted in writing”
Image	Prove you are real	A photo of your own team or finished job
Call to action	Tell them the next step	“Call 01234 567890” plus a quote button
Proof	Remove doubt	A review score, a trade body logo or a local customer quote

If you can only fix one thing, fix the headline. If you can fix two, add the phone number in a tappable form.

Writing the headline

Lead with the trade and the place

A visitor who searched for an electrician near them wants confirmation, not cleverness. “Quality you can trust” fits any business in any town, so it tells them nothing. “Domestic electricians in Salisbury and south Wiltshire” tells them they are in the right place.

Here are headline patterns that work for trades, with the weak version beside each:

Trade plus area. “Plumbing and heating engineers in Bath” instead of “Your local experts”.
Trade plus outcome. “Leaking roof fixed, with a written quote first” instead of “Excellence in roofing”.
Trade plus specialism. “Kitchen fitters for period homes in Wiltshire” instead of “Dream kitchens delivered”.
Emergency plus availability. “Burst pipe? Call a local plumber now”, but only if you really do answer emergencies, and say the hours you cover.

Only state what you can deliver. If you promise same-day call-outs, you must be able to do them.

Match the headline to what the visitor was looking for

Message match is the idea that the page should echo the words that brought the visitor there. A case study of AutoTrader’s landing page reported a 6.44% rise in click-through rate and a 4% uplift in mobile conversion after the heading was revised to be more benefit-led. That is one company’s result on one page, so treat it as a sign that headline wording is worth testing, not a promise of what you will see.

For a trade site, message match is simple. If your Google Business Profile says “boiler servicing” and your ad says “boiler servicing”, the hero should say it too. For a deeper look at matching headlines to search intent, the same logic applies to the headlines you write for search listings: the words promised before the click should be the words seen after it.

Keep it short

Aim for a headline that reads in one breath, roughly six to ten words, and a supporting line of one sentence. If the headline needs two lines on a phone, check that it still sits above your button.

Choosing the hero image

Use your own work

Stock photos of smiling people in hard hats are easy to spot and easy to distrust. A photograph of your own van, your own team on a real job, or a finished project is more convincing. It also proves you work where you say you work.

A few practical rules:

Show the result, not just the tools. A finished bathroom beats a pile of tiles.
Put people in it if you can. Customers hire a person, so a visible face helps.
Avoid busy images behind text. If words sit on a photograph, use a darker overlay so they stay readable.
Keep the subject clear of the area where the headline and button will sit.

Get the file size right

A large camera photo can run to several megabytes. One image-optimisation guide suggests 100 to 200KB for a full-width hero image, served at the width the page needs rather than the original camera resolution. Treat that as a sensible target rather than a fixed rule, since the right figure depends on the photo and your layout.

The hero image is often the largest element on the page, so it often decides how fast the page feels. The UK Government Digital Service advises treating frontend performance as a design principle and setting a performance budget early, so that design choices do not cost usability. That advice transfers well: decide how heavy your hero is allowed to be before you pick the photo, not after.

There is no single ideal size. A common approach is to export an image about 1,600 to 2,000 pixels wide for desktop, compress it hard, and let the browser scale it down on smaller screens. Better still, serve a smaller crop to phones. On a phone, a full-height hero is rarely needed. A shorter band that leaves room for the headline and button works better than one that fills the whole screen with photograph.

Avoid auto-playing background video for a local trade. It is heavy, it can drain a phone’s data allowance, and a still photograph of a real job usually says more.

The call to action: one main job

Your hero should push one primary action. For most trades that is a call, with a quote request as a quiet second option. Two equally loud buttons make the visitor choose, and choosing is work.

Write the button as an action. “Call now” or “Get a free quote” beats “Submit” or “Learn more”. Say “free” only if the quote really is free.
Show the number as text. On a phone, make it a tap-to-call link. On a desktop, show the number anyway, because people often ring from a mobile while looking at a laptop.
Make it big enough to tap. A thumb needs a generous target, with space around it so it is not hit by accident.
Keep contrast high. The button colour should stand apart from everything else in the hero.
Do not hide the number in a menu. If someone has to open a hamburger menu to find your phone number, you will lose calls.

Trust proof inside the hero

Visitors decide quickly whether you look like a real, reliable business. Put a small piece of evidence in the hero itself instead of leaving it three screens down. A local marketing guide from South Cambridgeshire District Council suggests that local businesses include trust elements in the hero, such as a client logo, a single testimonial or a specific figure such as the number of local households served.

Options that suit trades:

A review score with the number of reviews behind it, and where they come from.
One short customer quote with a first name and town, used with permission.
Logos of trade bodies or schemes you genuinely belong to.
A fact you can stand behind, such as years trading or number of local jobs completed.

Use one or two, not six. A crowded row of badges competes with your headline and button. And never invent or inflate proof: an unverifiable badge does more harm than none.

Consistent contact details help Google as well as people

Your hero will usually show your phone number and area. Keep those details identical to the ones on your Google Business Profile. The South Cambridgeshire guide notes that inconsistent name, address and phone details can lead to lower rankings and reduced visibility. If your profile says “Smith & Sons Roofing” and your site says “Smith and Son Roofers”, tidy it up.

If you want a walkthrough of the profile side, our guides on Google Business Profile for contractors and five quick profile actions for UK trades cover verification, services and the basics.

What belongs above the fold on a phone

Most local searches happen on mobile, so design the small screen first and then scale up. A sensible top-to-bottom order for a phone looks like this:

A slim header with your logo and a tap-to-call button.
The headline, with trade and area.
One supporting sentence.
The main button.
A single line of proof, such as your review score.
A hint of the next section, so people know to scroll.

The image can sit behind this, or just below it. If you must choose between the picture and the button being visible, choose the button.

The GOV.UK Service Manual notes that a responsive website is usually the best way to serve mobile users, because it needs no download and saves on data. It also says services should be built to work across different browsers and devices, and that small visual differences are fine as long as the page works. Check your hero on a real phone, on a slow connection, and not only in a desktop browser window.

Accessibility is part of hero design

A hero that some people cannot read fails some of your customers. Check text contrast against the image, make sure buttons work with a keyboard, and give the image useful alt text. The WCAG 2.2 guidance on GOV.UK is built on four principles: perceivable, operable, understandable and robust. They are a handy test for any hero: can everyone see it, use it, understand it and rely on it?

Layouts that suit trades

Layout	Works well when	Watch out for
Image left, text right	You have a strong photo of a team or job	Stacks on mobile, so check the order
Full-width photo with overlay text	You have a high-quality image of finished work	File weight and text contrast
Text-led with a small image	You have little photography so far	Can feel plain without proof
Split with a quote form	Leads come mainly from forms	Long forms drive people away; ask only for name, number and job

The text-led layout is underrated. A clear headline, a phone number and a review score will often serve a new business better than a poor photograph.

Perspective: what we see on trade homepages

We build websites for UK trades, and the same hero mistakes appear again and again. The headline says “Welcome to” and the company name. The phone number sits in the footer. The image is a stock photo of a stranger. The page has three buttons of equal weight.

Perspective: what we see on trade homepages — overview diagram

The fix is rarely a redesign. It is usually an afternoon of decisions: choose the one thing you want a visitor to do, say plainly what you do and where, and show a piece of proof. Then keep the page light so it opens quickly on a phone in a van park or a kitchen.

We also think a hero should not be left to age. Phone numbers change, a service area expands, a review score moves. That is why our sites come with monthly management, so edits, hosting and security checks are handled and the first screen keeps saying what is true. We make no promise about rankings or call volumes, because no design can guarantee them. What we can say is that a clear, fast hero gives your marketing a fair chance of working.

— Trey

Hero section checklist for your own site

Open your homepage on your phone and run through this list:

Can you tell the trade and the area in three seconds?
Is the phone number visible and tappable without scrolling?
Is there one main button, clearly different from everything else?
Is the image yours, relevant and light enough to load quickly?
Is there a real piece of proof near the top?
Is the text readable against the image?
Do the name, number and area match your Google Business Profile?
Does the page look right on a small phone, a tablet and a laptop?

If you answer no to more than two, you have a clear to-do list.

How to test changes without guessing

Change one thing at a time. If you rewrite the headline, swap the photo and move the button in one go, you will not know which change made the difference. Keep a simple log: the date, the change, and the number of calls and form enquiries over the following weeks.

One-change test log and enquiry tracking

For a small trade site with modest traffic, expect noisy numbers. A few extra calls in a fortnight could be luck, a quiet spell or the season. Judge over a longer period, and use call tracking or your phone’s call log alongside form submissions so you count everything. Be honest with yourself about what the data can and cannot say.

If leads are your main goal, the wider picture matters too. Our ranking of seven UK lead channels shows where a better homepage fits alongside profiles, referrals and other sources, and our piece on why a Google profile alone falls short for roofers explains why the website behind the profile still matters.

Where TK Marketing fits

If you would rather not wrestle with layouts and file sizes, we build and manage websites for UK trade businesses, with a launch time of 10 to 14 days and written content supplied. Our published plans are Shopfront at 39 GBP per month with a 299 GBP one-off setup, Shopfront Plus at 59 GBP per month with a 399 GBP one-off setup, and Website Max at 499 GBP per month with a 599 GBP one-off setup. Compare them on our pricing page. If you prefer a one-off build, our WordPress website is 599 GBP. If your van and signage need to match the new site, our brand identity service covers that too.

FAQ

What does hero mean in website design?

The hero is the large opening area at the top of a page, usually made up of a headline, a supporting line, an image and a button. It is the first thing a visitor sees, so it carries your main message. The name comes from its prominence, not from any particular style.

There is no single ideal size, because screens vary. A common approach is a wide image of around 1,600 to 2,000 pixels, compressed heavily, with a smaller crop for phones. Aim for a file weight in the low hundreds of kilobytes, and check the page on a real mobile.

How do I make a good hero section on my website?

Write a headline that names your trade and area, add one supporting sentence, use a real photo of your work, and give visitors one clear action such as calling you. Add a small piece of proof, such as a review score. Then test it on a phone and change one element at a time.

Does above-the-fold content still matter?

Yes, because the first screen decides whether people keep reading. That said, people do scroll, so the aim is to give a clear message and next step at the top, then reward scrolling with the detail. Design for the smallest screen your customers use.

Can a new hero section guarantee more enquiries?

No. A clearer headline, faster image and visible phone number remove common obstacles, but results depend on your market, your reviews, your search visibility and the season. Test changes and judge them over a reasonable period.