DEV Community

Cover image for Creating a Full-Width Hero in GeneratePress (Free Version)
mark l chaves
mark l chaves

Posted on • Updated on

Creating a Full-Width Hero in GeneratePress (Free Version)

I'm in the middle of evaluating fast loading WordPress themes. Part of my due diligence is creating a typical home page in the theme I'm testing.

I was excited to find out how quickly I could create a beautiful full-width homepage Hero image in GeneratePress—without any plugins or premium add-ons. So, I'm sharing.

For this tutorial, we'll use the free version of the GeneratePress theme and the Gutenberg WordPress block editor.

BTW, I am not affiliated with GeneratePress nor any software vendor for that matter.

What We'll Cover

  1. GeneratePress theme settings
  2. Gutenberg document settings
  3. Gutenberg block settings
  4. Extra custom CSS for umph!

If you want to follow along, here's the image I used from Unsplash. Feel free to download it, crop it to 1280x849 pixels, then optimise it to around 200 KB or less.


GeneratePress Theme Settings #

Header

Navigate to Appearance > Customize > Layout > Header

  • Header Presets: Navigation Right
  • Header Width: Full
  • Inner Header Width: Full
  • Header Alignment: Left

Generate Press Header Layout Settings

Navigation

Navigate to Appearance Customize > Layout > Primary Navigation

  • Navigation Width: Full
  • Inner Navigation Width: Contained
  • Navigation Alignment: Left
  • Navigation Location: Float Right

Generate Press Navigation Layout Settings

Make sure you hit the "Publish" button to save your changes. Now, create a new page using Gutenberg (block editor).

If you need a Gutenberg refresher, scope out this Gutenberg tutorial from Shout Me Loud.

Alright! Let's hit the document settings.


Gutenberg Document Settings #

Select these options for your document settings.

  • Sidebars: Content (no sidebars)
  • Page Builder Container: Full Width
  • Disable Elements: Content title

Got all that? Great. Time to create a cover block.

Add a Cover Block

Add a new block at the top of the page. Select Cover as the block type.

Gutenberg Cover Block

Upload the image you prepared earlier.

Gutenberg Upload Media

Now, let's tweak the settings for our new cover block.


Gutenberg Block Settings #

Select these options for your block settings.

  • Media Settings: Fixed background (gives us a hip parallax effect)
  • Dimensions > Minimum height pixels: 849px (remember the height of our hero image above?)
  • Overlay > Background Opacity: 50%

Whew! We're almost there.


Custom CSS for Some Umph!

Ok. So I added custom CSS to ensure the following:

  1. Our top nav bar is non-sticky
  2. Our top nav bar has a transparent background
  3. Our top nav bar isn't hidden by the cover block we created
  4. Our site title pops from the dark background
  5. And finally, so that this styling is applied only to the homepage

Here's the custom CSS I used.

/* Need this to make transparent header overlay for homepage hero. */
.page-id-6 .site-header {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    background-color: transparent;
}

/* Brighten the branding text to make it pop on a dark background. */
.page-id-6 .main-title a {
    color: whitesmoke;
}

Don't know where to put this CSS? Please read How to Add CSS to WordPress.

Don't know how to find the page ID? Bring up your page in a browser. View the source. Search on "<body".

Getting the Page-ID

Yay, you did it! High five!

Homepage Hero using Gutenberg running on the GeneratePress WordPress Theme

Thanks for reading. Share & enjoy ;-)

The hero image used is a 35mm film scan of a horse & buggy driver in the historic city of Yogyakarta, Indonesia.

Discussion (0)