DEV Community

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

Posted on • Edited on

4 2

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.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more