[Resolved] How to add container like this

[Vidyut]

Hi, I want to make this type of green or other colored container in archive pages, and single post page. Please help me, I’m new here and not much technical.

Thanks.

[David]

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

[Vidyut]

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

[David]

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.

[Vidyut]

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

[Fernando]

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

[Vidyut]

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

[David]

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

[Vidyut]

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

Like the first image I’ve listed.

Thanks

[David]

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

[Vidyut]

Okay, here is my site-

[Fernando]

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.

[Vidyut]

Thanks, but it is not working on mobile.

[Fernando]

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;
    }

[Vidyut]

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.

[Author]

Posts