[Support request] Large post hero image.

Home Forums Support [Support request] Large post hero image.

Home Forums Support Large post hero image.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2262210
    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!

    #2262268
    David
    Staff
    Customer Support

    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

    #2262465
    Mark

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

    Thanks so much, will give it a go.

    Cheers

    #2262505
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.