Posted in: Plugins/Addons

Posted on:

Exploring Advanced Themer’s Visual CSS Grid Builder

Are you looking to enhance your web design game? Advanced Themer's Visual CSS Grid Builder for Bricks Builder might be just what you need! In a recent video, we got an insightful first look into the alpha version of this tool, especially its integration with the Bricks Loop Builder. Let's dive into what this means for your web design projects.

Imagine looping anything – products, posts, you name it – and giving it a visual oomph. That’s precisely what you can do with this integration. The Bricks Loop Builder allows you to create content loops, and the CSS Grid Builder adds that aesthetic flair.

A Simple Example

To demonstrate the video showed a straightforward example. A loop grid is created with a more engaging layout using the CSS grid, all done visually within Advanced Themer. But how exactly is this achieved? Let’s break it down.

Step-by-Step Guide

  1. Start with the Basics: Create a blank page and add a section with a container.
  2. Add a Block: Inside the container, drop a block containing individual loop items.
  3. Dynamic Content: Insert elements like a heading and rich text in the block, setting them to display dynamic content like post titles or excerpts.
  4. Create the Loop: Select your block, go to the query settings, and create a loop (for example, of posts).
  5. Styling: Give your block a minimum height, set a dynamic background (like a post featured image), and add a gradient overlay.
  6. CSS Grid Magic: Change the display setting of your container from flex to grid. This activates the visual grid builder, where you can adjust the layout as desired.

Customization and Layout Adjustments

The beauty of this tool is its flexibility. You can easily customize the grid layout, like making a section double height or adjusting the layout to avoid any content orphaning. It’s all about visually appealing and unique layouts.

Injecting Static Cards

A neat feature mentioned in the video is the ability to inject static cards within your loop. This could be an advert or any other static element seamlessly integrated into your dynamic content grid.


Advanced Themer’s Visual CSS Grid Builder for Bricks Builder, still in beta, shows great potential for web designers seeking more visually engaging and dynamic layouts. If you can access Advanced Themer, you can download and experiment with this tool.

We’re eager to hear your thoughts and experiences with this new feature. Share your feedback in the comments, and let’s explore this tool’s possibilities together!

Join The Community

Join over 13,500 WordPress enthusiasts and become part of a vibrant community.