How to Design a Homepage Hero Section in WordPress for Beginners

The hero section is the strip of content at the very top of your homepage — the first thing a visitor sees before they’ve scrolled a single pixel. Get it wrong and people bounce within seconds, unsure what your site even does. Get it right and it does the work of an elevator pitch, a navigation cue, and a call to action all at once.

In my experience, most beginner hero sections fail for one of two reasons: either there’s too much going on — a huge background video, three competing buttons, a wall of text — or there’s too little, just a vague tagline with nothing telling the visitor what to do next. This guide covers how to build a hero section in WordPress’s block editor that avoids both problems, and hits Google’s actual published speed threshold in the process.

Quick Answer

A good hero section uses the Cover block or Group block in WordPress to combine a background image, a short headline (one sentence, not a paragraph), a supporting line, and a single primary button. Keep the whole thing visible without scrolling on both desktop and mobile, and compress the background image so it doesn’t slow down the page. The hero image is almost always the largest element on your homepage, and Google’s own documentation states that a Largest Contentful Paint (LCP) under 2.5 seconds is required for a “good” score — measured at the 75th percentile of real visitor page loads, not a single lab test.

Why This Matters

Visitors decide whether to keep reading within the first few seconds of landing on a page, and for most homepages that decision is made entirely inside the hero section — before any scrolling happens. A clear headline that states what you do, for whom, and a button telling them what to do next removes the guesswork that causes people to leave.

There’s a technical reason to get this right too. The hero background image is usually the single largest visual element above the fold, which means it’s frequently what Google measures as the page’s Largest Contentful Paint. Google’s current published thresholds are specific: LCP under 2.5 seconds is “good,” 2.5 to 4 seconds “needs improvement,” and anything above 4 seconds is “poor.” A heavy, uncompressed hero image can push a page from the first bucket into the second or third on its own, even if every other part of the page is fast — and Core Web Vitals scores are measured as one of Google’s page experience signals, not just a nice-to-have performance metric.

Building the Hero Section, Step by Step

1. Write a One-Sentence Headline

Your headline should say what you do and who it’s for in a single sentence — something a visitor can read in under two seconds. Avoid clever wordplay or industry jargon here; save personality for the About page. A plumber’s site should say “Same-Day Plumbing Repairs in [City],” not “Flowing Solutions for Modern Living.” Our guide to writing homepage copy covers headline structure in more depth if this is the part you’re stuck on.

2. Add One Supporting Line

Below the headline, add a single sentence of supporting detail — what makes you different, or a concrete number that builds credibility (years in business, clients served, response time). Keep it to one line. This is not the place for your full pitch; it’s the place for the one detail that makes someone want to read the next section.

3. Choose and Prepare the Background Image, With the 2.5-Second Budget in Mind

In the block editor, add a Cover block and upload a background image at roughly 1920×1080px — any larger just adds file size without a visible quality gain on most screens. Compress it to under 200KB using a tool like Squoosh or TinyPNG before uploading, and export as WebP where your theme supports it. On an average broadband connection, a 200KB WebP hero image typically loads well inside Google’s 2.5-second LCP threshold on its own; a multi-megabyte uncompressed JPEG straight from a camera routinely blows past it before the rest of the page has even started rendering. Our guide to choosing website images and visuals covers picking an image that actually fits your brand rather than generic stock photography.

4. Check Text Contrast Over the Image

Inside the Cover block’s settings, add a dark or light overlay (typically 30–50% opacity) between the image and the text so your headline stays readable regardless of what’s happening in the photo behind it. Aim for at least a 4.5:1 contrast ratio between text and background — the WCAG contrast guidelines lay out the exact ratios for the AA conformance level, and most browser dev tools will check this for you automatically. A hero section that looks great on your monitor but fails contrast on a phone in direct sunlight is a common, easily avoidable mistake.

5. Add a Single Primary Button

Add one clear call-to-action button inside the Cover block — “Get a Quote,” “Book a Call,” “Shop Now” — whatever matches the one action you most want a new visitor to take. Resist adding a second, equally prominent button next to it; competing calls to action split attention and measurably reduce clicks on both. If you want a secondary option, style it as a plain text link rather than a second button so the visual hierarchy stays clear. Our guide to designing website calls to action covers button wording and placement in more detail.

6. Test on Mobile Before Publishing

Most homepage visits now happen on a phone, so preview the hero section at mobile width before publishing — the block editor’s device preview toggle handles this. Check specifically that the headline doesn’t wrap awkwardly, the button doesn’t get pushed off-screen, and the whole section fits without the visitor needing to scroll just to see your call to action.

7. Measure Your Actual LCP After Publishing

Once the page is live, check its real LCP score through PageSpeed Insights or the Core Web Vitals report in Search Console. If your hero image is the element flagged as the LCP candidate and the score sits above the 2.5-second good threshold, that’s your direct signal to compress the image further, reduce its dimensions, or switch it to a more efficient format — don’t guess at whether the image is the bottleneck when the report tells you outright.

Practical Tips

• Keep the hero section’s total height to roughly 60–80% of the viewport on desktop — filling the entire screen pushes useful content too far down and increases the chance of a visitor leaving before they scroll.
• If you’re using a video background, always provide a static image fallback for mobile. Autoplaying video is one of the most common causes of slow mobile load times on homepages I’ve reviewed, and a video LCP candidate almost never fits inside the 2.5-second budget on a mobile connection.
• Match the button colour to your site’s accent colour, not just whatever colour looks nice against the photo — consistency here builds trust as visitors move to other pages.
• Re-test your hero section any time you change your logo or brand colours; it’s the section most likely to look outdated first.

Common Mistakes

• Uploading an uncompressed, full-resolution photo straight from a camera. This is the single biggest cause of a slow-loading homepage, and the most common reason a hero section’s LCP lands in Google’s “poor” bucket above 4 seconds.
• Writing a headline that’s clever instead of clear. If a visitor has to think about what you do, you’ve already lost most of them.
• Adding multiple competing buttons. “Learn More,” “Sign Up,” and “Contact Us” side by side forces a decision the visitor didn’t come to make.
• Skipping the overlay and hoping the text stays readable. Background photos change; the overlay is what keeps your headline legible no matter what image gets swapped in later.
• Publishing without checking the actual LCP number. A hero section can look fast on a fast office connection and still fail the 75th-percentile real-visitor threshold Google actually measures.

When to Use This vs Alternatives

A full-width image or video hero works well for service businesses and portfolios where a strong visual builds immediate trust. For content-heavy sites like blogs or documentation, a simpler text-only hero with no background image often performs better, since it loads instantly, sits comfortably inside the 2.5-second LCP budget with room to spare, and gets out of the way of the content readers actually came for. If you’re still working through the rest of your homepage, see the step-by-step guide to building a WordPress website for how the hero section fits into the bigger picture.

Conclusion

Build your hero section around one headline, one supporting line, and one button — then check it loads fast and reads clearly on a phone before you publish. Once it’s live, confirm the real LCP number in Search Console rather than assuming compression alone got you under Google’s 2.5-second threshold.