A hero section is the first block of your homepage, the part visitors see before they scroll. A strong one does three jobs in a few seconds: it says what you do, shows who it is for, and gives one clear next step. This guide covers what to put in it, how to size it, how to write the headline, and which layouts suit small businesses.
TL;DR
- A hero section is the top block of a page, usually a headline, a short supporting line, one button and one visual.
- Lead with a specific headline that names what you offer, who it serves and why it matters.
- Use one primary call to action with action wording, such as “Get a free quote”, never “Submit”.
- On mobile, stack the content, shrink the headings and keep the headline and button on the first screen.
- Let a hint of the next section show, so visitors know there is more below.
Table of Contents
- What a hero section is, and how it relates to above the fold
- What to include in a hero section
- Hero headline examples that work
- How tall should a hero section be?
- Desktop and mobile best practices
- Hero layouts that suit small business websites
- Common hero section mistakes
- Hero section or landing page: what is the difference?
- Our perspective
- Get a hero section built around your business
- A quick hero section checklist
- FAQ
- Sources
What a hero section is, and how it relates to above the fold
A hero section is the prominent visual element at the top of a webpage, visible without scrolling. It is part of the above-the-fold area, and that area can also hold your navigation and other elements. In other words, “above the fold” describes a location, while “hero” describes the block that usually fills most of it.
Mailchimp describes the fold as the top of a page visible without scrolling, typically only the top half on common screen sizes. People do scroll, so the fold is not a wall. But that first screen still shapes the first impression, and it can push a visitor to keep going or to leave.
Think of it like a magazine cover. It does not need to explain everything. It needs to give enough useful context to earn the next scroll.
A good hero section answers three questions: what is this, is it for me, and what do I do next. If your homepage answers those, you have done most of the work.
What to include in a hero section
For a small business, the hero has a short list of parts. Each one has a job. According to GoDaddy’s homepage guidance, the essentials are a value-focused headline, a short supporting line, a relevant image or video, one prominent action-oriented button, and a believable trust cue when you have one.
The headline
The headline carries the most weight. It should say what you offer, who you serve and why someone should choose you. Clever wording that hides the service makes the visitor work, and most won’t.
The supporting line
One or two short sentences that add the detail the headline cannot hold: where you work, how you work, or what makes the result different. Keep it to what a visitor can read in a breath.
The call to action
One primary button. Place it above the fold, give it a contrasting color, and use wording that describes the action, like “Book an appointment” or “Get a free quote”. Generic labels like “Submit” or “Click here” do not tell the visitor what happens next.
A secondary button is fine when a second audience needs it, such as “See our work” next to “Book a call”. Make it visually quieter so the main action stays obvious. For more on writing buttons that get clicked, see this guide on writing compelling CTAs.
The visual
The image or video should show the real thing: your work, your space, your team, or the result your customer gets. Generic stock imagery tells visitors nothing about you. If you are planning a photo shoot, our piece on why professional photos matter for your website explains what to capture.
A trust cue
A short line such as a review count, a client logo row, a years-in-business figure or a certification works well, but only if it is true and you can back it up. Place it near the button, small and quiet. If you have nothing believable to show yet, leave it out rather than fill the space.
Hero headline examples that work
A useful headline follows a simple pattern: what you do + who it is for + the benefit or difference. GoDaddy’s own example for a local bakery is “Fresh, handcrafted bread delivered to your door every morning”. It names the product, the way it is made and the convenience in one line.
Here are original examples built on the same pattern, written for businesses like the ones we work with in Arizona. They are patterns to adapt, not claims about any real company.
| Business | Weak headline | Stronger headline |
|---|---|---|
| Landscaper in Gilbert | Where Outdoor Dreams Come True | Low-water landscape design for Gilbert homes, built to handle Arizona summers |
| Accountant in Tempe | Your Partner in Success | Tax and bookkeeping for Tempe small businesses, handled so you can focus on work |
| Dental office in Scottsdale | Smile Bright | Family dentistry in Scottsdale with same-week appointments |
| Boutique agency | Creative Solutions for a Digital World | Custom websites and branding for small businesses that want to look established |
Notice what changed. The weak versions could belong to any company in any city. The stronger ones name a place, a customer and a result, so a visitor can tell in one glance whether they are in the right spot.
Hero copy that supports the headline
The line under the headline should add one fact the headline lacks. For the accountant, it might be: “Monthly bookkeeping, quarterly estimates and year-end filing from one local team.” Then the button: “Book a free consultation.”
If you write service pages for a trade business, these service page design templates show how the same clarity carries from the hero into the rest of the page. We also cover the copy side in our guide to service page copy that converts.
How tall should a hero section be?
There is no single correct size. LogRocket notes that hero size depends on screen constraints, the product header, the type of hero and design preferences. A hero may cover part of the above-the-fold area, fill it, or extend past it.
For most small business sites, we suggest a hero that fills most of the first screen but not all of it. Nielsen Norman Group advises avoiding full-screen hero content and making sure additional content peeks above the fold, so visitors are led to keep scrolling. A full-screen block with nothing below it can look like the page ends there.
A practical way to set it up:
- Design for a common laptop screen first, then check a large desktop monitor and a phone.
- Set the hero height relative to the screen rather than as a fixed pixel number, so it adapts.
- Keep the headline and button inside the first screen at every size.
- Let the top edge of the next section show, with a card row, a logo strip or a line of text.
- Test with the browser bar and cookie banner visible, since they take space real visitors lose.
Desktop and mobile best practices
Most of your visitors will likely see your site on a phone, so the mobile hero is not an afterthought. Its guidance is simple. Stack columns vertically, reduce heading sizes, keep the headline, subheadline and button above the fold, and hide the image if it pushes the button below it.
On desktop
- Use the width. A split layout, with text on one side and an image on the other, uses a wide screen well.
- Keep line length comfortable. A headline that stretches across the full width is hard to read.
- Keep navigation simple. Too many menu items compete with your button.
- Make sure text has strong contrast against the image behind it.
On mobile
- Put the headline first, then the supporting line, then the button.
- Make the button large enough to tap with a thumb and keep space around it.
- Compress or crop the image, and drop it when it crowds out the action.
- Avoid auto-playing video that slows the first load.
The broader rules for sites that work well on every device are in our website design best practices guide.
Hero layouts that suit small business websites
There are a handful of layouts that come up again and again because they work. Pick the one that fits what you sell and what your visitor needs first.
Split layout. Text and button on the left, a photo on the right. It suits service businesses that want to show a person, a space or a finished job next to a clear message. It is the most flexible choice and adapts well to mobile.
Full-width image with overlaid text. A single strong photograph with the headline on top. It works for restaurants, venues, real estate and anything where the place itself sells. It needs a good photo and a dark overlay or panel for readable text.
Text-led hero. A large headline, short line and button on a clean background. This suits professional services where the message matters more than the picture, and it loads fast.
Hero with a form. A short form beside the headline, such as name and phone for a quote request. It suits businesses where a call or estimate is the goal. Keep the fields to the minimum you need.
Hero with proof. Any of the above with a row of review stars, client logos or credentials underneath. It helps newer businesses look established, as long as the proof is real.
For more homepage structures and what follows the hero, see our modern business website layout examples and the local business website must-haves checklist.
Common hero section mistakes
- A vague headline. If the first line could fit any competitor, rewrite it with a place, a customer or a result.
- Too many buttons. Three equal choices leave visitors with no clear path. Give one action the lead.
- Hidden or low-contrast buttons. If the button blends in, visitors will not find it.
- A heavy image or video. Slow loading is the fastest way to lose someone before they read a word.
- Sliders with several messages. Each slide dilutes the others. One message, done well, beats four.
- Text over a busy photo. If you have to squint, so does your customer.
- Ignoring mobile. Check the phone version before you approve the desktop one.
Hero section or landing page: what is the difference?
The two terms describe different things. A hero section is one block, the top of a page. A landing page is a whole page built for a single goal, such as booking a call or requesting a quote. Every landing page has a hero at the top, but your homepage, service pages and about page can have heroes too.
The difference changes what you write. A homepage hero introduces the business to many kinds of visitors. A landing page hero speaks to one audience with one offer, and everything below it supports that single action.
Our perspective
I build every hero section from scratch, because the first screen of a site is where a small business either looks established or doesn’t.
Templates make it easy to drop in a big photo and a clever line. They don’t know what you sell, who your best customers are or what makes your work different. That is why we start with strategy before design: who you want to reach, what they need to know and what you want them to do.
When you work with us, you work directly with me, the creative director, from start to finish. The hero, the type, the photography direction and the copy all come from the same plan. Everything we create is yours, with no licensing strings and no vendor lock-in, so your site can grow as your business does.
A good hero is not decoration. It is the clearest sentence about your business, supported by the right image and one obvious next step.
Charles
Get a hero section built around your business
If your homepage doesn’t explain what you do in the first few seconds, it is worth fixing before anything else. We design custom websites for small businesses, with the hero, headline and layout shaped around your customers and goals, not a pre-built theme.
See our web design and development services, or if you already have a site that isn’t pulling its weight, our website redesign work starts with the first screen. You can also read why professional website design benefits small businesses, or learn how to make your website look more professional fast. To talk through your project, start at charles-creative.com.
A quick hero section checklist
Before you publish, run your hero through these questions:
- Can a stranger tell what you do within five seconds?
- Does the headline name a customer, a place or a result?
- Is there one clear primary button with action wording?
- Does the image show something real about your business?
- Is any trust cue true and easy to verify?
- Do the headline and button sit on the first screen on a phone?
- Does the next section peek into view?
- Is the text readable against the background?
- Does the page load quickly on a mobile connection?
If you can answer yes to all nine, your hero is doing its job.
FAQ
What should be in a hero section?
A specific headline, a short supporting line, a relevant image or video and one action-oriented button. Add a believable trust cue, such as reviews or credentials, when you have one. Together they should tell visitors what you offer, who you serve and what to do next.
Why do they call it a hero section?
The name comes from the “hero image”, the large, dominant visual at the top of a page, much like a magazine cover. It is the star of the page, the first thing visitors see, and it sets the tone for everything below it.
What is the recommended size for a hero section?
There is no fixed number. Size depends on the screen, the header and the type of hero. A good rule is to fill most of the first screen while letting a bit of the next section show, so visitors know to scroll. Always check it on a phone.
What is the difference between a landing page and a hero section?
A hero section is the top block of any page. A landing page is a full page built around one goal and one audience. Every landing page has a hero, but a hero is only one part of a page.
Sources
- Website Hero Section Best Practices + Examples (Prismic)
- Website Hero Section: Anatomy, Patterns, Examples (AIDesigner)
- Tips for Designing Above the Fold Content That Converts (Mailchimp)
- Small business homepage design: 10 must-have elements (GoDaddy)
- What should be in a hero section? (LogRocket)
- The Illusion of Completeness (Nielsen Norman Group)
- Above the Fold Design: What Visitors See First (Canvas Builder)
- Service page design templates (Vaultio)
- How to Create Compelling CTAs