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
- Start with the Basics: Create a blank page and add a section with a container.
- Add a Block: Inside the container, drop a block containing individual loop items.
- Dynamic Content: Insert elements like a heading and rich text in the block, setting them to display dynamic content like post titles or excerpts.
- Create the Loop: Select your block, go to the query settings, and create a loop (for example, of posts).
- Styling: Give your block a minimum height, set a dynamic background (like a post featured image), and add a gradient overlay.
- 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.
Conclusion
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!
