[Support request] Using a full width section with no sidebar on a page with a sidebar

Home Forums Support [Support request] Using a full width section with no sidebar on a page with a sidebar

Home Forums Support Using a full width section with no sidebar on a page with a sidebar

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #600651
    Lee

    Hi, we’re currently building a site and have come up against an issue regarding sections and sidebar layouts.

    We installed a plugin so that we could use sections with a sidebar layout and that is working fine. What we’d like to be able to do though is to insert a new section that spans the whole width of the page, on a page that has a sidebar.

    So a bit like how the way the footer is separate to the content above it and ignores the sidebar, can this be done for an individual section?

    #600949
    David
    Staff
    Customer Support

    Hi Lee,

    tricky little one this. Will require some code and a bit of tinkering to get right. But this will get you started. This works if you have your Sections Box Type set to contained.
    First off you can remove the code/plugin you have used to add the sidebar.

    Then using the Code Snippets plugin (or child theme)
    https://docs.generatepress.com/article/adding-php/
    add this PHP snippet:

    add_action( 'generate_before_main_content', 'tu_add_inside_container' );
    function tu_add_inside_container() {
        get_sidebar('right-sidebar');
    }

    Then we need this bit of CSS. I would suggest you add this using Tom’s Simple CSS plugin, and apply it to the Simple CSS meta box it gives in the page editor. Otherwise we will need to target the specific page(s) in the CSS

    .site-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .generate-sections-container {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
    }
    
    #generate-section-1 {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 75%;
        flex: 1 0 75%;
        max-width: 1200px; /* Adjust to size of Content Container minus width of sidebar */
        margin-left: auto;
        margin-right: 0;
    }
    
    #right-sidebar {
        width: 200px; /* Set width of sidebar */
        margin-right: auto;
    }
    #2096620
    Michael

    Bumping this up. Is this still possible without sections? I don’t mind hiring a developer, just trying to gauge on how much of an ordeal this is gonna be.

    Going for something like this with a ton of related posts at the bottom (probably using WP Show Post or GB depending on the outcome of the merger): https://www.thespruce.com/watermelon-peperomia-guide-5201470

    Maybe via ACF and a hook plus CSS?

    #2097961
    Michael

    The easiest solution just dawned on me. A new widget area(s).

    #2098060
    David
    Staff
    Customer Support

    Hi there,

    you can just use a Hook or Block Element, the latter means no need for code, just the Blocks and/or Shortcodes you require for that section. And you can select the before_footer hook to display it there.

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