[Resolved] How can I do this?

[Ravi Dixit]

I have visited a page, URL https://masterblogging.com/on-page-seo/

I saw the shadow of its left and right side of containers.

And the top margin in Minus which make container attached with the header.

This website is also using GeneratePress.

Also, look it’s Hompage and scrolls down to the Latest Blog Post section, How he showcased his latest posts. I mean how he customized this in GeneratePress.

How I can do the same for my site?

[Leo]

Hi there,

– The example page is using Elementor to create everything.

You can add the same shadow in single posts by modifying this existing CSS:

.single .inside-article, .comments-area {
    max-width: 900px;
    margin: 0 auto;
}

to this:

.single .inside-article, .comments-area {
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.13);
}

– First you need to create a page hero for single posts:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/how-to-create-a-page-hero/

Then you can use this CSS to move the container up:

body.single .site.container {
    margin-top: -40px;
}

Target is using the same idea:
https://gpsites.co/target/tech/

– The latest posts section is again using Elementor. You can achieve something similar using WP Show Posts.

To sum up, all of the example site is basically using Elementor.

Let me know if this helps 🙂

[Ravi Dixit]

Thanks, for the help!

Everything is working fine as I expected… I want to ask you something…

1. How to make the corners curve like this https://prnt.sc/oi4csu ?

2. I have created Page Hero but my author gravatar image is not showing there.

Please help me with this.

[Jesus Higuerey]

Hi there for the Author Gravatar check this link, https://docs.generatepress.com/article/page-hero-examples/

Specially Example #2

[Leo]

Can you open a new topic for the separate questions?

Thanks 🙂

[Ravi Dixit]

I don’t think I need to create a sperate topic.

It is relevant to my previous questions…

[Leo]

Try this CSS:

.inside-article {
    border-radius: 5px;
}

[Ravi Dixit]

thanks, It is working now…

[Leo]

No problem 🙂

[Author]

Posts