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

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

Home Forums Support How To Add Full-Length Column as Design Element

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2036255
    Brent Wilson

    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?

    #2036319
    Ying
    Staff
    Customer Support

    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%;
    }
    #2036410
    Brent Wilson

    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!

    #2036427
    Ying
    Staff
    Customer Support

    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 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.