[Support request] Page Hero

[Lee]

Hello there,

I’m trying to create a page hero (heading) for the front page of my website. I’m trying to achieve something similar to the link provided. I’ve played around with the padding options for ages but I don’t seem to be getting anywhere close. Could you please help me achieve this?

Also notice, that when the page of what I’d like to achieve is cut down to mobile size, the image within the header responds by appearing below the text – rather than with the text running inside the image (as it does with mine). I’d also like to achieve this.

Many thanks,

Lee.

[David]

Hi there,

you may be better off using a Block Element instead of the Header Element:

https://docs.generatepress.com/article/block-element-overview/

If you install the GenerateBlocks plugin you will be able to add a Container Block for the background, a Grid Block for columns etc…

https://wordpress.org/plugins/generateblocks/

[Lee]

Ah I see. Thanks for this.

If I’m only going to be using this specific Block once on the front page, is it worth creating a Block as such, or would it be any different to create the block within the actual page?

Also, if I was to use a Block, would this affect SEO with keywords and stuff?

Many thanks again,

[David]

For sure – you could create this directly in the Page Editor.
I would still recommend using the GenerateBlocks plugin instead of the Core Blocks.
Ie. use Container Block instead of Group Block.

You will need to set the Page Builder Container to Full Width:

https://docs.generatepress.com/article/content-container/

Then construct your page using Container Blocks.
Each container will allow to create full width or contained content.

For the Merged header you would simply remove the content from your header element and just leave the merge site header option enabled.

NO – blocks aren’t treated any differently in regards to SEO.

[Lee]

Brill. I’ll give this a shot. Thanks again.

[David]

Glad to be of help.

[Lee]

OK, so can you tell me if I’m on the right track here.

I’ve created a Block Element that’s now visible on the front page. I’m a little confused as to how I’d merge into the logo and navigation though? Could you help me achieve this please?

Many thanks again.

[David]

You still need to create a separate Header Element.
Do not add any content to the element or change any other settings, just go to the Site Header tab, set it to Merge with Content and edit the header / nav colors to suit.

[Lee]

Got ya! Brilliant, thank you.

And one final thing regarding this, when I minimise the screen to view the front page on a mobile, I’d like the text to appear above the image, as it does via the link attached.

Many thanks again,

[David]

Bit trickier.
Do you have a transparent background image? As currently it has a grey background which will be a problem when we reposition it below the text

[Lee]

I think I could make it transparent.

[David]

Scrub that

Select the Container Block and under Advanced > Additional CSS Class add – hero-block
Set the Background Color for the Container Block to #f6f7f8 – this will match the color in your image.

Now can you give the Left hand Grid Block a minimum height in its Settings > Layout. Make it around 300px.
Then select the Right hand Grid Block, select Layout > Mobile Tab and in the Order field add -1

Once thats done ill provide some CSS to reposition the image.

[Lee]

I’ve added the CSS class, and changed the colour.

However, when I select the left hand grid block within the container and then select Layout, I only see options for Container Width, Vertical Alignment, and Remove Vertical Alignment?

Am I on the right track?

Many thanks again.

[David]

Sorry the Min Height is under Spacing.

[Lee]

Brill. Thank you.

Ok, I’ve done all of that. Is there anything else I need to do?

[Author]

Posts