Archived topic
How To Add Full-Length Column as Design Element
4 replies · Started by Brent Wilson on December 2, 2021
How could I achieve the following:
Content in 6/7s of page, with a unique design column as the far right 1/7 of the page. See this page for an example: https://www.adventist.design/using-the-system/entity-identifiers/. I could probably create this page-by-page with GB and adjustments for responsiveness, but that sounds like a big hassle. Is there a way I can set this up in the theme to apply to all the pages on a site? Basically, I want to find a way to get that far right 1/7 column that is not part of the content area, be able to set the color, and add sticky logo.
Any ideas how to do this?
Hi Brent,
You can set the blue column up using a block element and some custom CSS, but I would recommend use it on full width pages.
1. Create a block element, add a Grid column with 14.285% as its width,
2. Add an additional CSS class to the Grid block,eg. fixed-column, if you don't want it to show on mobile, then add hide-on-mobile class as well.
https://wordpress.com/support/adding-additional-css-classes-to-blocks/
3. Choose before_headeras hook, choose location accordingly.
4. Add this CSS:
.gb-grid-wrapper.fixed-column {
position: fixed;
top: 0;
right: 0;
width: 100%;
z-index: 1000;
}
body {
margin-right: 14.285%;
}Thank you! The steps you provided were a great starting point for me! I did add height: 100%; to the CSS to get the column to extend the full height of the page. But now seems to be working great!
I did add height: 100%; to the CSS to get the column to extend the full height of the page.
Great! I should've mentioned that you can select the Grid > Container, set its min height to 100vh under the spacing tab :)
Okay, I have the right column working decently on this site: https://wordpress-483838-2299607.cloudwaysapps.com/.
But today, I tried to set it up on this site and it is somehow pushing the menu-as-header down the page on the front page: https://wordpress-483838-2431328.cloudwaysapps.com/
Another page seems even more messed up: https://wordpress-483838-2431328.cloudwaysapps.com/style-guide/
Any ideas what I can change to fix this?
