Simple Ways Add a Hero Image in WordPress

It is not easy to ensure that your landing page captures the user’s attention immediately, but failure to do so will cause your site to have a high bounce rate. One of the best ways to do this is by using a hero image.

A hero image is a large image at the top of most home pages and emails. It is used anywhere that you are trying to quickly capture the user’s attention. The image should give users a good idea of what your website is going to offer them.

While hero images are extremely common, it is fair to say that adding them is a bit hidden compared to many other things in WordPress. Luckily, there are several ways you can add a hero image in WordPress, so you just need to find one that works for you.

Today, I will demonstrate simple ways you can add a hero image in WordPress.

Research and Create a Hero Image

Before we begin listing different ways to add a hero image in WordPress, you need to do something very important.

Create a hero image.

Seriously, there is no reason to learn how to add one if you do not have one to add in the first place. Before you begin creating an image or searching through stock images for one, you need to do some research.

Hero images are a science. If you check most industries, you will notice that they all often use the same type of hero images. For example, if you visit most healthcare sites, like a doctor’s office, they almost always have an image of a doctor interacting with a patient.

Take a look at similar sites to yours and figure out what everyone else is doing. Then, consider how you can make your own. For example, if you run a doctor’s office, you might want to consider doing a photo shoot at your office.

Whereas if you run a site for your restaurant, you may want to get a picture of the kitchen preparing meals, or the meals reaching a table of customers.

It all comes down to what kind of business you are running that determines what your hero image should be.

It’s also worth noting that in some cases, a static image is not the best choice. It is also possible to make a video background that can show off what you do. This is often seen in travel agencies that may want to show the different locations you can book a trip with them.

With that said, let’s jump into how you can add the image once it is made.

What Should A Hero Image Include?

At its core, the hero image is meant to be the first impression that a user has of your site or business.

For example, imagine a doctor’s office. You want patients to know that you are there for them and that they will receive the best care possible. As a result, nearly all doctor’s offices use a hero banner that shows them interacting with patients.

The hero banner should represent a moment in your business that captures what you want users to know about your business and what they can expect from it. That said, that’s not the only way to look at it.

For example, if you were a clothes designer, you might want to use the hero section to show off your latest fashion line. This line of thinking works for most eCommerce sites. You want to show off products to push sales.

Of course, this means redesigning your hero banner from time to time, but as you will see, it is easy to replace.

Method 1: Hero Banner Ultimate

Like most things in WordPress, if you want to add something to your site, there is a plugin available. In this case, the Hero Banner Ultimate plugin is one of the best choices due to its simplicity. And most importantly, it is free.

This plugin allows you to construct a hero banner that includes the image and any text, buttons, or any other elements you might want to include on it. Once created, you can add it to your site by using a shortcode the plugin generates.

Note: This plugin utilizes the classic editor to create your hero banner. If you are not comfortable with it or simply do not like using it, check out the other methods.

Step 1: Install Hero Banner Ultimate

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Search for Hero Banner Ultimate in the available search box. This will pull up additional plugins that you may find helpful.

Find the Hero Banner Ultimate plugin, click on the “Install Now” button, and activate the plugin for use.

Step 2: Choose A Banner Type

With the plugin installed, you can immediately jump into designing a hero banner for your website. To begin, click on Hero Banner and select the Add New Hero Banner option.

Here, you will find the classic editor. At the top, you will see a title option. This will be the headline of the hero banner and will appear in the center of it. If you have already baked the text into your image, you can leave this blank.

Below this is the “Add Media” button. However, this is not where you would add your banner image. Instead, this is where you would add any images on top of your banner image. For now, let’s skip that.

The text box is where you would add any subheadline text. It will appear underneath the title text if you add any. Again, you can just leave this blank if the text is part of the image you are adding.

If you scroll down below this, you will find the Hero Banner Settings.

Unfortunately, you cannot see the changes you are making in real-time when editing these settings. As such, expect to come back to this area often to adjust the settings after the initial creation.

The first option is to choose a banner layout. Unfortunately, you can’t see what this looks like, so just pick one for now and come back to this later when the hero image is on your site. Below this is the Banner Type.

Select the Background Image option, which will change the options available.

Note: The other Banner Type options are viable, but we will be focusing on using a static image in the tutorial.

Step 3: Hero Banner Settings

The first option below this is to upload an image. This is where you will add your banner image. Click on the “Upload Image” button and select your hero image from the media library.

A small image preview will appear underneath this option. Below this, you will see some sizing options. They are set to Auto and Fixed, respectively. I recommend leaving these options as they are. This will scale the image to the device size.

The remaining settings all deal with customizing the banner’s font and color options. Again, you can’t see these changes in real-time, thus, it is pretty difficult to understand what is being changed.

As such, you may want to ignore these for now until the image is in place and you can see what it looks like.

Finally, there is a Call-to-Action settings section. Here, you can add buttons to the hero image. The first option is the name of the button, while the second is the URL the button will take the user to.

For example, if you were highlighting a deal, you might make a button called “Browse Deal” that brings the user to that particular page.

Once you finish everything, click on the “Publish” button to finish up.

Step 4: Place the Hero Image

By publishing the hero banner, you are storing it in the plugin for use, which means we are now ready to add it to a landing page. Click on the Hero Banner option. This will take you to a list of your published hero banners.

There is a column dedicated to shortcodes. Copy the shortcode for the hero banner you want to add.

Go to the post or page where you want to add your hero banner. Once there, add a shortcode block at the top, paste the shortcode, and save the changes. You can now view the hero banner on a page.

Now that you can view this, you can spend some time editing the banner settings to get things right.

To do this efficiently, I recommend keeping the page with the hero banner open on a different tab. That way, you can edit the settings, save the changes, and reload that tab to view the changes.

Method 2: Kubio AI Page Builder

Our next method is using a page builder plugin. Virtually every page builder can create hero banners for your landing pages, so you are free to choose your favorite one. This tutorial will take a look at the Kubio AI Page Builder plugin.

Kubio AI Page Builder utilizes generative AI to help users get a head start by having the AI create a first draft based on your input. After that, you are free to edit it using the Kubio blocks it provides.

While we are only focusing on a hero banner today, Kubio can be used to design any element in WordPress. And you can take advantage of generative AI to help speed up the process of creating pages.

Important Note: While Kubio is a great page builder, the free version has some odd limitations that force you to bulk edit instead of individually designing a page. You may want to consider using a different page builder if this is problematic.

Step 1: Enter the Kubio Editor

Like most page builders, Kubio adds its editor in WordPress. As such, we will be using that to create a hero banner for the page or post of your choice. The Kubio editor is accessible whenever you enter a post or page, even if it was not originally made with it.

Start by installing the Kubio AI Page Builder in WordPress.

Once the plugin is installed, you will be asked to watch a quick welcome video that covers how to use the plugin. It is a good starting point, but you can skip it if you are just interested in creating a hero banner today.

Go to the Pages or Posts section of WordPress and select the content you want to add the hero banner to. Once inside, you will have a choice to use the Kubio editor or the default editor.

Click on the “Edit with Kubio” button.

Step 2: Add A Background Image

Once you are inside the editor, you will find several options on the left-hand side. In this case, the hero banner is located in the Header section, but there is a problem. Kubio has an odd requirement where you need to replace your theme header with one of Kubio’s.

And sadly, you can only individually change the header for a single page with the Pro version. As such, you are going to have to use the bulk settings to change the header design on every page.

If you do not want to do this, I recommend checking out a different page builder. In my case, I have already done this.

With that taken care of, you’ll first want to begin by adding a background image to the header area. This will act as the base for your hero banner. To do this, click on the Hero section within the Header.

Next, click on the Style tab.

The editor provides you with several options. You could use a static color background, create a gradient, create a slideshow, or even add a video. In our case, we just want a single image, so select an image for your background type.

Kubio comes with a variety of images you can select; that said, you are also free to upload your own. We’re going to focus on that. To do so, click on the “Change background image” button to open the media library.

Once you select the Image, it will become the new header background.

You can also use your mouse to adjust the center of the image by dragging the small circle in the preview box. This acts as a kind of cropping tool if you choose an image that is on the larger side.

If you decide to add text to the image itself, then you are done, and the next step is unnecessary for you. If not, keep reading.

Step 3: Edit the Header Layout

With the background image in place, we just need to edit the layout. This is where you can overlay text on top of the image or even put images on top. Click on the Layout tab at the top left.

The free version of this plugin provides three layout options for you to choose from. If you are content with your background image, the first layout option just consists of overlay text, which I think is the best, but you are free to choose whichever you like.

You can now fill in the content based on the layout you chose. In my case, I just chose the text option. To add text to it, you must click on the element you want to edit. In my case, I clicked on where it said Page Title, which is the default text.

Note: This can be hard to see sometimes if the image is darker, as the default text is black.

This will change the options on your left-hand side. There are formatting options for Pages and Blogs. Because we are using bulk editing options, the plugin tries to use generic information like displaying the current page title.

You are free to leave that if you want, or you can edit the appropriate text box to insert the text you want to appear, but take note that the text will not appear in the editor. You’ll need to use the Preview option to view it.

If you click on the Style tab, you can edit the text color and the type of typography (font) that is used. There is also an option to add a text shadow if you wish. What you change is up to you, but be sure the text is readable over your image.

And that’s it. Be sure to click on the “Save” button to apply the changes. You can then view what it looks like on your site.

Again, the free limitations of Kubio might not make it the best choice as it does not allow you to edit a page header individually. That said, if you do upgrade, it is one of the easier options to add a hero image in WordPress.

Some other excellent page builder plugins to consider include Elementor, SeedProd, Themify, and more. For a more comprehensive list, check out our picks for the best page builders you can use in WordPress.

Method 3: Using Your Theme

Hero areas are extremely common elements for websites to design, and as a result, many themes have a hero section built in. That said, not every theme is going to have one, but it only takes a minute to check.

In this example, I am going to use the Sydney theme since it has a hero section baked in. You can access it by using the Customizer area of WordPress. This is probably the most direct method on this list, but since it is theme-dependent, it is not for everyone.

Note: There are two types of themes in WordPress. The traditional themes and the block-based themes. This method is for traditional themes. Check method 4 to learn about block-based themes.

Step 1: Locate the Hero Section

The hero section of any theme can be found in the theme customizer section of WordPress. That said, it is not always in the same location. The best way to locate it is to consult your theme documentation.

You can find the theme customizer by clicking on Appearance and selecting the Customize option.

Note: If you do not have a Customize option, then that means you are using a block-based theme. This method is not for you. Check the next method for block-based themes.

The theme customizer allows you to change various aspects of your theme, like colors, fonts, and even layout options. In the case of the Sydney theme, there is a dedicated Hero Area that contains all of the settings we will need.

In other themes, you may find the hero area options in the Header section, or they may call it something else. Again, the theme documentation is the best resource for finding this.

Click on the Hero Area option.

Step 2: Choose the Hero Area Type

The Sydney theme gives you three options for creating a hero area. You can use a static image, create a slideshow of images, or use a video. You can create two hero areas. One for your front page and one for the rest of your pages.

To choose what type of hero area you want to create, click on the Hero Type option.

By default, there is no hero area in Sydney. Instead, it is just the header. Choose the type of hero area you want to create. You may think that choosing the image option is the best choice, but instead, we want to choose the Full Screen Slider.

Thus, in this tutorial, I am creating a full-screen slider hero area on my front page.

Step 3: Create the Hero Area

Now that we have done that, it is time to add your hero image. To do that, return to the previous options and select the Hero Slider option. If you choose to create an image or video hero banner, you would choose the Hero Media option.

The reason we are choosing the slide show is because we can overlay text on top of it. While you can add multiple images that will shuffle, we are just going to create a single one, but the process is the same for each slide you create.

Select the First Slide to expand the options. Click on the “Select Image” button.

This will open up the media library, where you select the hero image you want to use. Once added, you will be able to add overlay text to the slide. Simply select the appropriate box on the left-hand side to edit the text.

There is also a button that you can adjust. To do this, click on the Slider Button option underneath the last slide.

Here, you can add the URL that the button will take the user when clicked and the text. You can also edit the button directly to change the color of the button itself and the font.

After this is complete, you have successfully created a hero image for your site. If you want to create a slideshow, simply repeat this step on a different slide.

You may also be wondering where the styling options are. They are locked behind the Pro version of this theme, so if you are a fan of Sydney, consider upgrading today.

Be sure to save the changes you made by clicking on the “Publish” button on the top left.

There are also the slider settings. You can use these to determine how the slideshow will behave, but since we are just doing a single slide, we can leave this alone. That said, the settings there are easy to understand if you want to make a slideshow.

And that’s it. Again, do not forget to save the changes you have made.

Method 4: Using the Full Site Editor

The last method I will showcase is using the Full Site Editor. This is only available on block-based themes, but it is available for all of them. As such, what theme you choose will not matter as long as it is block-based.

With that said, I do think that this method is a bit harder for beginners, as you need to create the hero area yourself. While it isn’t difficult, it can be a bit frustrating.

To keep things clear, I will be using the default Twenty Twenty-Five theme.

Step 1: Enter the Full Site Editor

The first step is to enter the full site editor, which is simple enough. Click on Appearance and select the Editor option.

If you do not have the Editor option and instead have a lot of other options, then you are not using a block-based theme, which means this method is not for you. Refer to method 3 for your theme.

Step 2: Choose a Page

The first thing you should do is choose what page you want to add the hero image to. To do this, click on the Pages option.

This will pull up a list of your existing pages that include both live pages and drafts. In my case, I will choose my landing page, but the choice is yours. You can also choose to add a new page and build one from scratch.

Now, simply click anywhere on that page and the left-side options will go away. We will now begin the editing process, which is nearly identical to using the regular Gutenberg editor.

The only difference is that you have more options and can edit global settings.

Step 3: Create A Hero Area

We need to begin by creating a hero area where you can place your image. The first part is understanding where the hero area is located. It should be directly below the header.

You can easily identify where the header is by using the List View feature. To see it, click on the three horizontal lines on the top left.

The Header should be the first option. We need to insert a Group block directly underneath this. To do this, click on the three dots next to the Header and choose the Add After option.

Alternatively, you can click on the element below the Header and select the Add Before option to get the same result.

Note: You may need to choose to edit the template if you were using one. This doesn’t change anything, it just allows you to edit the template.

This will add a blank paragraph block. Click on the “+” button and choose to add a Group block in this location. Once the Group Block is placed, you now need to select the layout. In this case, select the first option.

The difference between these layouts is the number of container areas you have to work with. Feel free to play around with them to see which is best for your needs.

Now, use the “+” button within the Group Block to add a Cover block.

Lastly, add your hero image to the cover block from the media library.

Take a moment and explore the cover block settings. Here, you can change things like the image opacity, alignment, and so on, but you may want to wait until you add other elements to see how it looks with everything added.

The image should now be in place and you are ready to customize the Hero area you just created.

Step 4: Customize the Hero Area

While you could call it a day after adding the hero image in WordPress, let’s spend some time customizing the section and thinking about what we can add to make it better.

Let’s keep it simple and add some overlay text and a button. You may already notice that there is a paragraph block on top of the image. While this would be fine if we just wanted to add the text alone, in this case, we want to add another Group block.

Start by replacing the paragraph block with a group block. Then, choose a layout that is appropriate for what you want to add. In this case, I will choose the one with two horizontal areas. That way, I can use one for text and the second for a button.

You will now have two areas to work with. Let’s start with the top and use that for the text. In this case, you can use a heading block if you want the text to be larger, or you can use a paragraph block for smaller text. I chose the Heading block.

Once added, simply insert the text. You can use the block settings to change the color, font type, alignment, and so on.

For the second container area, add a button block. Using the block settings, you can change the color of the button, add text, change the font, and change the URL for the button’s link.

It’s worth pointing out that you have the entirety of the Gutenberg editor at your disposal. Feel free to add any elements you want and change the settings of each block. This process can take time, but the result is always worth it.

Once you are satisfied with what you have made, don’t forget to save the changes. Your live site will look exactly as it looks in the full site editor.

Hero Banner FAQ

You may still have some lingering questions about hero images in WordPress, so we have assembled the most frequently asked questions with our answers. That said, the topic is broad, so if you have any extra questions, leave them in the comment section.

Create An Eye-Catching Hero Image Today

WordPress provides a staggering number of options for adding a hero image, but regardless of your chosen method, the most important part is the image creation process. After all, a picture says a thousand words.

Just like how a good hero image can help keep users on the page, a bad one, or one that sends the wrong message, can drive users away from the site. As such, the amount of research and design that goes into the image is paramount.

If you have a physical location, taking a picture directly in your office with real staff is always a good idea. I would only use stock images if you do not have an office or if you feel they are depicting what you want.

You may also want to consider hiring a graphic designer to create one for you, but that is expensive.

Which method did you use to add a hero image in WordPress? Has adding a hero banner improved your bounce rate?

The post Simple Ways Add a Hero Image in WordPress appeared first on GreenGeeks.