How to Speed Up a Bricks Builder Site
What took this site from 91 to 99 on mobile: the animation that was costing two seconds of LCP, critical CSS, font preloads, image sizing and content-visibility.
Read guide
Djia Bricks Β· Blog
Bricks Builder tutorials & guides
Step-by-step tutorials for building faster with Bricks Builder: AJAX filters, advanced forms, WooCommerce stores, conditions and animations.
How to Add WooCommerce Product Filters to a Bricks Shop
A full shop filter panel in Bricks β price, colour swatches, attributes, stock, rating, sorting and a mobile drawer β with an index that keeps it fast on a large catalogue.
Read guide
Scroll Animations in Bricks Builder Without Writing JavaScript
Six triggers, ten animation types and stagger set once on the parent β plus the above-the-fold rule that cost us two seconds of LCP before we found it.
Read guide
Bricks Builder Dynamic Data: Tags, Custom Fields and Filters
Dynamic data turns a layout into a template. The syntax, where tags resolve, how ACF, Meta Box and Pods fit in, and why your tag is outputting nothing.
Read guide
Bricks Builder Conditions: Show or Hide Any Element Without Code
Conditions let each element decide whether to render β by role, cart, purchase history, URL parameter or device. How to use them, and how caching quietly breaks them.
Read guide
WooCommerce Variation Swatches in Bricks: Colour, Image and Label
A dropdown tells a shopper nothing about colour. How to set up colour, image and label swatches in Bricks, on both the product page and the shop archive.
Read guide
How to Build a Custom WooCommerce Checkout in Bricks
WooCommerce checkout is a form built from hooks. Here is how to lay it out visually in Bricks β billing, shipping, order bumps and a place-order button you control.
Read guide
How to Build a Custom WooCommerce Product Page in Bricks
Rebuild the WooCommerce single product page inside Bricks β gallery, price, swatches, stock, quantity, add to cart and automatic badges β with no template overrides.
Read guide
Bricks Builder Query Loop: A Complete Guide
The Query Loop repeats one card you design for every post, product, term or user. How it works, the settings that matter, and the mistakes that leave it empty.
Read guide
How to Add AJAX Filters to a Bricks Builder Query Loop
Bricks has no filter UI of its own. Here is how to add AJAX filters β checkboxes, a price range, search and active tags β to any Bricks Query Loop, with URL sync and a cached index.
Read guide
How to Create a Multi-Step Form in Bricks Builder
The native Bricks Form element has no steps or progress bar. Here is how to build a three-step form with validation, a progress bar and post-submit actions, without custom JavaScript.
Read guide
About these Bricks Builder tutorials
Each guide on this blog walks through a real Bricks Builder project from start to finish. You get the exact element settings, the query or condition logic behind them and the reason for every choice. That way, you can repeat the result on your own sites instead of copying a template you do not fully understand.
Most tutorials start with native Bricks Builder features. After that, they show where Djia Bricks modules save time, for example AJAX filters for large Query Loops, multi-step Pro Forms or a custom WooCommerce checkout. As a result, the techniques stay useful even if you never install our plugin.
Every tutorial is tested on the current Bricks version before it goes live. In addition, older guides are updated when Bricks or Djia Bricks changes, so the steps you follow always match the builder you see on your screen.
New guides are published regularly, and topics come straight from support questions and feature requests. So, if you are stuck on something specific, send us your question and it may become the next tutorial.