How do I create a full-width hero cover that combines with the nav

Hi Goran,

This question just came in at a good timing :)

It will be easy to set up with GB and GPP 2.0's new feature. With dynamic content being added to Block elements ( appearance > elements), you'll be able to set this page hero using a Grid structure.

Once the block element is created, set it to Page hero as element type, assign it to post > all post as location.

But you'll still need to create a Header element in order to make page hero merge with site header. So set it to merge under site header tab, then assign it to post > all post.
https://docs.generatepress.com/article/header-element-overview/#merge-with-content

If nothing goes wrong, GPP 2.0 Alpha will be released later today.

Hi Ying, thanks for the help.

Could you actually walk me through it step by step if you have the time.

I think I'm only half-following what you're saying.

So I'm in Appearance>Elements.

I Add a New Element > Type Block (yeah?)

Once the block element is created, set it to Page hero as element type (where is this?)

Choose Location Posts > All Posts

create a Header element in order to make page hero merge with site header (can you elaborate?)

Perhaps I'm not seeing the Hero because as you said, Alpha will be released later today? Meaning I'll have to wait a bit yeah?

The solution I suggested is based on you update to GPP 2.0 Alpha which will be released later today.

I can walk you through with screenshots when you have it installed, since there'll be big differences from the current version (that's why you can't see some options for now)

Let me know when you updated, keep this topic unsolved for now :)

Thanks, I just installed it. Ready when you are.

Great, try to follow the steps below:

1) Go to appearance > elements, create a new Block element.

2) Create a structure like this:
https://www.screencast.com/t/5upKBxgrn

3) Set Container A to full width, set its inner container to contained or give it a width value, eg. 1120px.

4) Set container B1 to 15% width, B2 to 85% width.

5) Set a background image for Container C, give it some padding depends on your needs. Set Background Size to contain (it's Full by default). You could also set the background image using featured image. The video I linked also demonstrate this part.

6) Choose H1 as the Headline block, choose Title as Dynamic text type, choose Single post as Dynamic link type. Here's a video demo on how to use the dynamic elements.
https://www.youtube.com/watch?v=-ZTQP_KA2xE&t=9s&ab_channel=GeneratePress

7) Set background color for Container A.

8) In element editor, choose Page hero as element type, you can also choose to disable the default title. In display rule, choose post > all posts as location.
https://www.screencast.com/t/MACcA9f7

9) Go to Appearance > elements, create a new Header element. Choose Merge as Merge with Content. Set post> all posts as location.

You'll need to adjust the paddings/margins here and there to find out the best layout. Make sure your menu/header background color are set to transparent.

Let me know :)

Thank you, this an awesome new feature.

I've implemented it successfully.

Yes, it is amazing!

Glad to know you get it done with our new feature :)