Ultimate Guide: Adding a Hero Image in WordPress for Any Theme!

Looking to enhance the professionalism of your WordPress site? A hero image is the perfect solution.

A hero image is the first visual element visitors encounter when they arrive at your site. You have just about three seconds to capture their interest, making it crucial to get it right.

With over a decade of experience in building WordPress websites, we remember when hero images first gained popularity.

In those early days, we faced challenges like images appearing too large on desktops, distorted on mobile devices, or simply not displaying correctly. Fortunately, we’ve mastered the technique now.

In this guide, we will walk you through the simplest methods to add a hero image to your WordPress site. Whether you prefer using page builders or the block editor, we have the right solutions for you.

Step One: Prepare Your WordPress Hero Image

Before incorporating a hero image into your WordPress site, it’s essential to design one that captivates your visitors. A compelling hero section begins with a striking image that represents your site’s purpose.

Canva is a widely-used tool for creating website graphics, known for its user-friendly interface and a plethora of templates for designing your hero image. If Canva isn’t your style, we’ve compiled a list of alternatives to help you find the right fit.

When creating your hero image, there are several important factors to consider.

Firstly, consider the dimensions. Hero images typically have a moderate height and span the full width of your homepage.

A standard size for WordPress hero images is approximately 1920 pixels wide and 400-600 pixels tall, though this may vary based on your specific WordPress theme.

Next, determine the message you want to convey. Your hero image should effectively communicate the essence of your website. It could feature a product, a compelling photo that embodies your brand, or even an engaging full-screen video background.

For instance, we chose to highlight our founder, Syed Balkhi, in our homepage hero image. This showcases the personal touch behind our brand and emphasizes our commitment to supporting WordPress users, which is the core mission of CanadaCreate.

Additionally, ensure there is space for text. Many hero sections include a headline or a call-to-action button, so make sure there is enough room for these elements and that they are easily readable.

It’s beneficial to explore other websites in your industry for inspiration on hero sections. This can spark ideas for your own design. Some examples from our WordPress website collection can provide excellent inspiration.

Now that we’ve covered optimization, let’s explore how to add the hero image.

How to Add a Hero Image in WordPress

While researching for this guide, we found that adding a hero image to classic WordPress themes can be quite challenging. The method can differ significantly based on your theme, as some include built-in hero sections while others do not.

For instance, the Sydney theme features a ready-to-use hero section, simplifying the process.

If you’re looking to add a hero image to your existing site and your theme lacks this built-in feature, it can be quite frustrating.

For beginners who are open to selecting a new theme, we recommend opting for one with a built-in hero section, as this can save you time and effort in the long run.

For theme suggestions, explore our expert selections of the best and most popular WordPress themes available. Alternatively, consider using a page builder with a theme that includes a hero section, which we will demonstrate in method 3.

Before implementing significant changes, we recommend using a staging site to thoroughly test new themes. This ensures you make the best decision for your website.

If you’re unsure how to change a WordPress theme, refer to our guide on the proper procedure for switching themes.

If you’re satisfied with your current classic theme, no worries! Jump to method 4, where we will demonstrate how to add a hero section using a plugin. This method is compatible with any theme, allowing you to create an impressive hero image without redesigning your entire site.

Use the quick links below to navigate to your preferred method:

Method 1: Utilizing the Theme Customizer (For Classic Themes Only)

If you’re using a classic theme like Sydney that includes a hero section, you can adjust your hero image using the Theme Customizer. Simply navigate to Appearance » Customize in your WordPress dashboard to begin.

💡 Important Note: If you don’t see the Theme Customizer in your dashboard, it likely means you’re using a block theme, so please proceed to method 2.

The sidebar will display various options to customize your classic theme.

In the Sydney theme, the option to customize your hero section is labeled ‘Hero Area,’ but this may differ depending on the theme you are using. Click on it to proceed.

The Sydney theme provides three options for creating your hero section: Hero Type, Hero Slider, and Hero Media.

We will only need the first two options, as they are sufficient for creating a hero section for our needs.

Begin by selecting the ‘Hero Type.’

In the Hero Type section, you will be prompted to choose the type of media you wish to include in your hero section.

You can opt for a full-screen slider, a video, an image, or no header at all.

We will choose a full-screen slider for the hero section on our homepage and throughout the website. This option allows us to create a slider featuring multiple images for the hero, along with text and a button overlaying the images.

Next, return to the Hero Area menu and select ‘Hero Slider.’

Here, click on the ‘First Slide’ tab and then hit the ‘Select image’ button.

This action will open your WordPress media library, where you can either upload a new image or select an existing one for your hero section.

After uploading an image, scroll down to update the text in the title and subtitle fields.

You should see your changes automatically reflected in the page preview.

If you wish to add additional images to the hero section, simply repeat these steps for the remaining slides.

If not, you can scroll down to the ‘Slider button’ menu.

You can modify the URL and text for the call-to-action button here.

Then, scroll down to the ‘Slider settings’ tab.

In this section, you can adjust the slider speed, opt to display the same text on all slides, and ensure the slider is responsive.

To change the button color, return to the main menu of the Theme Customizer.

Next, select ‘General.’

You will now see various options to customize your theme’s general settings.

Simply click on ‘Buttons’ here.

Now, scroll down to the ‘Default State’ and ‘Hover State’ sections to modify the button color based on its state.

To change the color, click on the color picker tool and select a new color.

Most WordPress themes also let you customize colors and typography throughout your design. Keep in mind that these changes typically affect your entire website, not just the hero section.

Here’s how our hero image appears, created with the Sydney theme:

Method 2: Using the Full Site Editor (Applicable to Block Themes Only)

If you are using a block theme, you can utilize the Full Site Editor’s Cover block to effortlessly create a hero image in WordPress without the need for any plugins.

Step 1: Access the Full Site Editor

Begin by navigating to Appearance » Editor in your WordPress dashboard.

You will now see the main menus of the editor.

If you want to add a hero image specifically to your homepage,

click on the theme preview located on the right side of the screen.

For adding a hero image to a different page, a custom page template, or a block pattern, refer to our guide on WordPress Full Site Editing for detailed instructions.

Step 2: Insert the Cover Block into Your Page/Template

Since the hero section is typically positioned above the fold (the top area of your page visible when visitors first arrive), ensure you are in the correct spot. The hero section usually appears just below the header.

Next, you can either remove the existing blocks in that area or add a new Group block directly above them.

In this example, we will simply delete the blocks already present on our homepage. To do this, click on the ‘List View’ button on the left side of the screen.

Locate the block(s) you wish to remove to create space for your hero section. Once found, click the three-dot menu and select ‘Delete.’

Next, choose the block that was located just below the blocks you recently removed.

Then, click on the three-dot menu and select ‘Add before.’ This will insert a new block directly above the selected block, below the header section.

At this point, you can click on the ‘+’ icon that appears in the designated hero section.

You should insert a Group block here, as it will enable you to manage the hero image, text, buttons, and other components as a single unit when necessary.

You can now choose a container to house your blocks.

For this example, we have selected the standard Group container.

Next, simply click on the ‘+’ icon within the Group block.

Here, proceed to select the ‘Cover’ block.

After that, you will see three options for adding your hero background image: uploading from your computer, selecting from your media library, or using your featured image.

In our example, we will click on ‘Media Library’ and choose an existing image.

If the image uploads successfully, you will see your hero image immediately. However, some adjustments will be necessary.

Step 3: Adjust the Image in Your Cover Block

First, select the ‘Cover’ block itself to reveal its toolbar at the top.

Next, click the ‘Align’ button and select ‘Full Width’ for your image.

Then, click the duotone icon to modify the duotone filter applied to your image.

If you prefer not to use it, you can easily disable it later, and we will guide you through that process.

Afterward, click the content position icon to adjust the placement of your text and button on the image.

We chose to position our content on the center-left side since the main focus of the image is on the right.

Now, click the ‘Settings’ icon and navigate to the ‘Block’ tab.

Scroll down to the Settings section, where you can optionally add a parallax effect to your image (‘Fixed background’) or choose a repeated background.

You can also return to the styles icon to make further adjustments.

Here, you can set the overlay opacity to 0 to ensure that your image remains filter-free.

To adjust the height of the image, enter a pixel value in the ‘Minimum Height of Cover’ field.

We have set our image height to 400 pixels.

Feel free to modify additional settings such as border and shadow, block spacing, padding and margin, typography, and more.

Step 4: Add Blocks to Your Cover Block

Now, let’s enhance your hero image by adding more elements. You should see a prompt that says ‘Write title’ over the image.

Here’s a helpful tip:Instead of directly adding a heading, click the ‘+’ button and first insert a Group block. This Group block serves as a container for your text and button.

Using a container makes it easier to manage their alignment and styling as a cohesive unit.

Next, select your preferred container as you did in the previous step.

After that, click the ‘+’ button again to insert a Heading block.

Now, you can enter the main headline for your page.

Feel free to adjust the text color, size, and dimensions in the block settings sidebar if you wish.

Once you’ve made your changes, press the ‘Enter’ key.

At this point, you can add a subheadline just below the main heading.

Finally, it’s time to include a call-to-action button in your hero image.

To do this, simply press ‘Enter’ again, click the ‘+’ button, and choose the ‘Buttons’ block.

Next, type in the text for your button.

To add a link to the button, just click the link icon in the toolbar and enter your URL in the designated field.

Then, click the arrow button to confirm.

For effective strategies on creating high-converting buttons, explore our comprehensive guide on best practices for call-to-action elements.

That’s all there is to it! You can enhance your hero image by adding more elements or personalizing it to suit your style.

Once you are satisfied with the appearance of your hero section, simply click ‘Save’ to apply your changes.

Here’s a preview of our Cover block:

Method 3: Utilizing a Page Builder for Custom Landing Pages and Themes

If you’re just starting your website or want to design a custom landing page without the constraints of your theme, we recommend using a page builder like SeedProd, which includes templates featuring hero sections.

SeedProd is a user-friendly drag-and-drop page builder that we frequently use to design custom pages for CanadaCreate and our other brands, including Duplicator and OptinMonster.

In addition to its ease of use, SeedProd provides numerous built-in WordPress editing features that are not typically available in the Theme Customizer, Full Site Editor, or Gutenberg.

As a result, we’ve been able to save both time and money by avoiding the need for third-party plugins to add unique features to our themes or landing pages.

SeedProd offers both a free and a premium version. While the free version allows you to create a custom landing page, its template and block options are somewhat limited. Therefore, we suggest upgrading to a premium plan to access additional features, including an AI content generator.

For further details, please refer to our comprehensive SeedProd review and our comparison of Elementor, Divi, and SeedProd, which are among the most popular page builders available.

Step 1: Install SeedProd

To begin using SeedProd, you’ll need to install the WordPress plugin available in your SeedProd account from your admin dashboard. After activating the plugin, you will be prompted to enter your license key, which can be found on your SeedProd account page.

Once you have entered the key, simply click the ‘Verify key’ button.

With SeedProd, you have two choices: you can either add a hero section to a landing page or to specific pages within a custom theme.

To configure your landing page or theme, you can refer to the following guides:

• How to Create a Custom WordPress Theme Without Coding
• How to Create a Landing Page in WordPress
• How to Create a High-Converting Squeeze Page in WordPress
• How to Design Stunning Coming Soon Pages in WordPress

For the remainder of this tutorial, we will utilize the Menu Sales template.

Step 2: Personalize Your Hero Section

After selecting a template for your theme or landing page, you will enter the SeedProd editor.

The SeedProd editing interface features a page preview on the right and a left sidebar where you can add blocks, customize sections, undo or redo changes, view your page layers, and preview your site on mobile or tablet devices.

Since the SeedProd theme already has a hero section, we are already halfway there. All we need to do is replace the image, customize it, and add additional blocks to the hero section if necessary.

Alternatively, you can explore more hero section designs by switching from the Blocks sidebar to the Sections sidebar on the left. Then, go to ‘Hero’ and click the ‘+’ button on the hero section template you wish to add to your page.

SeedProd will then add it to your page.

Let’s start by changing the hero image.

To do this, click on the top section that contains the hero image. You will know you have selected the correct section when a purple ‘Editing: Section’ box appears in the left sidebar.

Now, hover over the background image in the sidebar.

Start by clicking on the ‘Media Icon.’ You can then upload your hero image either from your computer or select it from the media library.

Next, select the background position that best suits your image.

We recommend using the ‘Custom Position’ option for optimal control over the focal points of your image.

The Custom Position option allows you to configure the background in various ways.

For the X and Y positions, you can adjust the vertical and horizontal alignment of the image.

The Attachment setting offers two choices: Scroll (non-parallax) and Fixed (parallax).

If your image is smaller than the hero section and you want it to fill the entire area, you can choose to repeat the image. Otherwise, select ‘No-repeat.’

Regarding the size of the WordPress hero image, you can select the ‘Auto’ option for the image to automatically fit the hero section.

Feel free to experiment with these settings to find the best fit for your image.

Additionally, you can dim the background image to enhance the visibility of your text.

To achieve this, simply adjust the ‘Dim Background’ slider to your preferred opacity level.

To change the background overlay color, click on the ‘Overlay Color’ button in the color picker.

Next, choose your desired color from the options available.

Now, let’s scroll back up and navigate to the ‘Advanced’ settings, where you can apply various exciting effects to your hero section.

For instance, you can access the ‘Particle Background’ tab to add an animated particle background to your image, enhancing the uniqueness and appeal of your hero section.

Additionally, you can incorporate a custom shape divider at the top and/or bottom of your hero section by selecting the ‘Shape Divider’ menu.

This addition can enhance the visual appeal of your hero section. A creative shape divider at the bottom can also encourage visitors to scroll down your landing page to discover more about your offerings.

Step 3: Enhance Your Hero Section with Additional Blocks

With your hero image set, let’s proceed to add more blocks to the hero section.

Since we already have a headline block, click on it to customize. Once selected, you will notice an orange banner on the left sidebar indicating ‘Editing: Headline.’

One of the great features of SeedProd is its integrated AI content generator.

If you’re uncertain about what headline to choose, click the ‘Edit with AI’ button for suggestions.

A popup window will appear, allowing you to create your content using AI.

To generate a fresh headline, click the ‘New Prompt’ button.

Next, specify the type of content you want the AI to create.

Then, click the ‘Generate Text’ button.

The AI will generate the content for you.

You can modify it by adjusting the tone, simplifying the language, changing the length, or even translating it into over 50 languages.

Once you’re satisfied with the headline, click ‘Insert.’

Now, scroll down the left sidebar.

Here, you can adjust the text alignment, font size, and heading tag to match your preferences.

If you want the text to be more eye-catching, scroll back up and switch to the ‘Advanced’ tab.

In the Styles menu, click ‘Edit’ under Typography settings to change the font family, line height, letter spacing, and text case.

You can also scroll further down to add a text shadow to the headline.

We have created a custom-colored shadow to enhance the visibility of the text.

To insert a subheadline beneath the main headline, simply click the ‘Blocks’ button located in the left sidebar.

This action will direct you to the block library.

Next, drag and drop the ‘Text’ block directly under the headline.

The settings for the Text block are quite similar to those of the Headline block, allowing you to follow the same steps to create your subheadline.

To add a call-to-action button, drag and drop the ‘Button’ block onto the page.

Typically, this button is placed just below the subheadline.

Once that’s done, enter your desired text for the button in the designated field.

You can also include a subtext beneath the main button text for additional context.

Next, scroll down to add a link to your button.

Feel free to adjust the button’s alignment and size as needed.

Now, return to the sidebar and click on the ‘Templates’ tab.

Here, you can modify the button style to better align with your WordPress design.

If the default template designs do not suit your preference, switch to the ‘Advanced’ tab.

Here, you can customize the button’s font, style, color, padding, shadow effects, and more.

Continue to personalize your template until it meets your expectations.

When you’re happy with your changes, click the ‘Save’ button at the top and select ‘Publish’ to make your page live.

That’s all there is to adding a hero image using a page builder.

Here’s how the hero section appears on our demo site:

Method 4: Using the Hero Banner Plugin with Shortcode (Compatible with All Themes)

This method works with all themes, but we particularly recommend it for users of classic themes that lack a built-in hero section.

To implement this method, you’ll need to install the Hero Banner Ultimate plugin. For detailed instructions, refer to our guide on installing a WordPress plugin for beginners.

Step 1: Install the Hero Banner Plugin

Once the plugin is activated, navigate toHero Banner » Add Hero Banner.

Next, provide a title for your hero banner, which will serve as your headline.

After that, enter some text in the visual classic editor that will act as your subheadline. You can modify the formatting and color as needed.

Now, scroll down to the ‘Hero Banner – Settings’ section.

In this section, you can select a banner layout. Although you can’t see a live preview of the layout in the plugin settings, switching between them later on your actual page is simple, allowing you to find your preferred option.

For our tutorial, we will select Layout 1.

For the Banner Type, you can opt for ‘Background Image’ to use a hero image, or choose ‘Background Video’ if you have a full-width video available for the hero section.

Next, remember to click ‘Upload Image’ to add your image from your computer or the media library.

At this point, set the background image size to ‘Cover’ to ensure the image stretches across the full width.

You should also select ‘Scroll’ for the background image attachment to turn off the parallax effect.

Scroll down until you find the Banner Color Setting.

Here, you can modify the color of the headline (Title Color) and the subheadline (Content Color). Just click on the color picker tool to make your selections.

You might also want to add an overlay color on top of the image, which can help improve text readability against the background.

We have chosen black for the overlay color, with an opacity of 0.5.

Now, let’s set up the call-to-action settings.

In this section, you can add the text and link for your button. You can also customize the color in the ‘Button – 1 Class’ setting.

Next, simply scroll back up to the top.

After that, click the ‘Publish’ button.

Now, let’s navigate to Hero Banner » Hero Banner. You should see that your hero image has been created, and the plugin has generated a shortcode for you to use.

Make sure to save this shortcode, as we will need it later.

Step 2: Identify the CSS Selector for Your Theme’s Header Section

To display the hero image, we need to locate a specific ‘address’ for your theme’s header section.

This is known as a CSS selector, which instructs our plugin exactly where to place the hero image. Don’t worry, you won’t have to write any code yourself.

To find this, visit your website’s front end. Then, right-click on the header section and choose ‘Inspect.’

On the right side, look for the CSS selector that the header section is using. You can hover your cursor over the code snippets until the header section is highlighted on the front end.

Here’s an example:

If the entire header section is highlighted as you hover over the code, you’re on the right path.

Next, right-click on the code snippet and chooseCopy » Copy selector.

Once you’ve done that, you can either paste the selector into a safe location, like a text editor, or simply keep this tab open.

Step 3: Insert Your Shortcode into WPCode

The next step is to install WPCode, a plugin for managing code snippets.

Technically, you don’t have to use a plugin to add custom code snippets to your theme files. However, we recommend this approach for safety, as directly pasting code into theme files can lead to unexpected errors.

We’ve found WPCode to be extremely useful for managing custom code snippets without causing issues on your site.

Begin by installing the WordPress plugin from your admin dashboard. Once the plugin is activated, go to Code Snippets » + Add Snippet, choose ‘Add Your Custom Code (New Snippet),’ and click the ‘+ Add Custom Snippet’ button.

Now, let’s name your new code snippet. A simple name like ‘Hero Banner Shortcode’ will work well.

Next, set the Code Type to ‘PHP Snippet.’

In the Code Preview box, paste the following code snippet:

echo do_shortcode('[hbupro_banner id="XXX"]'); // Replace with your own shortcode

Be sure to replace the [hbupro_banner id="XXX"] with your specific Hero Banner shortcode that you obtained earlier.

Next, scroll down to the ‘Insertion’ section.

Here, set the Insert Method to ‘Auto Insert,’ and the Location to ‘After HTML Element.’

Then, paste the selector you copied earlier into the ‘CSS Selector’ field. In our example, it was #masthead, but this may differ based on your theme.

Once that’s completed, toggle the ‘Inactive’ button to turn it ‘Active’ and click the ‘Save Snippet’ button.

And that’s all there is to it!

When you visit your website, you should now see the Hero Banner image displayed just below your header.

Common Questions About Hero Images

Here are some frequently asked questions that our readers have regarding hero images:

What is the ideal size for a hero image in WordPress?

A good starting point for hero image dimensions is 1920 pixels wide by 400 to 600 pixels tall. This size ensures a sharp appearance on most desktop screens while minimizing vertical space usage.

However, the optimal size may vary based on your specific WordPress theme. We always suggest testing how your image appears on both desktop and mobile devices.

Can I incorporate a video into my hero section?

Definitely. A video background can create a more dynamic feel for your website and instantly grab visitors’ attention. Most page builders, such as SeedProd and the default WordPress Cover block, offer easy options for adding a video background instead of a static image.

How can I ensure my hero image is mobile-friendly?

Modern themes and page builders are built to be responsive, meaning they will automatically adjust your hero image for smaller screens. The key is to select an image that maintains its quality when cropped.

Before uploading your image, it’s crucial to compress it. This will ensure that it loads quickly for visitors, especially those on slower mobile connections.

Is a hero image the same as a slider?

While they are similar, a hero image is typically a single, large banner displayed at the top of a webpage, whereas a slider cycles through multiple images or videos. You can incorporate a slider within your hero section, as demonstrated in our classic themes method.

We hope this guide has helped you understand how to add a hero image in WordPress. You may also want to explore our tutorial on adding a preloader animation to WordPress and check out our recommendations for the best tools to create and sell digital products.

If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also follow us on Twitter and Facebook.