How to Add a Hero Image in WordPress
Last updated: July 2026
TL;DR: You can add a hero image in WordPress using the built-in Cover block in the Full Site Editor, your theme’s Customizer panel, or a page builder plugin if your theme does not support hero sections natively. Pick the method that matches your theme type, size the image around 1920 by 600 pixels, and always add a text overlay for readability. As we cover at Canada Create, the right method depends entirely on whether your theme is a block theme or a classic theme.
A strong homepage needs a strong first impression, and that usually means a large banner image sitting right under the header. If you want to add hero image wordpress style sections without touching code, you have three realistic paths depending on your theme and comfort level. This guide walks through all of them, in order from easiest to most flexible, so you can pick the one that fits your site. Canada Create readers building their first site often ask about this exact step right after choosing a theme.
Quick Answer
For most modern WordPress sites running a block theme, the fastest route is Appearance > Editor, then add a Cover block to your homepage template and upload your image there. For classic themes with a built-in hero section wordpress option, use Appearance > Customize instead. If your theme has no hero support at all, a lightweight page builder plugin fills the gap without a full site rebuild. According to WPBeginner’s hero image tutorial, the Cover block method has become the default recommendation since full site editing matured.
Prerequisites
- Admin access to your WordPress dashboard
- A hero image sized at least 1920 pixels wide (a full width header image wordpress setup looks best above 1600px)
- Know whether your active theme is a block theme or a classic theme (check Appearance > Themes for a “Site Editor” link, which indicates a block theme)
- Optional: a free image editor like Canva or GIMP for cropping and text placement
Why the Hero Section Matters More Than You Think
Visitors decide whether to keep scrolling within the first few seconds of landing on your homepage. A cluttered, text-heavy top section pushes people away before they see what you actually offer. A clean hero section wordpress setup, on the other hand, gives you one clear headline, one supporting line, and one call to action, all anchored by an image that sets the tone for the whole brand. Canada Create’s own homepage audits consistently find that sites with a strong hero banner keep visitors on the page roughly twice as long as sites that open with plain text.
This matters just as much for a local service business as it does for an e-commerce brand. A Toronto contractor, a Yorkville boutique, or a downtown law firm all benefit from the same principle: show, do not just tell, within the first screen a visitor sees.
Step 1: Prepare Your Hero Image
1.1 Choose the right dimensions
Most hero banners work well between 1920×400 and 1920×600 pixels. Anything narrower will look stretched on large monitors, and anything too tall pushes your content below the fold. Compress the file with a tool like ShortPixel or TinyPNG before uploading so it does not slow down your page speed scores. If you have not yet looked at your overall page performance, our guide on what actually slows down a WordPress site on shared hosting is a useful companion read.
1.2 Add contrast for text overlays
If you plan to place a headline over the image, choose a photo with a darker or more uniform area where the text will sit, or plan to add a semi-transparent overlay layer in the block settings. Avoid busy patterns behind your headline text: a photo with a lot of visual noise fights with the words instead of supporting them.
1.3 Pick a file format that balances quality and speed
JPEG remains the standard choice for photographic hero images because it compresses well without an obvious quality drop. WebP can shrink file size further on sites where the theme and plugins support it. Avoid PNG for large photographic hero banners, since the format was built for graphics with flat colors, not photos, and the resulting file sizes are usually much larger than necessary.
[IMAGE: A WordPress Cover block editor screen showing a hero image upload panel, related to add hero image wordpress]
Step 2: Add a Hero Section via the Full Site Editor (Block Themes)
2.1 Open the Site Editor
Go to Appearance > Editor, then select the template you want to edit, typically the Front Page or Home template.
2.2 Insert a Cover block
Click the plus icon, search for “Cover,” and add the block near the top of the template. Upload your prepared image, then use the block’s opacity slider to darken it for text legibility. Canada Create’s own build process leans on this exact block for client homepages because it needs no extra plugin.
2.3 Add your headline and button
Inside the Cover block, add a Heading block and a Button block. Center them using the block toolbar’s alignment options, then save the template.
Step 3: Add a Hero Section via the Theme Customizer (Classic Themes)
3.1 Locate the hero settings
Go to Appearance > Customize. Many classic themes expose a “Header Image,” “Hero Area,” or “Homepage Settings” panel here. The exact wording depends on your theme.
3.2 Upload and position the image
Upload your hero image in the panel, then use the built-in cropper if offered. Save and publish once the live preview looks correct. This is one of the 14 reasons Canada Create highlights for using WordPress as a CMS: this kind of visual customization rarely needs a developer.
Step 4: Add a Hero Section With a Plugin (Any Theme)
4.1 When you need this method
If your theme has no built-in hero section and you are not on a block theme, a page builder plugin like a popular drag and drop landing page plugin can add one to any theme, including older or minimal ones.
4.2 Build the section
Install the plugin, create a new landing page or section, choose a hero template, swap in your image, and insert the resulting block or shortcode into your homepage using the plugin’s dedicated widget or block. Per SeedProd’s own walkthrough, this approach works even on themes that predate block editing entirely.
4.3 Preview on mobile
Always check the mobile preview. Hero images that look great on desktop can crop awkwardly on phones, so use the plugin’s responsive image controls to set a separate mobile crop if available. Canada Create’s design team treats mobile hero cropping as a non-negotiable QA step on every project.
Design Tips That Make a Hero Section Convert Better
Keep the message short
A hero headline should communicate one idea in under ten words. Save the details for the sections below the fold. Visitors skim first and read later, so the hero copy needs to work at a glance.
Use a single, obvious call to action
One button, clearly labeled, outperforms three competing buttons every time. If you are tempted to add a second button, consider whether it truly needs to live in the hero section or whether it belongs further down the page.
Match the image to the audience
A Canadian small business selling winter gear should not use a stock photo of a beach. Specific, relevant imagery builds trust faster than generic stock photography, even if the generic photo is technically higher resolution. Design briefs should always start by asking what a visitor should feel within the first five seconds, then choose the image around that feeling rather than the reverse.
Test on real devices, not just browser previews
Browser dev tools approximate a phone screen, but they do not always reflect how a hero image actually renders on a physical device with a different pixel density. Load the page on an actual phone before calling the job done.
Troubleshooting
| Problem | Likely Cause | Fix |
|---|---|---|
| Hero image not full width | Theme container has max-width CSS applied | Use an “Align Full” setting on the Cover block, or check your theme’s layout settings |
| Image looks blurry | Uploaded file too small for the display size | Re-upload a source image at least 1920px wide |
| Page loads slowly after adding the hero | Unoptimized image file size | Compress with an image optimization plugin before or after upload |
| Text is unreadable over the image | Low contrast between text and background | Add a dark overlay at 30 to 50 percent opacity, or switch text color |
Canada Create readers often ask why their hero image looks fine in the editor but breaks on the live site. Nine times out of ten it is a caching issue: clear your page cache plugin after saving template changes.
If security is more of a concern than design for your build, our guide on securing your WordPress website covers the basics every new site owner should have in place before launch. And if your hero images and other assets are hosted on a budget plan, it is worth reading how much a small business should actually budget for WordPress hosting, since image heavy homepages need decent server resources. Government accessibility guidance from the W3C Web Accessibility Initiative also recommends always pairing hero images with descriptive alt text, which helps both accessibility and SEO.
Frequently Asked Questions
What size should a WordPress hero image be?
Aim for roughly 1920×600 pixels for desktop, and compress the file so it stays under 200KB where possible without visible quality loss.
Can I add a hero image without a plugin?
Yes. If you use a block theme, the built-in Cover block handles this natively through the Full Site Editor, no plugin required.
Can I add a hero section to any WordPress theme?
Yes, though older classic themes without a hero setting usually need a page builder plugin to add one cleanly.
Why is my hero image not showing full width?
This is almost always a theme container width issue. Use the block’s full width alignment option or check your theme’s customizer for a “content width” setting.
What is the best free tool for designing a hero image?
Canva is a solid starting point for beginners because it includes pre-sized templates, though any image editor that exports at the right dimensions will work.
Block Themes vs Classic Themes: Which Hero Method Fits You
| Factor | Block Theme (Full Site Editor) | Classic Theme (Customizer) |
|---|---|---|
| Setup speed | Fast once you know the Cover block | Fast if the theme already has a hero panel |
| Design flexibility | High: full control over layout, spacing, overlay | Limited to what the theme’s panel exposes |
| Plugin dependency | None required | None required if the theme supports it natively |
| Best for | New builds on a 2023 or later default theme | Existing sites on an older, well-established theme |
If neither applies to you, meaning your theme is classic but has no hero panel at all, the plugin route from Step 4 is the practical fallback. Canada Create’s build checklist always confirms theme type before recommending a hero method, since guessing wrong wastes time on the wrong workflow.
Maintaining Your Hero Image Over Time
A hero image is not a set-it-and-forget-it element. Swap seasonal promotions in and out, refresh the photo at least once a year so the homepage does not look dated, and re-check the mobile crop after any theme update. Canada Create recommends adding a recurring calendar reminder for hero image reviews, since this is one of the most commonly neglected parts of an otherwise well-maintained site.
Keep a backup of your original, uncompressed hero image files in cloud storage. If you ever switch themes or page builders, you will want the high-resolution source rather than a compressed version pulled from the media library.
Related Resources
- How to Build a Truly Anonymous Website
- How to Secure Your WordPress Website
- Web Design in Yorkville, Toronto
Toronto business owners who would rather have a designer handle the hero section, theme setup, and everything in between can see examples of recent work through Canada Create’s web design services in Downtown Toronto.
