Creating a Full-Width Hero in GeneratePress (Free Version)
Tags: wordpress, webdev, gutenberg, css
Published: 2020-03-13 05:56:24

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&mdash;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](https://unsplash.com/photos/MNmYtfLvKsA). Feel free to download it, crop it to 1280x849 pixels, then optimise it to around 200 KB or less.

---

<a name="theme-settings"></a>
## GeneratePress Theme Settings [#](#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](https://dev-to-uploads.s3.amazonaws.com/i/w4irzxa4f5oh2gahjh1u.png "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](https://dev-to-uploads.s3.amazonaws.com/i/b9jv853u8sk5ly53twtz.png "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](https://www.shoutmeloud.com/tutorial-use-wordpress-gutenberg-editor.html) from Shout Me Loud.

Alright! Let's hit the document settings.

---

<a name="doc-settings"></a>
## Gutenberg Document Settings [#](#doc-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](https://dev-to-uploads.s3.amazonaws.com/i/z7khyg3194ohnpdyiv44.png)

Upload the image you prepared earlier. 

![Gutenberg Upload Media](https://dev-to-uploads.s3.amazonaws.com/i/nh196makhoivc13ecdb8.png)

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

---

<a name="block-settings"></a>
## Gutenberg Block Settings [#](#block-settings)

Select these options for your block settings.

- Media Settings: Fixed background (gives us a hip [parallax effect](https://www.w3schools.com/howto/howto_css_parallax.asp))
- 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.

```css
/* 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](https://medium.com/@marklchaves/adding-custom-css-to-your-wordpress-website-how-to-guide-a50b474af36d).

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](https://dev-to-uploads.s3.amazonaws.com/i/lo3vb85m6vfqkucvlwsu.png)

Yay, you did it! High five!

![Homepage Hero using Gutenberg running on the GeneratePress WordPress Theme](https://dev-to-uploads.s3.amazonaws.com/i/uqy9jh531rp1hkg2ilxh.jpg)

Thanks for reading. Share &amp; enjoy ;-)

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