Hero Images and WordPress: A Beginner’s Guide
Many websites use a large, eye-catching image at the top of their homepage, often called a ‘hero image’. WordPress, a popular website builder, allows you to add this feature to your site.
While simple in concept, some users struggle with implementation, frequently asking about the appropriate WordPress hero image size and how to set up a hero image correctly in the WordPress Customizer or Full Site Editor.
Based on our experience building websites, we’ve discovered more efficient methods than those offered by WordPress’s built-in features.
This guide will explore various ways to add a hero image to your WordPress website. We’ll explain each method and let you choose the one that best suits your needs.
Preparing Your Hero Image: Key Considerations
Before adding a hero image to your WordPress website, you need to create one that captures your visitor’s attention.
A captivating hero section begins with a striking image that reflects your site’s essence.
**Designing your hero image:**
Tools like Canva are popular for designing website graphics. Canva is user-friendly and offers numerous templates for creating your hero image. If you prefer alternatives to Canva, we have a list of options you can explore. When designing your hero image, keep these factors in mind:
* **Size:** Hero images are typically not too tall and often span the full width of your front page. A common WordPress hero image size is roughly 1920 pixels wide by 400-600 pixels tall, though this can vary depending on your WordPress theme.
* **Message:** Your hero image should quickly convey your website’s purpose. It could be a product image, a photograph that represents your brand, or even an impressive full-screen video background. For example, we chose to showcase our founder, Syed Balkhi, in our homepage’s hero image. This emphasizes that a real person backs our brand, committed to helping WordPress users succeed, which is the core of WPBeginner’s mission.
* **Text Space:** Many hero sections feature a headline or a button. Ensure there’s sufficient space for these elements and that they’re easy to read.
* **Inspiration:** It’s wise to examine other websites in your field for hero section examples. This can spark ideas for your own design. Consider exploring our WordPress website examples for inspiration.
Now that we’ve addressed the hero image itself, let’s delve into adding it to your WordPress site. WordPress offers several methods, with the best choice dependent on your theme and the features or plugins you utilize to design your website.
Method 1: Using Theme Customizer (Classic Themes Only)
Our research reveals that adding a hero image to classic WordPress themes isn’t always straightforward. The process can vary significantly depending on your theme, as some include built-in hero sections while others do not.
Themes like Sydney, for example, come with a ready-to-use hero section, simplifying the process. If you’re trying to add a hero section to your existing site but your theme lacks this built-in feature, it can be frustrating. For those starting fresh and open to choosing a new theme, we recommend switching to one with a built-in hero section, as it could save you time in the long run.
If you need theme recommendations, explore our expert picks of the best and most popular WordPress themes on the market. Better yet, you could use a page builder with a theme that has a hero section, which we’ll show you how to do in method 3.
**Testing Changes:** Before making significant changes, we always advocate using a staging site to thoroughly test new themes. This ensures you make the right choice for your site. If you’re unsure how to do this, refer to our guide on how to properly change a WordPress theme.
**Utilizing the Theme Customizer:** If you’re happy with your current classic theme, no problem! Skip ahead to method 4, where we’ll show you how to add a hero section using a plugin. This approach works with any theme, allowing you to create a stunning hero image without overhauling your entire site design.
If you’re using Sydney or a similar theme, you can customize your hero image through the Theme Customizer. Simply navigate to **Appearance » Customize** in your WordPress dashboard to begin.
**Theme Customizer Settings:** The sidebar should present several options to customize your classic theme. In Sydney, the setting to customize your hero section is called ‘Hero Area’, but this specific menu will vary by theme. Click on it.
The Sydney theme offers three menus for creating your hero section: Hero Type, Hero Slider, and Hero Media. For our purposes, the first two menus are sufficient.
1. **Hero Type:** Select ‘Hero Type’. Here, you’ll choose the type of media you want to add to your hero section. Options include a full-screen slider, a video, an image, or no header. We’ll select a full-screen slider for our hero section, as it allows us to create a slider with multiple images for the hero and add text and a button on top of the images.
2. **Hero Slider:** Go back to the Hero Area menu and select ‘Hero Slider’. Open the ‘First Slide’ tab and click on the ‘Select image’ button. This will open your WordPress media library, where you can upload a new image or select an existing one for your hero section. After uploading an image, scroll down and replace the text in the title and subtitle fields. The changes you make should be automatically reflected in the page preview. To add more images to your hero section, repeat these steps for the remaining slides.
3. **Button and Slider Settings:** If you only need one image, scroll down to the ‘Slider button’ menu. You can adjust the URL and text for the call-to-action button. Then, scroll down to the ‘Slider settings’ tab. Here, adjust the slider’s speed, choose to display the same text across all slides, and make the slider’s behavior responsive. If you need to change the button’s color, go back to the Theme Customizer’s main menu, click ‘General’, and then click ‘Buttons’. Now, you can change the button’s color depending on its state by adjusting the ‘Default State’ and ‘Hover State’ sections. To modify the color, click on the color picker tool and choose a new color.
Most WordPress themes allow you to customize the colors and typography of your design. Keep in mind that these changes usually apply to your entire website, not just your hero section. Here’s what our hero image looks like, created with the Sydney theme.
Method 2: Using Full Site Editor (Block Themes Only)
If you use a block theme, you can use the Full Site Editor’s Cover block to easily create a hero image in WordPress. No plugin is required.
1. **Open the Full Site Editor:** Navigate to **Appearance » Editor** in your WordPress admin area. You’ll see the editor’s main menus. If you want to add your hero image only to your homepage, click on the theme preview on the right side of the page. If you want to add it to another page, a custom page template, or a block pattern, refer to our guide on WordPress Full Site Editing for more information.
2. **Add the Cover Block:** The hero section is usually placed above the fold (the top part of your page that appears as visitors land on the site), so ensure you’re in the correct location. It’s typically right below the header. Once you’ve located the spot, either delete the existing blocks or add a new Group block right above those existing blocks. We’ll simply remove the blocks that were already on our homepage. You can click on the ‘List View’ button on the left side of the page, find the block(s) you need to delete, click on the three-dot button, and select ‘Delete’. Select the block that used to be right below the block(s) you just deleted, click on the three-dot button, and choose ‘Add before’. This will add a block right above that block and below the header section. Now, click on the ‘+’ button that appears in the supposed hero section, add a Group block, and choose a container (we’ve selected the basic Group container). Click on the ‘+’ button inside the Group block and select the ‘Cover’ block. You’ll have three options for adding your hero background image: uploading it from your computer, adding it from your media library, or using your featured image. We’ll choose ‘Media Library’ and select an existing image. If the image upload is successful, you’ll see your hero image immediately. However, some adjustments are needed.
3. **Configure the Image:** Select the ‘Cover’ block itself so that its toolbar appears on top of it. Click on the ‘Align’ button and choose ‘Full Width’. Next, click on the duotone icon to change the duotone filter applied to your image. If you don’t like it, you can disable it later. Click on the content position icon to change where your text and button will appear on the image. We’ve decided to go with the center-left side, as the focal point of the image is on the right. Click on the ‘Settings’ icon and switch to the ‘Block’ tab. Here, you can optionally add a parallax effect to your image (‘Fixed background’) or use a repeated background. You can also switch to the styles icon to set the overlay opacity to 0 so that your image doesn’t use any filter. If you want to change the image’s height, insert a number in pixels in the ‘Minimum Height of Cover’ field. Feel free to customize other settings like border and shadow, block spacing, padding and margin, typography, and so on.
4. **Adding More Elements:** You’re now ready to add more elements to your hero image. There’s a ‘Write title’ text on top of the image. Click on the ‘+’ button next to it and select ‘Group’. Use this block to group all the elements you’ll add to the Cover block, allowing you to customize them as a single block when needed. Choose your desired container. Click the ‘+’ button again to add a Heading block and insert your page’s headline. You can change the text color, size, and dimensions in the block settings sidebar if preferred. After adding your heading, hit the ‘Enter’ key. Feel free to add a subheadline below the heading. Finally, add a call-to-action button to your hero image. Hit the ‘Enter’ key again, click on the ‘+’ button, and select the ‘Buttons’ block. Insert the button copy and add a link to the button by clicking on the link icon on the toolbar. If you need tips and tricks for creating high-converting buttons, check out our guide on call-to-action best practices. That’s pretty much it! You can add more elements to your hero image or customize it to your preferences. Once you’re happy with how the hero section looks, click ‘Save’. Here’s what our Cover block looks like:
Method 3: Using a Page Builder (Custom Landing Pages/Themes)
If you’re just starting to set up your website or want to create a custom landing page without being limited by your theme, we recommend using a page builder that includes templates with hero sections, such as SeedProd.
SeedProd is a drag-and-drop page builder we’ve frequently used to create custom pages for WPBeginner and our other brand sites, including Duplicator and OptinMonster. While easy to use, it also offers a range of built-in WordPress editing features that the Theme Customizer, Full Site Editor, and Gutenberg don’t have by default. This allows us to save time and money by avoiding the need for third-party plugins to add special features to our themes or landing pages. SeedProd comes in a free and paid version. The free version can create a custom landing page, but the template and block options are limited. For this reason, we recommend upgrading to a paid plan for more features, including the AI content generator.
**Setting Up SeedProd:** To use SeedProd, install the WordPress plugin provided in your SeedProd account. Once the plugin is active, enter your license key and click on the ‘Verify key’ button. With SeedProd, you have two options: add a hero section to a landing page or certain pages within a custom theme. For the remainder of the tutorial, we’ll use the Menu Sales template.
**Customizing Your Hero Section:** Once you’ve chosen a template, you’ll land in the SeedProd editor. The SeedProd editing interface consists of a page preview on the right side and a left sidebar where you can add more blocks, customize a block/section, undo/redo changes, view your page’s layers, and preview your site on mobile or tablet devices. Since the SeedProd theme already includes a hero section, our work is partially done. We need to replace the image, customize it, and add more blocks to the hero section if needed. Alternatively, you can find more hero section designs by switching from the Blocks sidebar to the Sections sidebar. Navigate to ‘Hero’ and click on the ‘+’ button on the hero section template you want to add to your page. SeedProd will then insert it into your page.
1. **Changing the Hero Image:** Click on the topmost section that includes the hero image. A purple ‘Editing: Section’ box will appear in the left sidebar. Hover over the background image in the sidebar and click on the ‘Media Icon’. You can now upload your hero image from your computer or the media library. Choose the background position that works best for your image. We find that ‘Custom Position’ gives us the most control over positioning the focal points. The Custom Position option provides various configuration settings. Use the X and Y positions to adjust the image’s vertical and horizontal placement. The Attachment setting has two options: Scroll (non-parallax) and Fixed (parallax). If your image is smaller than the hero section but you want the entire section filled with the image, repeat the image throughout that section. Otherwise, choose ‘No-repeat’. For the WordPress hero image size, select ‘Auto’ if you want the image to automatically adjust to the hero section. Feel free to experiment with these settings to see what works best. To dim the background image so that your text stands out, drag the ‘Dim Background’ slider to your desired level of opacity. To change the overlaying background color, click on the ‘Overlay Color’ color picker button and select your preferred color.
2. **Advanced Settings:** Scroll back up and switch to the ‘Advanced’ settings. Here, you can add various effects to your hero section. For example, open the ‘Particle Background’ tab to add an animated particle background to your image. Add a custom shape divider at the top or bottom of your hero section by going to the ‘Shape Divider’ menu.
3. **Adding and Customizing Blocks:** With your hero image ready, let’s add more blocks to the hero section. Ours already has a headline block, so click on it to customize it. A banner that says ‘Editing: Headline’ will appear in the left sidebar. SeedProd has a built-in AI content generator. If you’re unsure what headline to use, click the ‘Edit with AI’ button for ideas. A popup window will appear, allowing you to write your content with AI. Click on the ‘New Prompt’ button to generate a completely new headline. Tell the AI the type of content you need and click on the ‘Generate Text’ button. The AI will then generate the content for you. You can change the tone, simplify the language, make the text longer or shorter, and even translate it into over 50 languages. Once you’re satisfied with the headline, click ‘Insert’. Scroll down the left sidebar to adjust the text alignment, font size, and heading tag to suit your preferences. If you want the text to stand out, switch to the ‘Advanced’ tab. In the Styles menu, click ‘Edit’ on the Typography settings. Feel free to change the font family, line height, letter spacing, and letter case of the text. You can also add a text shadow to the headline. To add a subheadline below the headline, click on the ‘Blocks’ button, drag and drop the ‘Text’ block right below the headline, and repeat the same steps to create the subheadline. To add a call-to-action button, drag and drop the ‘Button’ block to the page. It’s usually placed right below the subheadline. Enter your button copy, add a subtext below the main button copy, and add a link to your button. Feel free to change the button’s alignment and size. Switch to the ‘Templates’ tab to change your button style. If you don’t like the default template designs, switch to the ‘Advanced’ tab to change the button’s typography, style, color, padding, shadow effect, and so on. Continue customizing your template until it looks good. When you’re satisfied, click on the ‘Save’ button at the top and select ‘Publish’ to make the page live. That’s all for adding a hero image with a page builder. Here’s what the hero section looks like on our demo site.
Method 4: Using Hero Banner Plugin + Shortcode (All Themes)
This final method technically works with all themes, but we recommend it most to people using a classic theme without a built-in hero section.
To follow this method, you will need to install the Hero Banner Ultimate plugin. For step-by-step instructions, you can check out our guide on how to install a WordPress plugin for beginners.
**Setting Up the Hero Banner Plugin:** Once the plugin is active, go to **Hero Banner » Add Hero Banner.** Give your hero banner a title, which will act as your headline. Insert some text in the visual classic editor that will function as your subheadline. Feel free to change the formatting and color here. Scroll down to the ‘Hero Banner – Settings’ section. Choose a banner layout (you can always change it later), and select ‘Background Image’ for a hero image. You can also choose ‘Background Video’ if you have a full-width video to use as a hero. Click ‘Upload Image’ to add your image, set the background image size to ‘Cover’ so that the image is full-width, and choose ‘Scroll’ for the background image attachment to disable any parallax effect. Go down until you reach the Banner Color Setting. Change the color of the headline (Title Color) and the subheadline (Content Color) using the color picker tool. Add an overlay color to adjust the text’s readability against the image. Configure the call-to-action settings. Insert the copy and link for your button. You can also change the color in ‘Button – 1 Class.’ Scroll back up and click ‘Publish’.
**Finding the CSS Selector:** To display the hero image, we need to know the right CSS selector for your header section. This will allow you to add the image right below the header. Visit your website on the front end, right-click on your header section, and select ‘Inspect’. Find the CSS selector for the header section. Hover your cursor over the code snippets until you see the header section highlighted on the front end. For example, if the entire header section is highlighted as you hover over the code, you’re on the right track. Right-click on that code snippet and select **Copy » Copy selector.** You can paste the selector somewhere safe or keep this tab open.
**Adding Your Shortcode:** Install the WPCode plugin. Technically, you don’t need a plugin to insert custom code snippets into your theme files. We use WPCode for safe management. We’ve found WPCode to be incredibly helpful for managing custom code snippets without breaking your site. Install the plugin and navigate to **Code Snippets » + Add Snippet.** Select ‘Add Your Custom Code (New Snippet)’ and click on the ‘+ Add Custom Snippet’ button. Give your new code snippet a name, change the Code Type to ‘PHP Snippet’, and paste the following snippet into the Code Preview box:
`
echo do_shortcode(‘[hbupro_banner id=’XXX’]’); // Replace with your own shortcode
`
Make sure to replace [hbupro_banner id=’XXX’] with your Hero Banner shortcode. Scroll down to the ‘Insertion’ section. The Insert Method should be ‘Auto Insert’, and the Location should be ‘After HTML Element’. Paste the selector you copied earlier into the ‘CSS Selector’ field. Toggle the ‘Inactive’ button to ‘Active’ and click on the ‘Save Snippet’ button. That’s it! If you view your website, you should now see the Hero Banner image right below your header.
Conclusion
We hope this article has helped you learn how to add a hero image in WordPress. You may also want to check out our guides on how to add a preloader animation to WordPress and our expert picks of the best tools for creating and selling digital products.
This is a summary of the original article, ”How to Add a Hero Image in WordPress (4 Easy Ways)’, found at ”https://www.wpbeginner.com/wp-tutorials/how-to-add-a-hero-image-in-wordpress/”.
