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

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 hide Bricks Query Loop Posts until WP Grid Builder Facets are applied

How to hide Bricks Query Loop Posts until WP Grid Builder Facets are applied

How to hide the Bricks QL posts until there’s an interaction by the user on the frontend like ticking a category or typing in a…
Categories:
Pro
How to Limit a WP Grid Builder’s Term Grid to Only Current Post Terms

How to Limit a WP Grid Builder’s Term Grid to Only Current Post Terms

In the WP Grid Builder Facebook group (unofficial), a user asks: Hi All, I'm looking for a way to update the contents of a grid…
Categories:
Pro
Opening Submenus with Click Instead of Hover in Bricks

Opening Submenus with Click Instead of Hover in Bricks

This Pro tutorial provides the code for opening submenus with click instead of hover in Bricks. Step 1 Add this in child theme's style.css: Step…
Categories:
Pro
Grid.js in Bricks

Grid.js in Bricks

This Pro tutorial provides the steps to use Grid.js in a WordPress site powered by Bricks builder. Grid.js is a lightweight and performant JavaScript library…
Categories:
Setting Active Tab in Bricks’ Tabs (Nestable) Element

Setting Active Tab in Bricks’ Tabs (Nestable) Element

With Bricks' Nestable tab element, here's how we can set which tab is active by default.
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: