[Resolved] Mix up layout

Home Forums Support Mix up layout

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1364257
    Manuel

    Hi there,

    we are using Generatepress and Generateblocks for an upcoming website and want to do a “mixed” layout on some pages where we use wide block(s) at the beginning of the page and after that we want to use a sidebar left (for filtering) and woocommerce products right (filtered by woof filter).

    |––––––––––––––––––––––––––NAVIGATION–––––––––––––––––––––––––––––––––|
    |–––––––––––––––––––––––––––Content–––––––––––––––––––––––|
    |––Sidebar––||––––––––––––––––Products–––––––––––––––––––––|

    Is there a way to handle this (in best case without elements > header).

    Thanks and best regards!
    Dominik

    #1364313
    David
    Staff
    Customer Support

    Hi there,

    tricky to do that. How are the products being added to the page ?

    #1364317
    Manuel

    Hi David,

    they are added via Woof Shortcode [woof_products is_ajax=1 ajax_redraw=1 taxonomies=product_cat:16].That works well already. The problem is to get the content before the Sidebar/Products part.

    #1364520
    David
    Staff
    Customer Support

    Tricky without using a Header Element.
    The only alternative i cant think of that wouldn’t require custom template development is to use Hooks.

    Something like this:

    1. Disable the Left Sidebar on those pages.
    2. Create a new Hook Element.
    2.1 Some content to call the Sidebar and the Shortcode:

    <div class="grid-container after-content-container">
    	<?php get_sidebar( 'left'); ?>	
    	<div class="content-products">
    		<div class="inside-article">		
    			<!-- add you dynamic shortcode here -->
    		</div>
    	</div>
    </div>

    2.2 Select the before_footer Hook
    2.3 Check execute PHP and Shortcodes.
    2.4 Set the display rules.

    Then it will need some CSS:

    .after-content-container {
        display: flex;
        flex-wrap: wrap;
    }
    .content-products {
        flex: 1 0;
        margin: 20px 0 20px 20px;
    }

    This should in theory move your sidebar and shortcode into their own container that sits below the content area. If the Woof filter still works then the only thing left is to use a Custom Field to add your Shortcode.

    #1365405
    Manuel

    This is perfect – thanks a lot! 😀
    The only thing I had to change is use after_content instead of before_footer otherwise the div was including my footer.

    Thanks David!

    #1365432
    David
    Staff
    Customer Support

    Wasn’t sure it would work – so thats great to hear.

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