Archived topic
Large post hero image.
3 replies · Started by Mark on June 23, 2022
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!
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
David, this is so useful and exactly what I was looking for!
Thanks so much, will give it a go.
Cheers
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.
