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

McDonald’s Order Promise Analogy

McDonald’s Order Promise Analogy

From the JavaScript course I am doing now: A Promise is like placing an order at a restaurant. You receive a ticket (Promise object) that…
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:
How to Create a Grid Slider in Bricks

How to Create a Grid Slider in Bricks

In this tutorial, we'll learn how to create multiple rows and columns inside the default nested slider of Bricks. Introduction A user recently asked in…
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:
How to change the text of an element based on breakpoints without creating duplicated content

How to change the text of an element based on breakpoints without creating duplicated content

In this tutorial, we'll learn how to dynamically change the text of a basic text element based on the viewport width in Bricks. Introduction Sometimes…
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:
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: