Build a Word Press Website Today!!

Click here to Get Started..

How to Add Hero Banner to GeneratePress – Website Builders guide


This is a Hero Banner Tutorial for the Pro version of WordPress theme GeneratePress.

If you are not using this theme or need more info about this theme and its upgrade option please click here.

The Pro version is required to complete this task.

This is the theme we use at Website Builders Guide due to:

  • The support the GeneratePress theme provide is absolutely awesome. There is a dedicated support forum with fast replies and solutions.
  • The customizer is brilliant. Every design option we needed was met.
  • It’s blistering fast, secure & a rock-solid theme.
  • Proven history and has been in development since 2014.

What is a Hero Banner?

This is a banner that runs right under your menu across the width of your website.

hero banner

You can set this up in full width or contained to be the same width as the content area of your website. This is the easiest and fastest way to implement this feature without relying on a page builder.

Getting Started

Add Hero Banner GeneratePress by following this tutorial. Make sure you are using the pro version of this theme otherwise you will not be able to access the options. 

First step – login to WordPress then under appearance click on the GeneratePress link.

GeneratePress Hero Banner

Click on the Element link.

Generatepress Elements

This is where the magic happens. Rather than going under the hood and tinkering with code you simply add what you need within the elements section.

Next click on Add New Button and choose the header option.

Add New

> Next click on the Page hero link.


page hero

Next add what you like here and change the colour settings to suit.


<h1>This is My Tag!!</h1>
><p><a class=”button” href=”#”>Click here to Get Started..</a></p>

If you want to add your WordPress Page or Post Title to be displayed here simple add:


Next Choose container type

Full width your hero banner will be visible across the page from left to right of your browser screen.

Contained will be the same width as your website. So if your website is positioned in the middle of your web browser at say 1150px in width then the hero banner will be the same width. To view the GeneratePress documentation please click here.

The other change you need to make is to the inner container option. This is where your text or other content will be visible. If you want the content to be in the middle of your website which is 1150px wide positioned in the middle then choose Contained.

From here all you need to do is click on the Display Rules link and choose the location where you want to place the hero banner.

display rules

Once you have finished updating your Page Hero details save the changes by clicking on the update button.

Now visit the page or post where you have applied the hero banner and it should now be visible.

Thankyou for viewing this article.