Page Hero with Content Inside

Hi there,

Try adding some negative margin-bottom to the container block on the very outside of your page hero block.

Let me know if this helps :)

Hello Leo.
When I give this value,

.one-container .site-content {
    margin-top: -60px;    
}

The content goes below the pagehero block.

Hi there,

Try adding this CSS:

div#page {
    margin-top: -60px;    
    position: relative;
}

And add padding bottom to the page hero so the main content doesn't overlap the contents of the page hero. :D

Thanks. The above code is working when I add in Customize > Additional CSS.
But my PageHero block is only for posts.

How do I add the above code only for posts.
Also I would like the sidebars also to move into the PageHero block, just like the main content.

How to implement these?

We can edit the CSS so it only applies to single post pages.

body.single-post div#page {
    margin-top: -60px;    
    position: relative;
}

Also I would like the sidebars also to move into the PageHero block, just like the main content.

This CSS should apply to the sidebar as well as we're moving the entire content area to overlap the page hero partially. :D

But perhaps I'm missing what you mean. Can you provide a mockup image of how you want it to appear so I can understand it better? :D

Thanks. It worked on the posts.

Regarding sidebars, I meant something as in this image.

https://ibb.co/FgfpHsQ

It should just push into PageHero, just like the main content.
Also the mobile or AMP pages should not be disturbed.

Yes this should work for the sidebar as well as the CSS applies on the entire page container, including sidebar.

But this assumes you have the sidebar enabled. Else, nothing will show. :D

Thanks. I just used the .single-post instead of body class and it works for main content alone.
Should that work with body without sidebars.

Should that work with body without sidebars.

It should - the easiest way to tell is to start a test page and see if it works :)

I have another problem. Whenever I don't set featured image, the display is not proper.

Hi there,

can you share a link to a) a post with the featured image and b) a post without ?

The links are provided in code area.

1. Edit the Page Hero Block element
1.1 Select the parent Container Block.
1.2 In the settings sidebar look for the Remove Container Condition option:

https://www.screencast.com/t/hHrJorVLfv

1.3 Make sure that option is set to Choose.

thanks. it worked.