Recreate this blog header with GP and GB

Hi Ian,

The Header can be done with either a Header Element or a Block Element - Page Hero.

The overlaying content marked here - https://share.getcloudapp.com/kpuDrngR - has to be styled with CSS though. It's a simple negative margin-top value for the content container. :D

Thanks Elvin. How do you add the overlay to the background image. Do you add a grid and add the colour over lay to the grid?

Thanks Elvin. How do you add the overlay to the background image. Do you add a grid and add the colour over lay to the grid?

It depends on what you're using. Header element has it's overlay color on the UI when you set the background color - https://docs.generatepress.com/article/header-element-overview/#background-overlay - This option is enabled when you set a value on Background Image.

For Block Element - Page hero, you apply it on the Container Block's background color (GenerateBlocks) and then reduce the opacity of the Background image so you can see the color. If you're using GenerateBlocks Pro, there's an option to do it through the UI.

If you're using something else, you'll have to write a custom CSS for it. :D

Thanks again Elvin.

No problem. :D