Customize Sidebar

Alternatively, perhaps the Related Posts section could be its own hooked element? Then the sidebar is technically empty, though the content appears to be in the sidebar.

Hi Matt,

My goal is to have the “About the Author” section to the right of the title inside the tan hero section

Try change the page hero's hook name from after_header to before_main_content.

and have the “Related Posts” section show at the bottom right of the post content itself.

Try adding this CSS:

.single-post .is-right-sidebar .gb-container.related-posts > .gb-inside-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.single-post .is-right-sidebar .gb-container.related-posts > .gb-inside-container > *:last-child {
    margin-top: auto;
}

.single-post .inside-right-sidebar, .related-posts, .related-posts > .gb-inside-container {
    height: 100%;
}

Thanks Ying,

The css for the related posts worked great.

Switching the hook for the page hero caused some problems: https://sternstaging2.com/2023/01/24/the-surprising-ways-that-sleep-affects-your-metabolism/

I should have clarified that this is the look I'm going for in the hero section: Link

I also tried the before_content hook and that didn't change much.

Let me know if you have ideas.

1. Do not use the header element to merge the site content with the header.

2. It's better to save the background as an image or SVG, then apply it as the body background.

1. That worked.

2. You mean, instead of the shape divider and background color? What about making the background go across so it covers the Author bio section?

2. You mean, instead of the shape divider and background color?

Yes, in your design, there are also some pattern in the background, so why not combine the background color and the patterns to be 1 image?

What about making the background go across so it covers the Author bio section?

That's how the body background image work.

I'm not quite seeing how it will work, but will play around with it and see. Is the body background image set in customizer, or is this a different hook?

. Is the body background image set in customizer, or is this a different hook?

Yes, there's a premium module called background.

But the module add background sitewide, can't really select it only for posts.

So I think using CSS would be better if you don't want the background image to show everywhere.

Just got another idea, you can use a block element with background color and shape, set a min-height, then insert it before_header.

And then we can use CSS to make it position:absolute; and stick to the top.

ok, that's done. I tried position:absolute; in the inspector and it just disappears. What am I missing?

https://sternstaging2.com/2023/01/24/the-surprising-ways-that-sleep-affects-your-metabolism/

Hi Matt,

Can you try adding this code?:

.gb-container.hero-shape {
    position:absolute;
    top:0;
    left:0;
    z-index: 0;
    width: 100%;
}

header.site-header, nav#site-navigation {
    background-color:transparent;
}

Thanks Guys! This is looking really good. I'll play around with this and see how it goes. :)

Closing the ticket.

You're welcome, Matt!