Opens in a new tab
12th Feb '23
/
4 comments

WP Grid Builder Filters inside Bricks’ OffCanvas

WP Grid Builder Filters inside Bricks’ OffCanvas

This Pro tutorial provides the steps to move WP Grid Builder's filters inside the Bricks' native Offcanvas on smaller viewport widths.

Let's work with the Posts page as the view.

This means:

  • a Page titled Blog was set as the Posts page at Settings → Reading.
  • This Page is being edited with Bricks and a Posts or Query Loop element with the query set to output Posts has been added.

Step 1

Create these WP Grid Builder facets: Categories, Reset, Pagination.

Step 2

Set up your Posts page's structure to look like this:

Step 3

Paste this in the Bricks editor at Settings (gear icon) → PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

How to disable smooth scroll in Bricks

How to disable smooth scroll in Bricks

In certain situations like using ScrollSmoother, you may be looking to disable smooth scrolling functionality that’s built into Bricks.
Categories:
How to sync two nestable sliders in Bricks

How to sync two nestable sliders in Bricks

In this tutorial, we'll learn how to sync two nestable sliders in Bricks: one will be the main slider and the other one will be…
Categories:
Auto-switching Bricks Tabs

Auto-switching Bricks Tabs

How to switch tabs every x seconds when the tabs element is scrolled into view.
Categories:
Pro
[WooCommerce] Sticky on Scroll Add to Cart section in Bricks

[WooCommerce] Sticky on Scroll Add to Cart section in Bricks

Setting up a sticky section that fades in when scrolling down and fades away when scrolled to the top.
Categories:
Pro
How to Link to a Specific Tab in Bricks

How to Link to a Specific Tab in Bricks

This Pro tutorial provides the JavaScript code that will automatically switch to the tab when using Nestable Tabs elements based on the "tab" URL parameter…
Categories:
Opening RSS Block’s Links in New Tabs

Opening RSS Block’s Links in New Tabs

Looking to have links output by RSS Block (in the block editor) in new tab/window when using Bricks? Add this in your Bricks template/Page at…
Categories:
Enqueueing a JavaScript File in Bricks

Enqueueing a JavaScript File in Bricks

Bricks child theme's functions.php comes with code to enqueue (load) style.css on the front end. What if you want to load a custom JavaScript file…
Categories:
Pro
Stock Quantity Block for WP Grid Builder

Stock Quantity Block for WP Grid Builder

In the unofficial WP Grid Builder Facebook group a user asked: Is it possible to show stock quantity on the card? I can't find it…
Categories: