Archived topic
Which layout?
7 replies · Started by Henk on March 25, 2022
Hello,
I would like to make my website friendlier and more attractive.
One of of things to improve is the layout of pages and blogs.
Can I get your advise how I could implement my redesign and that's also kind of best-practice.
In the private part I included a screen design of what I'm thinking about.
If you have a better design in your mind that's also welcome.
The first part included the header and a short description of the service we deliver to clients. The width is 2/3 content and 1/3 a CTA and a menu with related content that's relevant for the main topic. At the end of the first part there is an CTA.
For long content pages I'm thinking of a second part of the page. The structure is 1/3 - 2/3.
At the left site is a floating table of contents. At the right side is the actual content with a width of 2/3.
Can you give me a suggestion how I could realize this?
* Can I build 2 main containers: one for the upper part and one for the second part? And inside these main containers I can create more containers to structure the layout. Or is there another way to solve this?
* how can I make the table of contents floatable in the second container?
* what screen width should I use a fixed width of 1200px of full width?
Thanks,
Henk.
Hi there,
i would probably approach that like so:
1. Content Container of 1200px wide.
2. The Hero Image options:
a) if you have the appropriate sized images then Customizer > Layout > Blog -> featured images, set the location to Above Content.
b) alternative is to use a Block Element Page Hero.
3. Within post editor, construct your sections with GenerateBlocks Grid Blocks for the column split and Container Blocks for the horizontal CTA section.
4. The Floating section can be achieved with some CSS - happy to help with that when the site layout is setup and i can see it.
Hi David,
Thanks for your help.
I have finished structure of the page, the page URL is included in the private area.
The layout is still a bit busy and compact; to fix that I need some time to think about it.
Can you help me with the correct CSS to make the table of contents floatable?
Thanks Henk.
Hi Henk,
Try this CSS:
.gb-container-eb725728 .gb-grid-column:last-child {
position: sticky;
top: 160px;
}You can give the container block which wraps the Grid block a custom class, eg. upper-container, then the CSS would be:
.gb-container.upper-container .gb-grid-column:last-child {
position: sticky;
top: 160px;
}Hi Ying,
I think we're talking about the wrong container.
You mentioned the container with number eb725728, but I think it should be container-id e290fe43.
In that container there is a grid with two columns. The first container contains the table of contents, I marked the ToC in the attachment.
Can you help me with the right CSS to make this ToC floatable / sticky?
Thanks Henk.
Hi Henk,
If that’s the case, here is a CSS you may try:
@media (min-width: 1025px) {
/* CSS in here for desktop only */
.gb-container.gb-container-316c7022 > .gb-inside-container {
top:160px;
position:sticky;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
top:400px;
position:sticky;
}You may also add a custom CSS class make-sticky-container as such an use this Class as the selector instead:
@media (min-width: 1025px) {
/* CSS in here for desktop only */
.gb-container.make-sticky-container > .gb-inside-container {
top:160px;
position:sticky;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
.gb-container.make-sticky-container > .gb-inside-container {
top:400px;
position:sticky;
}
}Either should work, and here is a sample of it working: https://share.getcloudapp.com/5zuLw0G1
Hope this helps! Kindly let us know how it goes. :)
Perfect!
This solution works, exactly what I was looking for.
Thanks!
You’re welcome Henk! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. :)
