I have built over 60 WordPress sites in the Sacramento area, and the homepage header is where most of them win or lose visitors. Google’s own research shows that 53% of mobile users abandon a site that takes longer than 3 seconds to load, but speed is only half the equation. The other half is what visitors see in that first viewport. A clear, structured hero section keeps bounce rates low and click-through rates high.
Here is exactly how I lay out homepage headers in WordPress and which blocks go where.
The Header Template in Site Editor
WordPress 6.5+ Site Editor gives you direct control over the header template part. This is where your logo, navigation menu, and optional utility bar live. I keep headers to one row on desktop with a sticky option enabled through the Group block’s position settings. Two rows (utility bar plus main nav) work for e-commerce sites, but service businesses should stick with one.
The header template part applies site-wide, so any changes here update every page. That consistency matters for brand trust.
The Hero Section: Cover Block vs. Hero Patterns
Below the header, the hero section is the first piece of page-specific content. WordPress ships with built-in hero patterns under Patterns > Featured, and they are a strong starting point. For custom builds, I use the Cover block with a background image and an inner Group block containing a heading, a short paragraph, and one or two Button blocks.
The hierarchy I follow for every hero section:
- H1 headline that states the core value proposition in under 10 words
- One supporting sentence with a specific number or outcome (e.g., “147 Sacramento businesses served since 2018”)
- Primary CTA button linking to your most important conversion page
- Optional secondary link for visitors who need more information first
Nielsen Norman Group found that users spend 57% of their viewing time above the fold. That means your hero section carries most of the weight for first impressions. Every element needs to earn its place.
Background Images and Performance
Cover block images should be 1600px wide, compressed to WebP or AVIF, and under 200KB. WordPress 6.5 handles lazy loading for below-the-fold images automatically, but hero images load eagerly by default since they are in the first viewport. I always add a semi-transparent overlay (rgba black at 40-50%) to ensure text readability regardless of the background image.
For sites where I need higher conversion rates on the homepage, I test a solid-color hero against an image hero. Solid backgrounds with bold typography load faster and often outperform image-heavy designs on mobile.
Putting It Together
The best WordPress homepage headers follow a predictable structure: sticky header with clear navigation, then a hero section with one focused message and one primary CTA. Following homepage layout best practices keeps the entire page working as a funnel, not just the top section.
What is a hero section in WordPress?
A hero section is the large, prominent area at the top of your homepage below the navigation. In WordPress, you build it with the Cover block or a hero pattern from the Pattern Library. It typically contains a headline, supporting text, and a call-to-action button.
Should my WordPress hero section have a background image?
Not always. Image backgrounds work well for visual brands (restaurants, photographers, real estate), but service businesses often convert better with solid-color backgrounds and strong typography. Test both and check your analytics.
How do I edit the header in WordPress Site Editor?
Go to Appearance > Editor > Patterns > Template Parts > Header. You can modify the logo, navigation menu, colors, and layout directly. Changes apply across every page on your site.
Ready to build a homepage that actually converts? I help Sacramento businesses get this right. Let’s talk.