Mix up layout

[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

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts