[Resolved] Hero header for Post Archive page using shapes

[Sam]

I am trying to create a hero header for my post archive page, with the nav menu and logo sitting on top.

I am currently using an element header with a background image merged into the nav/header – which looks great but…

I would love to be able to control the style of background image more. Ie add shapes, icons, text etc

How would I go about this.

My front page has an example of what I would like to achieve

https://www.staging.watersportswhiz.com/

[Leo]

Hi there,

Have you considered using a block element instead of a header element?
https://docs.generatepress.com/article/block-element-overview/

Then you can use GenerateBlocks to create a similar page hero as in your front page.

Let me know 🙂

[Sam]

Hey Leo – Thanks for the reply

I should have been clearer – it was late in the day and my brain wasn’t working

If using a block and hook, how can I make the hero merge into the nav and logo on the topline?

Or, would I need to create these manually?

Its the overlay/merge I cant figure out, tried quite a few hooks, block and header element combos – it went full modern art for a while, lol!

[David]

Hi there,

you can use a Header element, without adding any content to it – just skip to the Site Header tab and set it to Merge with Content, this will unlock options for setting the navigation colors.

This will merge the site header with any content below it, whether that be the post content or a block element etc.

[Sam]

Thanks David – how would I add the page / category title to block element?

[Sam]

Ok my follow questions

1) How to add the page tile to the block so it dynamic
2) What’s the correct hook for the block element
3) How to remove the paper title from the content

[Leo]

how would I add the page / category title to block element?

This should help:
https://generatepress.com/forums/topic/add-page-title-in-page-header/#post-245321

We will be making this a feature in the next version of GP Premium 🙂

Also, the block element hook – what’s the right hook

generate_after_header would be what you are looking for.

[Sam]

Thanks Leo – you know what I am going to ask next

Where do add that short code, code.

I assume some function file?

[Leo]

Yup – one of these methods:
Adding PHP: https://docs.generatepress.com/article/adding-php/

[Sam]

Ok – I am sorry for the 20 questions

https://www.staging.watersportswhiz.com/knowledge/

1) I now have a gap under the header to the post/cat/content – how to remove

2) Also the name of the page title is now showing just about the content – obviously I will be displaying the same in the hero header. How to remove

[Elvin]

Hi,

1.) Not sure what you mean by “gap” did you mean the content’s padding top? (shown in red box here: https://share.getcloudapp.com/X6u0bOnj)

2.) I don’t see the page title above the content. (shown on the same screenshot)

To clarify: Have you solved these already? Let us know.

[Sam]

Hi Elvin

I rolled back to a normal header element as what I was trying achieve just introduced more and more changes. With my limited CSS and PHP knowledge I just didn’t feel comfortable.

The PHP in the link provided by Leo strangely brought in the title of a random blog post on my category archive header.

Just going live without the shapes or extra item that a bloxk could provide.

The most important thing was to add a gradient to the hero image so all my header had a similar style

I have manually added a liner gradient to the hero image using CSS for each instance of the page hero. I only have 5 pages, the rest are blog post with their on header using the featured image.

.page-id-3349 .page-hero, .page-id-3338 .page-hero, .page-id-3383 .page-hero, .page-id-2897 .page-hero, .page-id-3372 .page-hero, .page-id-3361 .page-hero, .author1.pagehero,.category .page-hero {
background-image: linear-gradient(180deg, rgba(0,0,0,0.3),rgba(20,70,160,0.3)), url(https://cdn.shortpixel.ai/spai4/w_1920+q_lossless+ret_img/https://www.staging.watersportswhiz.com/wp-content/uploads/2020/06/DSC_0705-Pano.jpg);
}

Note sure if that was, or is, the most efficient way of doing this

[Elvin]

Note sure if that was, or is, the most efficient way of doing this

That custom CSS is actually the way to go. Although, I’ll perhaps tweak it a bit.

I’ll do it like this:

I’ll create a Header element with display rule location set to the page specified in your CSS. I then add the bg image within the Header Element’s background image setting.

Lastly, I’ll add this on the header elements area instead of the longer custom CSS code.

<style>
.page-hero {
background-image: linear-gradient(180deg, rgba(0,0,0,0.3),rgba(20,70,160,0.3));
}
</style>

But yes, they do literally the same thing. The difference is which is the better practice.

As much as possible, try to do everything within the UI. We only resort to custom CSS if the styles we want to achieve are not doable within the available options.

[Author]

Posts