Posted in: Plugins/Addons

Posted on:

Unleashing Creativity with Advanced Themer and CSS Grid Builder

Advanced Themer has introduced many customization options and time-saving features for Bricks Builder. The plugin's latest addition, an alpha build of a CSS Grid Builder, is a game-changer for designers who prefer a visual approach to layout design.

Introducing the CSS Grid Builder

Developed by Maxime, the brains behind the plugin, Advanced Themer‘s CSS Grid Builder empowers users to create virtually any CSS Grid layout visually. This early build already showcases an impressive set of features.

Setting Up a Simple Grid Layout

The process begins with a basic grid setup involving a container with six blocks, each containing a heading. The setup also includes alternating classes for rows, offering a light and dark background for demonstration.

Selecting the container and changing its display to ‘Grid’ you’ll unlock all the grid options available in Bricks. Notably, the new ‘Grid Builder’ option from Advanced Themer appears, which we will explore in detail.

The initial step involves setting a 30-pixel gap between rows and columns for a cleaner layout. The Grid Builder then allows users to visualize their grid with options to add, remove, or resize rows and columns effortlessly.

Visual Grid Manipulation

With the Grid Builder, adjusting the layout becomes intuitive. Users can drag and drop blocks, extend them across multiple rows or columns, and see these changes reflected in real-time.

Applying and Previewing the Grid

After finalizing the layout, clicking ‘Apply Grid’ updates the grid setup. Previewing the design on the front end shows how effortlessly the tool translates visual layouts into functional designs.

Responsive Design Made Easy

The CSS Grid Builder excels in creating responsive designs. Users can set different grid layouts for various breakpoints, like desktop and tablet, ensuring a consistent and responsive experience across devices.

Experimenting with Overlapping Grids

An intriguing feature is the ability to overlap grid items. While its practical application might be niche, it opens creative possibilities for more complex layouts.

The Future of CSS Grid in Bricks Builder

This alpha build is just the beginning. With the potential for further enhancements and new features, the CSS Grid Builder is poised to become an indispensable tool for designers using Bricks Builder and Advanced Themer.

Conclusion and Invitation for Feedback

The CSS Grid Builder in Advanced Themer marks a significant step in visual web design. Its simplicity and powerful features make it a must-try for any web designer. As it continues to evolve, user feedback will be invaluable. So, experiment with this new tool and share your thoughts with Maxime!

Join The Community

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