Hero Section: What It Is, What to Put in It and Examples for Business Websites

Every visitor sees the hero section. Many never see anything else. That makes it the most read, most judged and most argued-over part of a website, and the part where a vague sentence or a slow photo costs the most.

Most advice about it stops at inspiration galleries. This guide treats the hero as a working part of the page: what it must say, how it is built, what the browser does with it and how you can tell whether it is doing its job.

What is a hero section?

A hero section is the large introductory block at the top of a web page, directly under the navigation. It is the first thing a visitor sees before scrolling, and it normally combines a headline, a short supporting sentence, a call to action and a visual such as a photo, illustration or video.

The name comes from the hero image, a term designers use for the dominant picture at the top of a page. Over time the word grew to cover the whole first block, text and button included. On a homepage it introduces the business. On a service page it introduces the service. On a landing page it restates the promise of the ad that brought the visitor.

A hero section has one job: let a stranger understand in a few seconds what this page offers, whether it is for them, and what to do next.

Hero section vs header, banner, above the fold and landing page

These terms get mixed up in briefs and in meetings, and the confusion leads to wrong requests. People ask for a bigger banner when they need a clearer headline.

The fold is the one that causes the most trouble, because it is different on every device. A hero that fits a wide monitor can push its button off the screen on a small laptop or a phone. If you are deciding between a full site and a single campaign page, our comparison of a landing page vs a website covers that choice.

What does a hero section have to do?

A first-time visitor arrives with three silent questions. The hero has to answer all three without making them scroll.

1. What is this? The product or service, named in plain words. Not a mood, not a mission.
2. Is it for me? The kind of customer, the place served or the problem solved.
3. What do I do next? One obvious action, and a hint of what happens after it.

A quick way to check is the stranger test. Show the first screen to someone who has never heard of the business, take it away after a few seconds and ask what the company does and what they could do on the page. If the answer is a guess, the hero is decoration.

The hero also carries a job that visitors never notice: it sets expectations for the rest of the page. If the headline promises fast emergency repairs, the sections below should prove speed. When the first screen and the rest of the page talk about different things, people leave, which is one of the causes we cover in our guide to a website that is not getting leads.

What should you put in a hero section?

Very little, chosen carefully. Each element below earns its place by answering one of the three questions. Anything that does not answer one of them belongs further down the page.

1. A headline. One sentence that says what you offer and for whom. It is usually the H1 of the page.
2. A supporting line. One or two sentences that add the detail the headline could not hold: how it works, where, or what makes it different.
3. One primary call to action. A button with a specific label, such as Request a quote or Book a consultation.
4. An optional secondary action. A quieter link for people who are not ready, such as See our work.
5. One visual. A photo, product shot, illustration or short video that shows the offer or its result.
6. A small proof element. A review rating, a line of client logos or a credential, placed near the button.

What does not belong: three paragraphs of company history, a list of every service, awards nobody recognizes, a chat pop-up that opens on arrival, and animation that delays the text. Company history has its own home on the About Us page.

How do you write a hero headline?

Start with clarity and add personality only if clarity survives. A headline a competitor could paste onto their own site without changing a word is not doing any work.

Three patterns cover most business websites:

• Offer plus audience. Custom websites for home service companies.
• Outcome plus offer. More booked jobs from a website built around your service area.
• Problem plus answer. Roof leaking? Same-week inspections across the county.

Length matters less than people think. A twelve-word headline that names the service and the customer beats a four-word slogan. What matters is that the important words come first, because on a phone the headline may wrap across four lines.

What goes in the subheadline?

The supporting line finishes the thought. If the headline says what you do, the line under it says how, where or for whom. If the headline is a bold outcome, the line under it explains the service that produces it.

A useful supporting line usually contains at least one concrete detail:

• The area served or the type of client.
• How the first step works, such as a free estimate or a short call.
• A differentiator that can be checked, such as licensed and insured, or one team from design to launch.

Keep it to one or two sentences. If it needs three, the page is trying to explain everything on the first screen, and the extra sentence belongs in the next section. Do not repeat the headline in other words. A line that says the same thing twice wastes the best position on the page.

What call to action belongs in the hero?

One primary action that matches what the visitor is ready to do. For a service business that is usually a quote request, a booking or a call. For a store it is a path into the products. For software it is a trial or a demo.

Three rules keep the hero button honest and useful:

• Label the result. Get my estimate tells people what they receive. Submit and Learn more do not.
• Make one button the obvious one. A filled primary button and a plain text link for the secondary action. Two equal buttons make people stop and compare.
• Say what happens next. A short note under the button, such as Takes about a minute or We reply the same business day, if that is true.

Wording, size, color contrast and placement of buttons deserve more room than this section has. Our guide to the website call to action covers them with examples for each type of business.

Hero image, video or illustration: which should you use?

Choose the visual that shows the offer or its result most directly. The visual is evidence, not wallpaper.

Stock photos of handshakes and people pointing at laptops are the weakest option. Visitors have seen them on a thousand sites, so they signal that there is nothing real to show. A plain photo of your actual crew, office or finished project carries more weight than a polished stock image.

If you use people in the photo, direct their gaze toward the headline or button rather than out of the frame. And check the image with the text on top of it at every screen width. If you want a second opinion on which visual suits your offer, book a Blueprint Briefing and bring two or three candidates.

What is the right hero section image size?

There is no single correct size, because the hero is displayed at many widths. The right approach is to prepare several sizes of the same image and let the browser choose.

In practice that means:

• Export a set of widths. For a full-width hero, versions from phone width up to a large desktop width, listed in the image’s srcset attribute. The browser downloads only the one that fits the screen.
• Use a modern format. WebP or AVIF files are typically much smaller than JPEG at similar quality. The HTTP Archive’s 2025 Web Almanac found that JPG and PNG still make up the large majority of the biggest images on pages, with WebP at about 11 percent and AVIF under 1 percent, so most sites have room to improve here.
• Plan the crop for phones. A wide landscape photo shrinks to a thin strip on a vertical screen, or the subject gets cut off. Supply a taller crop for small screens with the picture element.

Always set the width and height attributes on the image so the browser can reserve the space before the file arrives. That prevents the page from jumping, covered in the layout shift section below.

WordPress generates several sizes of each uploaded image and writes the srcset for you, but only when the image is inserted as an image. A hero photo set as a CSS background in a page builder often skips that system and ships one large file to every device.

Hero section design: which layout fits your page?

Most hero sections are variations of five layouts. Pick by what you need to show, not by what is fashionable this year.

Height is a design decision with consequences. A hero that fills the whole screen looks dramatic, but it hides the fact that there is more below. Leaving a sliver of the next section visible tells visitors the page continues.

The structure of the rest of the page is covered in our guide to what pages a website should have.

Hero section examples by type of business

These are illustrative patterns, not copies of real sites. Each shows how the same parts change with the business.

Notice what the examples share. None starts with Welcome. Each names the service in the headline. Each has one main action that matches how that customer buys. Real estate has its own patterns for campaign pages, which we cover in our guide to the real estate landing page.

Should a hero section be a carousel or slider?

Usually not. A rotating hero is popular because it settles internal arguments: every department gets a slide. For the visitor it means the message changes while they are reading it, and most people only ever see the first slide.

The W3C Web Accessibility Initiative says in its carousel tutorial that carousels are disputed from a usability perspective because their content can be hard to discover. The same tutorial sets out what an accessible carousel needs: every function must work from the keyboard, changes between items must be communicated to screen reader users, and users must be able to pause the movement.

The pause requirement comes from the accessibility guidelines themselves. WCAG success criterion 2.2.2, a Level A requirement, says that moving or scrolling content that starts automatically, lasts more than five seconds and appears alongside other content needs a way to pause, stop or hide it. An auto-rotating hero with no pause control fails it.

If several messages truly need the top of the page, there are better options:

• Pick the one message most visitors need and give the others their own sections just below.
• If a carousel stays, do not auto-rotate it, show clear previous and next controls, and make the first slide complete without the others.

If your team cannot agree on a single message for the first screen, that is a positioning question more than a design one. It is the kind of thing we settle on a Blueprint Briefing call before any layout is drawn.

How should a hero section work on mobile?

On a phone the hero is a vertical stack on a narrow screen, often opened on mobile data. It needs its own design, not a shrunken desktop layout.

• Text first, image second. In a split layout, stack the headline and button above the picture so the message and the action appear without scrolling.
• Check the headline wrap. A sentence that sits on two lines on desktop can take five on a phone. Shorten it or reduce the size on small screens.
• Keep the button on the first screen. Test on a small phone with the browser toolbars showing, since they take part of the height.
• Offer the phone action. For local services, a tap-to-call button often suits mobile visitors better than a form.
• Be careful with full-height heroes. Mobile browsers show and hide their toolbars while scrolling, which changes the visible height. Modern CSS viewport units handle this; older full-height settings can cut off the button.

Background video deserves a second look on phones. Mobile browsers restrict autoplay, and a video that does not start leaves an empty or frozen block. Many sites swap the video for a still image on small screens, which also saves data.

How does the hero section affect page speed?

More than any other part of the page. Google’s loading metric, Largest Contentful Paint, reports the render time of the largest image, text block or video visible in the viewport. On most pages that element is in the hero.

The numbers are public. In the HTTP Archive 2025 Web Almanac performance chapter, 76 percent of mobile pages had an image as their LCP element, and 62 percent of websites had a good LCP on phones. The same chapter reports that about 16 to 17 percent of pages lazy-load their LCP image, which tells the browser to delay the one picture it should fetch first.

A good LCP is 2.5 seconds or less for at least 75 percent of visits. Google’s guide to optimizing Largest Contentful Paint gives the main fixes, and they map directly onto hero decisions:

1. Never lazy-load the hero image. Lazy loading is for images further down. Many plugins apply it to every image unless the first one is excluded.
2. Mark it as high priority. Adding fetchpriority set to high on the hero image tells the browser to fetch it early. The Almanac found this on only 17 percent of mobile pages with LCP images.
3. Keep the image discoverable in the HTML. A hero photo set as a CSS background is found late, after the stylesheet loads. Use an image element, or preload the file.
4. Serve the right size and format. Covered in the image size section above.
5. Do not hide the hero behind script. If the headline only appears after an animation library loads, the largest element renders late even though the files arrived on time.

A text-only hero or a split layout with a modest image is often the fastest design, because the largest element is then a block of text that needs no download. Our explainer on what Core Web Vitals are covers the three measurements and how Google uses them.

What makes a hero section jump while it loads?

Layout shift. The visitor starts reading the headline, something loads above or inside the hero, and the text moves. Google measures this as Cumulative Layout Shift, and a good score is 0.1 or less.

Google’s guidance lists the usual causes: images without dimensions, embeds and injected content without reserved space, and web fonts. In a hero they show up like this:

• The image has no width and height. The block collapses, then expands when the file arrives. Set the attributes or a CSS aspect ratio.
• A web font swaps in late. The headline renders in a fallback font, then reflows when the brand font loads. Preload the font used in the headline and choose a fallback with similar proportions.
• A bar is injected above the hero. Cookie notices, promotion bars and app banners that push the page down after it has rendered. Reserve their space or overlay them.
• Entrance animations move the layout. Animate with transforms and opacity, which do not shift surrounding content.

Pop-ups are a related problem. A newsletter or discount overlay that covers the hero on arrival hides the one screen you worked hardest on. Google’s Search documentation advises using a banner that takes up a small part of the screen instead of an interstitial that covers the page, because intrusive overlays make content harder for both people and search engines to reach.

How do you keep a hero section readable and accessible?

The most common accessibility failure in a hero is white text over a bright photo. It may look fine on the designer’s monitor and be unreadable on a phone outdoors.

The standard is specific. WCAG success criterion 1.4.3 requires a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text, which it defines as 18 point, or 14 point bold, and larger. The W3C lists background images that do not provide enough contrast with the text as a documented failure.

Practical ways to meet it:

• Put a dark or light overlay between the photo and the text, strong enough for the worst part of the image.
• Use a split layout so text sits on a solid color.
• Choose photos with a calm area where the text goes, and check the crop on phones, where the text may land on a different part of the picture.

Three more points complete the basics:

• Real text, not text baked into the image. Screen readers, translation tools and search engines read HTML text. A headline that exists only as pixels is invisible to all three.
• Alt text by purpose. If the photo shows something meaningful, describe it briefly. If it is purely decorative, an empty alt attribute tells screen readers to skip it.
• Respect reduced motion. Operating systems let users ask for less animation, and websites can detect that with the prefers-reduced-motion media feature. Large scaling and panning effects can cause discomfort for people with vestibular disorders, so turn them off for those users and give background video a pause button.

Accessibility here is also plain usability. Text everyone can read is text more people act on. If you would like your current first screen checked for contrast, motion and structure, schedule a Blueprint Briefing and we will go through it together.

Does the hero section matter for SEO and AI search?

Yes, in three ways: the heading, the text and the speed.

The heading. The hero headline is normally the page’s H1. It should describe the page in the words people search with. A homepage whose H1 is Welcome or a slogan gives search engines little to work with. The H1 and the title tag do related but different jobs, which we explain in our guide to the SEO title tag.

The text. The first lines of a page tell both readers and machines what it is about. A hero with a clear statement of the service, the customer and the area gives search engines and AI assistants a sentence they can use. A hero made of an image with a two-word slogan gives them nothing. Our guide on how to appear in AI Overviews explains why plain, self-contained statements help.

The speed. Core Web Vitals are part of how Google evaluates page experience, and the hero usually decides the loading score.

Two cautions. Do not stuff the headline with keywords; one natural phrase is enough, and the supporting line can carry a second. And do not let a rotating hero put several H1 headings on the page, one per slide. One page, one main heading.

Hero wording will not win a ranking by itself. It makes the page’s subject unmistakable, which is where the rest of the work starts. The wider picture is on our SEO, AEO and GEO services page.

Do inner pages and landing pages need a hero section?

Every page needs a clear opening. Not every page needs a tall one.

A frequent mistake is copying the homepage hero onto every page with the heading swapped. Service pages then open with a huge stock photo and push the useful detail a full screen down. Visitors who arrive from search on a service page have already said what they want; give it to them quickly.

On a landing page, message match is the main rule. If the ad promised a free roof inspection, the hero headline should say free roof inspection, not the company slogan. For contact pages, the first screen should be the way to get in touch, as described in our guide to the Contact Us page.

How do you know if a hero section is working?

Opinions about the hero are endless. Measurements are scarce. A few simple ones settle most arguments.

• Clicks on the hero button. Track the primary button as its own event in Google Analytics 4, separate from the same button lower on the page.
• Completed actions. Clicks only matter if forms are sent, calls are made or bookings are completed. Mark those as key events.
• Scroll. If very few visitors scroll past the first screen and few click, the hero is not earning either response.
• Loading and stability. LCP and CLS for the page, from PageSpeed Insights or the Core Web Vitals report in Search Console, which show data from real visitors when there is enough traffic.
• The stranger test. Five people outside the company, a few seconds each, one question: what does this business do? It costs nothing and catches unclear headlines before any analytics can.

When you change the hero, change one thing at a time and give it enough visits to mean something. A page with a few hundred visitors a month cannot support a formal split test; results would swing on a handful of people. In that case rely on the stranger test, session recordings and a before and after comparison over equal periods, and be honest that the comparison is rough.

What are the most common hero section mistakes?

The same problems appear on site after site. Most can be fixed without a redesign.

If several of these apply and the site is also dated in structure, a patch may not be enough. Our guide to the website redesign process explains how to rebuild without losing what already works. And if you want to know which fixes would matter most on your site, book a Blueprint Briefing and bring the address.

How GoSocial builds a hero section

GoSocial is a custom web design company in Boca Raton, Florida, that has built custom-coded and custom WordPress websites for businesses across the United States since 2016. We build websites around buyer psychology, and the hero is where that starts.

The message comes before the layout. In discovery and strategy we settle who the page is for, what they need to hear first and what action makes sense, then write the headline and supporting line. Design follows the words, not the other way around. The full sequence is on our web development page.

In development the hero is treated as the loading-critical part of the page: real text for the heading, the main image sized per device and prioritized, space reserved so nothing jumps. We do not promise a score. We build for the metrics and show you the measurements. Every site launches with GA4 and Google Search Console connected, with form submissions, phone clicks, WhatsApp clicks and bookings tracked, so the first screen can be judged on what it produces. You can see finished first screens across industries in our portfolio.