- This topic has 13 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
Hi Guys,
Long time no see. 😉
I’m trying to reconstruct a sidebar layout similar to the following pages:
My goal is to have the “About the Author” section to the right of the title inside the tan hero section, and have the “Related Posts” section show at the bottom right of the post content itself.
I’ve begun by creating a page hero element and a sidebar element, but not sure how to take it from here.
Demo: https://sternstaging2.com/2023/01/24/the-surprising-ways-that-sleep-affects-your-metabolism/
Any suggestions on the best way to do this? I wonder if it might be easier to add the Author Bio to the page hero element itself, though this might lead to alignment issues with the actual sidebar.
Then perhaps for the Related Articles some css could bring it to the bottom of its container?
Thanks in advance!
Matt
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.
Customer Support
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_headertobefore_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/
Customer Support
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!
- You must be logged in to reply to this topic.
