[Support request] Custom header design

[Dev]

Hello,

I want to create a single post header as the below website have

https://www.safalniveshak.com/long-term-investing-is-hard/

And for that, I copy the Grek (starter site element) and paste that into my element.

But after that, I say that the featured image is not stretching towards the left and the right.

So, please tell me what shall I do to make that sort of header. I’m adding my site URL in the private box.

[Dev]

?????

[David]

Hi there,

if you want the ( hero ) header design to be full width, whilst keeping your content contained, then you need to use a Block Element – Page Hero to add it:

https://docs.generatepress.com/article/block-element-page-hero/

This will place it outside the content container so it can fill the full width of the screen.

[Dev]

Hi,

I have already created a hero block in the element, but still, the hero block is not going full width.

I’m adding the URL in the private box.

Can you please tell me what changes I have to make?

[David]

Eid the Block Element, and in the sidebar it will list the Hook, what is that Hook set to ?

[Dev]

Hello,

That hook is set to HERO.

[David]

Can you share a screenshot of what you see there ?

[Dev]

Hi,

Please check the screenshot URL – https://prnt.sc/CuCe4NpHbu1H

[David]

Where its says Quick hook select change that to After Header

[Dev]

Thanks, it does the job 🙂

[David]

Glad to hear that

[Dev]

Hello,

After the GP or GPP updates or either after the WordPress 6.10 update my header design has changed automatically.

So, this is what my present header looks like: https://prnt.sc/yY7qxQAB2kE7

And this is how I want to make it: https://prnt.sc/wikO01zA1AhX

So, can you please tell me what changes I need to make in my current header element so that it looks like the one I want?

I’m adding the URL of both sites in the private box.

Please let me know.

[Fernando]

Hello there,

To clarify, are you looking for something like this?: https://share.getcloudapp.com/z8uQzXkj

Let us know.

[Dev]

Hi,

Yes, I need the exact design you have shown in the screenshot above.

The only change is that I want the headline (Post name) in the center.

[Fernando]

Create a new Block Element – Hook. Hook it to before_main_content.

Then, move/copy and paste all you current Block Element – Page Hero’s Blocks there.

Then in your Block Element – Page Hero, give the Container Block which has the Background image a min-height in the Block settings.

After you’ve done this, we’ll need some custom CSS.

Let us know when you’re done.

[Author]

Posts