[Support request] Large post hero image.

[Mark]

Hello,

I was wondering if someone could point me in the right direction to some resources that could help recreate this style of post header/title:

https://matadornetwork.com/read/baby-elephant-thailand/

Is it achievable with elements etc? The parts I’m specifically referring to is big hero featured image for posts, and then the title contained in a coloured box, lower down but overlaying slightly, and then the meta data.

Thanks in advance!

[David]

Hi there,

thats a fun design. It will take a little work.
I would approach it like so:

1. Create a Block Element page hero for the Featured Image:

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

If you’re using GenerateBlocks 1.5 then you can use the new GB Image Block and set it to display the Featured Image ( instead of the GP Dynamic Image Block – but either works ).
https://docs.generateblocks.com/article/image-overview/

By default this will appear below the header.

Set the Display Rules to: Posts > All Posts. Or wherever your require it.

2. Now create a another Block Element, and construct your Title / Meta section starting with a GB Container Block.
But change the Element Type to Hook:

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

and select the before_content hook

This will position it where you require it.

Again set the same Display Rules.

Before leaving this element, select your parent Container Block and in Advanced > Additional CSS Class(es) – add a custom class eg. single-post-title-block or something.

We can then use that to add some CSS to create the overlap.

Give that a go, let us know how you get on

[Mark]

David, this is so useful and exactly what I was looking for!

Thanks so much, will give it a go.

Cheers

[David]

Glad to hear that!
Let us know how you get on, and if i can see the site i can provide the CSS for creating the overlapping elements.

[Author]

Posts