[Resolved] How To Add Full-Length Column as Design Element

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%;
}

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 🙂