If you’re moving from Elementor to Bricks Builder, this tutorial will show you the differences between Elementor’s Loop Grid and Bricks’ Query Loop. You’ll learn how Bricks’ Query Loop works, why it’s more flexible, and how to build a simple dynamic list of blog posts from scratch.
Timestamps:
- 0:00 Introduction
- 1:46 Bricks Query Loop – Flexbox
- 8:24 Link Query Loop Card
- 9:06 Bricks Query Loop – CSS Grid
- 14:04 Pagination
From Elementor Loop Grid to Bricks Query Loop: Why Bricks Offers More Flexibility
If you’re making the switch from Elementor to Bricks Builder, one of the first differences you’ll notice is how each builder handles dynamic content.
Elementor relies on the Loop Grid widget, while Bricks uses a Query Loop that integrates directly into its layout system. At first, Bricks may feel like it has a steeper learning curve, but once you understand how it works, you’ll likely find it’s far more flexible and intuitive.
In this guide, we’ll walk through the key differences between Elementor’s Loop Grid and Bricks’ Query Loop, explain why Bricks provides greater control, and show you how to build a dynamic blog post listing from scratch.
Elementor’s Loop Grid vs. Bricks Query Loop
In Elementor, creating a dynamic post listing typically involves:
- Adding a Loop Grid widget.
- Opening a separate loop template.
- Designing the card inside that template.
- Returning to your page where the template is displayed.
While this workflow works well, it means you’re constantly switching between templates and managing content stored separately in your site’s database.
Bricks takes a different approach.
Instead of creating a separate loop template, everything happens directly on the page you’re editing. You simply designate the element you want to repeat as a Query Loop, and Bricks handles the rest.
This keeps your workflow streamlined and makes it easier to visualize the final layout while you’re building it.
Building a Query Loop with Flexbox
The simplest way to create a dynamic post feed in Bricks is by using Flexbox.
The process looks like this:
- Add a new section.
- Insert a block that will act as your post card.
- Set the block’s width (for example, 33% for a three-column layout).
- Enable Query Loop on the block.
- Add dynamic elements inside the block, such as:
- Featured Image
- Post Title
- Configure the query to pull in your posts.
Once Query Loop is enabled, Bricks automatically repeats that card for every post returned by your query.
Why the Bricks Query Builder Is More Powerful
One of Bricks’ biggest advantages is its native query builder.
Instead of being limited to a handful of settings, you can build much more advanced queries using:
- Meta Queries
- Taxonomy Queries
- Include/Exclude rules
- Multiple sorting options
- Query relations
- Custom ordering
For many users, this eliminates the need for additional plugins like JetEngine for common dynamic content use cases.
The flexibility built directly into Bricks means you can create sophisticated content displays without writing custom PHP or relying on third-party tools.
Creating Responsive Layouts with Flexbox
After building your card, you’ll want to arrange them into columns.
With Flexbox, this involves:
- Setting the parent container to Horizontal
- Enabling Wrap
- Defining row and column gaps
- Adjusting card widths to account for spacing
Although this works, adding gaps often requires tweaking percentage widths (for example, changing 33% to 32%) so everything fits correctly.
This is where CSS Grid becomes the better option.
Why CSS Grid Is the Better Choice
Bricks includes excellent CSS Grid support, making it ideal for card-based layouts like blog archives, portfolios, and resource libraries.
Instead of calculating widths manually, you simply:
- Change the container display to Grid
- Open the Visual Grid Builder
- Select the number of columns
- Set your grid gap
That’s it.
Unlike Flexbox, Grid automatically handles spacing without requiring width adjustments.
This makes layouts cleaner, more responsive, and much easier to maintain.
Responsive Design Made Easy
The Visual Grid Builder also simplifies responsive design.
You can define different layouts for each breakpoint:
- Desktop: 3 columns
- Tablet: 2 columns
- Mobile: 1 column
Bricks automatically updates the layout while preserving spacing and alignment.
This visual approach makes responsive design significantly easier than managing multiple Flexbox settings.
More Creative Layout Possibilities
Another standout feature of CSS Grid in Bricks is the ability to create custom layouts visually.
Rather than being locked into identical cards, you can:
- Stretch cards across multiple columns
- Create magazine-style layouts
- Build asymmetric grids
- Rearrange items with drag-and-drop controls
This opens up far more creative possibilities than Elementor’s Loop Grid currently offers.
Adding Pagination
Pagination works a little differently in Bricks.
Instead of being built directly into the Query Loop, you add a separate Pagination element.
The process is straightforward:
- Place the Pagination element beneath your Query Loop.
- Connect it to the correct query.
- Style it however you’d like.
- Optionally enable AJAX loading for a smoother browsing experience without full page reloads.
Although it requires one extra step compared to Elementor, the advantage is greater flexibility in positioning and styling the pagination controls.
Conclusion
If you’re transitioning from Elementor, Bricks’ Query Loop may initially feel unfamiliar. However, once you understand the workflow, the benefits become clear.
Bricks provides:
- A cleaner editing experience without separate loop templates
- A significantly more capable query builder
- Native CSS Grid support
- Better responsive layout controls
- Greater design flexibility
- More advanced dynamic content capabilities without relying on additional plugins
While there’s a bit of a learning curve, investing the time pays off with a faster, more flexible workflow that gives you far more control over dynamic content.
