[Resolved] static home page with hero image + recent posts

[Latinx]

Hello,

I am starting a site using the latest GP-Premium, and I have a home page setup question.

I have set the home page to show recent posts (not a static home page). I don’t want the hero image to show up on every page/post, only on the home page, but keeping the top navigation on all pages/posts.

I want to create the following:

* A static home page with a top menu that contains the logo and navigation
* home page has a full-width hero image that does not display on other pages, with my logo centered on that background image.
* home page contains a block with recent posts in a masonry layout, carousel, or slider.

Do I create a page called “home” and add a full-width image for my hero image – then add the other elements – and then set “home” as my static home page (and then create a blank page called “blog”)?

If so, how do I turn off the header image in the customizer so that it does not display on other pages/posts?

Thanks.

[Tom]

Hi there,

Since your home page isn’t a static page, you’ll want to use our Header Element to create your hero/header: https://docs.generatepress.com/article/header-element-overview/

That way you don’t have to worry about re-creating the posts using blocks, unless you have a plugin to include masonry posts as blocks in a static page.

Let us know if you need more info 🙂

[Latinx]

Hi,
Thanks for getting back to me so quickly.

I don’t have a static home page, but I do want a static home page.

I want only the home page to have a hero image, not all pages and posts.

I want other pages and posts to have a navigation bar without the hero image.

Right now (displaying latest posts for the home page), the hero image area displays on every page and post, which I don’t want.

Today I tried creating a static home page and was able to get that static page to post to the site (I switched back to latest posts, because my static page design didn’t look good – the image at the top did not fill the page like a hero image and I was struggling with the layout, anyway).

I want a static page that has a hero image displayed at the top, without having this same large image area on every page and post. Can this be done with Generatepress?

Your help is appreciated.

[David]

Hi there,

So lets try this.

1. Create a new Page that has no content and set this as your Recent Posts page in Setting Reading. This is now your Blog.

2. Create a second Page you will use for your home page.
2.1 Set a Featured Image – this we will display in the Hero.
2.2 Add whatever other content you want. To display some recent posts use the WP Show Posts plugin:

https://wordpress.org/plugins/wp-show-posts/

2.3 Publish the Page
2.4 Now set this to your Front Page in Settings Reading.

3. Create your Header Element, use the Featured Image as the Background and set the Display Rules to Front Page

We can then review the needs for the single posts and other pages.

[Latinx]

Hello David,

Thanks so much for these instructions. I will try this, and circle back with the results.

🙂

[David]

Let us know 🙂

[Latinx]

Hi David,

1. I created the blank “Blog” page and the Home page.

2. On the Home page, I set the featured image to the image I want for the hero.

3. Used WP Show Posts to display some posts on the Home page. Now, I have posts on the static home page.

4. Set the Home page to the Front page in Settings > Reading. Now, I have a hero image on the home page, and the header & navigation on other pages.

5. Created a Header Element. Under Display Rules I set the Location to Front Page. After creating the Header Element I checked the home page, and it doesn’t look any different. Is this to be expected?

Please take a look at the site and let me know the next steps.

Thanks again for your assistance. 🙂

[David]

Almost there 🙂

Edit the header element and give it some top padding. This will give it some height.
I would use 31% – this your current images aspect ratio and will display the full image on all screen sizes.

[Latinx]

Hi David,

Thanks for the suggestion.

I’m getting an “all or nothing” issue with the header image. Two hero images stacked on the page, or no hero image.

I changed the aspect ratio to 31% height, which caused the hero image to appear full-width near the top under the blue strip with the page title. So far so good.

But below that, I see the hero image again, constrained to the content width (as it appeared before I added the height parameter). I tried removing the featured image from the Home Page, but then both images disappeared.

Thanks again for your help.

Looking forward to your reply, as I have to leave this weird header displayed publicly so you can see it and make a suggestion. :-0 🙂

[Latinx]

Hi again David,

Mystery solved!!

I had set the image to “Featured Image” inside the header element, and also on the Home Page.

I switched this to “Custom Image” in the header element, and them removed the featured image from the Home Page – and now I see the image all the way across the page, and without the duplicate below it.

Again, thanks for your assistance. 🙂

[Leo]

I’m actually only seeing one page hero:
https://www.screencast.com/t/e7UfOG9CnP4

Am I missing something here?

[Latinx]

Hi Leo,
Thanks for taking a look!

I removed the featured image from the page and added it to the Header Element, so here’s only one hero image now.

As I indicated to David, the mystery is solved. 🙂

[Leo]

We replied at the same time.

Glad to hear 🙂

[Latinx]

You guys’ support is awesome.

[Leo]

We try 🙂

[Author]

Posts