[Resolved] Styling H1 in Page Hero

[Gerry]

I’m sure this is very simple but I cannot figure it out:

In the GP Page Hero on this page https://www.vietnam-travel-guide.com/ you can see that the H1 appears as white text on top of the featured image.

I’d like to add a coloured box behind this text as I’ve done on another website which uses a different theme:

https://www.spanish-fiestas.com/festivals/san-fermin/

How do I do this?

Thanks

[Fernando]

Hi Gerry,

You can use a Block Element – Page Hero.

Install GenerateBlocks free plugin. Then, add a Container Block in you Page Hero and a Headline Block.

Add paddings for your Headline Block. Then add a Background color.

To center it, set the text alignment to center in the toolbar, and add identical top and bottom paddings in the Spacing section of the Container Block.

[Gerry]

Hi Fernando

Thanks for your help.

I went through your instructions as follows:

Add New Element
Choose Type > Block
Element Type > Page Hero
Add GenerateBlocks Container
Add GenerateBlocks Headline
Headline Padding Block – add 20px padding all round
Headline Padding Block – add background color (green)
Headline Padding Block – change text color to white
Align Text to Center in Headline Toolbar
Change H1 to H2 in Headline Toolbar
Make the top and bottom paddings identical (20px) in the Spacing section of the Container Block.

I then applied a display rule for it to just appear here:
https://www.vietnam-travel-guide.com/blog/

Unfortunately, I only see the green container without text or the featured image background.

All other pages on the site using a Header Element have the H1 on the featured image but without the colored container around the text which I’m trying to create. Like this:

https://www.vietnam-travel-guide.com/dalat/

Any idea where I’m still going wrong?

Thanks

Gerry

[Fernando]

What are you planning for the H1 Headline? Is the text dynamic like the post/page title or just a static text?

Can you share temporary admin credentials, and I’ll check your structure?

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Gerry]

Hi Fernando

After a lot of trial and error I seem to have achieved what I was looking for:

https://www.vietnam-travel-guide.com/

You can see that the homepage takes the selected background image for its container then every other page correctly takes its featured image as a background image.

The only one which doesn’t do that is the blog page at https://www.vietnam-travel-guide.com/blog/ which ignores its featured image and instead shows a background taken from the first post which appears below it. Is there a setting I’ve missed for this? I tried clearing the cache but to date this hasn’t worked.

Thanks again

Gerry

[Ying]

Hi Gerry,

The blog page is an index page, so the featured image added to the posts page won’t work.

You’ll need to create another block element for blog.

[Gerry]

Okay. Thanks Ying. All sorted 🙂

[Ying]

Glad to hear that 🙂

[Author]

Posts