How to add container like this

Hi there,

you can create a Block Element - Page Hero.
See the doc here and check out some of the videos that will show you how:

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

Let us know how you get on

Thanks a lot, I understood. I also want to know how to make posts appear like this image. And when you hover it comes in.

Thanks again

The basic post design can be created using a Block Element - Content Template:

https://docs.generatepress.com/article/block-element-content-template/

There you can design the indiviudal post card.
And set the Display Rules Location to blog and All Archives

This will replace the default themes archive cards.

Thanks I got it. Last question I have, how to make my posts featured images full container width. Like this image below

It is also floating, so how I can make it.

Here is what I'm having currently,

Thanks

Hi Vidyut,

For reference, can you provide the link to the site in question?

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

Okay, thanks here is the site below or one post from the site that has featured image like i want

Go to Customizer > Layout > Blog --> Featured Images, and select the Posts tab:

https://docs.generatepress.com/article/adjusting-the-featured-images/

And uncheck the Display padding around images

okay, got it. But, how to make it appear a bit up on the Hero?

Like the first image I've listed.

Thanks

It will require some CSS. Can i see your site ?

Okay, here is my site-

Try adding this through Appearance > Customize > Additional CSS:

@media (min-width: 769px) {
    .single-post .content-area .site-main {
        margin-top: -40px;
    }
}

Replace the -40px value with your preference.

Thanks, but it is not working on mobile.

I see. Just remove the @media query if you want it for mobile as well.

For instance, try this instead:

.single-post .content-area .site-main {
        margin-top: -40px;
    }

Thanks, it works. Last thing I've is, how can I make the archive featured image full width to container and also text to adjust. And also the shadow with animation effect.

Here is the archive link i want [first link]

And second link is my current site's archive post containers.