A homepage hero section is the block at the very top of your home page: a headline, a line of support, one clear button and a picture that proves the point. It works when a stranger can read only that block and know what you sell, who it is for and what to do next. For a Cincinnati small business, that block is usually the difference between a call and a closed tab. We build hero sections by hand into every site we make, and the rules below are the ones we apply.
TL;DR
- Your hero has one job: say what you do, for whom, and give one obvious next step.
- Use five parts: headline, subheadline, primary button, a real image, and a small piece of proof.
- Keep the headline short and specific, and name the service and the place, such as "Roof repair in Cincinnati."
- Treat the hero image as a speed decision: size it for each screen, never lazy-load it, and set its dimensions.
- Check it on a phone first, because that is where many local searches land.
Table of Contents
- What a hero section is, and what it is not
- Above the fold: what it means on a real screen
- The five parts of a hero that works
- Hero section examples you can adapt
- Hero image best practices: size, speed and format
- Homepage design essentials beyond the hero
- A checklist to test your own hero
- Common hero mistakes
- Promo: a hero built into the site, not bolted on
- Our perspective
- FAQ
- Sources
What a hero section is, and what it is not
The hero is the full-width area at the top of a page, visible before anyone scrolls. It holds a headline, supporting text, a call to action (the button or link that asks for the next step) and a visual. Every visitor sees it first, which is why it carries so much weight.
People often confuse it with a landing page. They are different things. A homepage introduces the business, serves every kind of visitor and points toward everything you offer. A landing page is stripped down to focus on a single goal, such as capturing a lead or driving a sale. Your homepage hero can borrow the landing page's discipline of one message and one main action, but it still has to welcome both the customer who is ready to book and the one who is only looking around.
If you want to see how a page built around one local goal differs, our guide to local landing pages that rank and convert covers it.
Above the fold: what it means on a real screen
"Above the fold" is the part of a page you can see without scrolling. The term comes from newspapers, and on the web the fold moves with every device. A large desktop monitor shows far more than a phone held upright.
The Nielsen Norman Group's homepage guidance gives two rules that fit together. Put the most important content as high on the page as you can, on every device size. Then design the layout so it signals that more content continues below, so nobody thinks the page ends at the hero.
In practice:
- Decide the one thing a visitor must learn before scrolling. That is your headline.
- Decide the one thing they must be able to do before scrolling. That is your button.
- Let the next section peek into view on a phone, so a visitor can tell the page keeps going.
- Test on the smallest phone you can find, not only on your office monitor.
Our article on mobile-first web design for Cincinnati businesses explains why the phone view should be designed first.
The five parts of a hero that works
Most strong heroes use the same parts in the same order. The order matters because it matches how people read: the biggest thing first, the action next.
1. The headline
The headline says what you sell and who it is for. A useful test: if someone read only the headline, would they know exactly what you do? Clever slogans fail that test. Plain statements pass it.
Weak: "Excellence in every detail."
Strong: "Furnace repair and replacement in Cincinnati, same-week appointments."
Only use a promise like "same-week" if you really deliver it. Keep the headline to a single line or two on a phone. A common range is roughly six to ten words, and the headline should be the largest text on the page.
Headline patterns that work for local businesses:
- Service plus place: "Residential painting in Hyde Park and Mt. Lookout."
- Outcome plus service: "A dry basement, guaranteed in writing." (Only if you give that guarantee.)
- Who you help plus what you do: "Bookkeeping for Cincinnati restaurants and bars."
- Question your customer already asks: "Need a plumber tonight?" followed by a subheadline that answers it.
2. The subheadline
This is one or two sentences that add context: what is included, how it works, or what makes you different. It should be clearly secondary in size, with the headline noticeably larger. One published design guide suggests a ratio of at least 2:1 between them, with headlines around 48 to 72 pixels on desktop and subheadings around 18 to 24 pixels. Treat that as a starting point, since your font and layout may need different numbers.
Use the subheadline for the details that would clutter the headline: your service area, your hours, your licensing, or your turnaround.
3. The primary button
One action should be impossible to miss. Use a verb and a specific outcome: "Get a free estimate," "Book a table," "Call (513) 555-0100." Use a color that contrasts strongly with the background and with the rest of the hero. Avoid vague labels like "Submit" or "Learn more" for your main action.
A hero meets two visitors at once: the one who arrived ready to buy and the one who is still curious. A single button serves the first and leaves the second with nothing to do but scroll or leave. A quieter secondary link, such as "See our work" or "View pricing," gives the curious visitor a path. Keep it visibly smaller than the main button so it never competes.
On a phone, a tap-to-call button is often the best primary action for a service business. Place it where a thumb can reach it.
4. The image
The picture should explain the offer, not decorate the page. The Nielsen Norman Group says homepage imagery should be informative and relevant to the brand. Its example contrasts generic water imagery with a photo of an oil company's own facility.
For a local business, that means real photos wherever you can get them: your crew in front of your truck, your finished kitchen, your storefront on a recognizable street, your team at work. Generic handshake photos tell a visitor nothing and could belong to any company in any city.
A quick check for any hero image:
- Does it show what you sell or who you serve?
- Would a visitor know this is your business and not a template?
- Does the text stay readable when it sits on top of it?
- Does it load fast on a phone?
5. A small piece of proof
A row of star ratings, a count of reviews, a licensing badge or the logos of a few well-known local clients tells a visitor you are real. Keep it quiet, a single line under the button, so it supports the action instead of competing with it. Use only proof you can back up, such as your actual Google rating and review count.
Hero section examples you can adapt
These are patterns, not copied pages. Fill in your own facts.
Home service contractor. Headline: "Roofing for Cincinnati homes, repaired right the first time." Subheadline: "Licensed and insured. Free inspections across Hamilton County." Button: "Get a free estimate." Secondary link: "See recent roofs." Image: your crew on a real job. Proof: your Google rating and review count.
If you run a trade business, our piece on home service website design for Cincinnati contractors goes further into what these pages need.
Restaurant or shop. Headline: "Fresh bread, baked in Over-the-Rhine since the morning." Subheadline: "Open daily. Order ahead for pickup." Button: "Order for pickup." Secondary link: "See the menu." Image: the counter or the product, shot in your own space.
Professional service. Headline: "Tax preparation for Cincinnati small businesses." Subheadline: "One flat price, filed on time, with a person who knows your books." Button: "Book a consultation." Secondary link: "How pricing works." Image: you or your team, not a stock photo of a calculator.
Motorcycle shop or retailer. A retailer with a clear specialty can lead with what it does that nobody else nearby does. Our Cin City Moto case study and the Tuff Industries case study show how local businesses present themselves on their own sites.
The common thread in strong examples: they are immediately relevant, explain the offer, use purposeful imagery, set a clear visual order and give an obvious next step. They also show specific offerings instead of broad terms. "Kitchen remodeling" beats "Quality home solutions."
Hero image best practices: size, speed and format
The hero image is usually the heaviest thing on the first screen, and speed is part of design. Google measures how quickly the largest visible element loads, a metric called Largest Contentful Paint (LCP). web.dev notes that hero images are commonly the LCP element, and it recommends explicit width and height attributes so the page does not jump around as the image loads.
Here is what that means for your hero.
Send each phone a phone-sized image. Serving a desktop-sized image to a mobile device can use two to four times more data than necessary. The fix is to offer several versions of the image and let the browser pick. The same guidance notes that there is no single right number, but three to five sizes are commonly served. If you want a deeper walkthrough, this guide on optimizing images for website performance covers sizing and responsive delivery.
Never lazy-load the hero. Lazy loading delays an image until the visitor scrolls near it, which suits images further down. web.dev advises against lazy-loading above-the-fold hero images, because it delays the request and can hurt the loading of the content visitors see first. Defer everything below the hero instead.
Resize and compress before upload. A photo straight from a phone camera can be several megabytes. Resize it to the largest size it will actually display and compress it. Our free image resizer works in your browser, and the free image tools page also covers compressing and converting formats.
Keep text as text. Do not bake your headline into the picture. WCAG guidance says to use real text instead of images of text when the same look is possible, because real text can be resized and restyled by the reader. Real text is also easier for search engines to read.
Make the text readable over the photo. Text and controls over an image need enough color contrast, and the W3C's carousel guidance notes that captions and controls placed above or below an image are easier to perceive. A dark overlay on the photo, or a solid panel behind the headline, solves most problems.
Go easy on motion. Auto-playing video and rotating slides slow the page and distract from the one action you want. Rotating carousels also hide most of their slides from visitors who never wait for them. If you use video, offer a way to pause it. A single strong still image is the safer choice for most local businesses.
Why speed pays
Speed is not only a technical point. In web.dev's Vodafone case study, resizing and optimizing the hero image, avoiding loading images not yet visible and other rendering changes produced a 31% LCP improvement and an 8% sales increase. Your results will differ, but the direction is clear: a faster first screen helps the visitor and the business.
Homepage design essentials beyond the hero
The hero opens the conversation, and the rest of the homepage has to keep it going. A few rules from the Nielsen Norman Group's homepage guidance:
- Say clearly what the organization does and the value it offers.
- Use specific examples of what you offer, not only categories.
- Make important actions visually prominent.
- Keep the page simple and limit motion.
- Make content available quickly.
For a small business, a solid homepage below the hero often runs in this order:
- Services, three to six, each with a short description and a link to its own page.
- Proof: reviews, before-and-after photos, certifications, completed jobs.
- Service area: the neighborhoods and cities you actually cover.
- How it works: three simple steps from first call to finished job.
- A second call to action: the same button as the hero, repeated at the bottom.
- Contact details: phone, address and hours, consistent with your Google Business Profile.
That order answers the questions a visitor asks in sequence: what do you do, can I trust you, do you serve my area, what happens next, and how do I reach you.
A checklist to test your own hero
Run through this in ten minutes with a phone and a friend who does not know your business.
- Five-second test. Show the page for five seconds, then hide it. Can your friend say what you sell and where?
- Headline test. Read only the headline. Does it name the service, the customer or the place?
- One main action. Is there a single button that stands out, with a verb in it?
- Phone test. Are the headline and button both visible without scrolling on a small phone?
- Image test. Is it a real photo of your work, your team or your location?
- Contrast test. Is the text easy to read on top of the image in bright daylight?
- Speed test. Does the first screen appear quickly on cellular data?
- Proof test. Is there at least one real signal of trust within the first screen?
Most weak heroes fail the first two. Fix the words before you touch the design.
Common hero mistakes
- Vague slogans. "Your partner in success" fits every business in the country.
- Three or four equal buttons. When everything is a priority, nothing is.
- A stock photo of a smiling team. Visitors have seen it before and discount it.
- A heavy slider or autoplay video. It slows the page and hides the message.
- Headline in an image. It cannot be resized or read aloud by assistive tools and is weaker for search.
- No location. For a local business, leaving out the city throws away your best signal for local searches.
- A button that says "Submit." Tell people what they get.
Promo: a hero built into the site, not bolted on
If you would rather not wrestle with layout, image sizes and load times yourself, we build the whole thing for you. Our Website plan is $99 per month with no upfront development cost. Every site is hand-coded, not built from themes or page builders, and it includes hosting, SSL, your domain, maintenance and unlimited content updates, so changing your hero headline next season does not cost extra. If you already have a site that is not pulling its weight, the website redesign is also $99 per month.
If you want the first screen of your homepage to tell Cincinnati customers exactly what you do, see how our plans work.
Our perspective
We hand-code every site, and the hero section is where that choice shows most. A theme or page builder ships with a hero layout built for everyone, and a layout built for everyone rarely says anything specific about a roofer in Western Hills or a bakery in Over-the-Rhine.
When we write a hero, we start with the sentence a customer would say out loud when they call you, and we build the headline from it. Then we make the page light enough that it appears fast on a phone, because most local customers are searching from one.
The hero is also never finished. Seasons change, you add a service, a promotion ends. That is why our plans include unlimited content updates: you should be able to change the first thing your customers read without watching a meter run. A small business gets more from a page it can keep sharp than from a page that was perfect on launch day.
And when local search is the goal, the hero sets up everything under it: the service, the city and the action, all visible in the first screen. We would rather a visitor understand you in five seconds than admire you for thirty.
Yoshua
FAQ
What is a hero section on a home page?
It is the large block at the top of a page that visitors see before they scroll. It usually holds a headline, a short supporting line, a button and an image or video. Its job is to make clear what you offer and what to do next.
What is the difference between a landing page and a hero section?
A landing page is a whole page built around one goal, often for an ad campaign. A hero section is only the top block, and it appears on both landing pages and homepages. On a homepage the hero has to welcome many kinds of visitors, while a landing page hero can push a single action.
How do I make a hero section for a website?
Write a specific headline that names your service and your place, add one or two sentences of support, and choose one main button. Pair them with a real photo sized correctly for each screen, then check it on a phone. If you want it done for you, our web design plans include the build, hosting and ongoing updates.
How long should a hero headline be?
Aim for a single clear statement, commonly around six to ten words, short enough to fit in two lines on a phone. Put the service and, for local businesses, the city in it. If it needs more room, move the detail into the subheadline.
Should my hero use a video or a slider?
For most local businesses, a single strong photo does the job better. Video and sliders add load time and can bury your message. If you do use video, give visitors a way to pause it and keep the headline as real text on top.
Sources
- Homepage Design: 5 Fundamental Principles, Nielsen Norman Group
- What Is a Landing Page? Search Engine Land
- Serve responsive images, web.dev
- Lazy load images and iframe elements, web.dev
- Web Vitals and CSS, web.dev
- Vodafone case study, web.dev
- Understanding WCAG, images of text
- How to Optimize Images for Better Website Performance