Release 2.4

January 31, 2024
23 changes

we’ve got some exciting updates to share with you!

 

Introducing Grid Builder V2

 

The version 2 of the popular Grid Builder brings features, improvements, and creative possibilities to redefine your grid-building experience. It includes some advanced features for dynamic layouts such as new options to create repeatable patterns, more options to control the responsiveness of the grid, new shortcuts and QOL features, and some bug fixes/UI improvement.

 

There is a better way to create and manage your Query Loops!

 

Introducing the global query loops! You are now able to save query settings in a manager for easy global management. Change any query variable, and it applies across the entire site. Categorize, filter, and add descriptions to each global query for simple maintenance. Generating global queries is a one-click task from the Bricks UI, and selecting them in the builder is a breeze through a dedicated dropdown menu.

 

Generate multi-layer Box-shadows with ease!

 

Level up your designs with awesome box-shadows created in just a few clicks. You can either choose from a large library of presets, or use the generator to create complex multi-layer box-shadows without any coding.

 

Autogenerate your template thumbnails in few clicks!

 

This new feature allows you to generate templates for any section of your page right from the preview window (or the contextual menu of the structure panel). The quick-save function generates a thumbnail and attaches it to your templates while also displaying a preview of the saved DOM structure.

 

A no-code solution to wrap your content inside HTML tags

 

Wrap or unwrap your content inside any desired HTML tag for the Basic Text and the Heading Elements effortlessly. You can also add extra classes, styles, or even an href tag without writing any HTML code!

 

Copy & Paste your interaction/condition settings

 

Stop manually creating similar interactions and conditions one by one! Now, with a simple one-click operation, save tons of time and ensure consistent results by cloning your settings from one element to another.

 

AI gets some love!

 

Transform any audio file into text! Simply upload your audio file in the dedicated modal and wait for the magic to happen: the whole transcription will be generated inside the builder and ready to be pasted.

 

Major improvements

 

This release includes tons of improvements for most popular features such as the Class Converter, the Class Manager, Style Overview, Plain Classes, etc… There is just not enough space in this paragraph to list them all, but make sure to check the full changelog below!

Optimize your responsive design with Copy/Paste/Reset Breakpoint Styles! Quickly copy styles from one breakpoint and paste them onto another with just a few clicks. Apply copied styles from/to a different ID, class, or pseudo-element effortlessly. Wanna reset all the styles generated on a specific breakpoint? That’s a one-click operation with Advanced Themer!

A new set of suggested classes are shown at the bottom of the plain class modal – sorted by the number of time they’ve been used on the current page. A new “Group” filter has also been added to suggest classes by any group assigned inside the Class Manager.

Say goodbye to the hassle of navigating through a lengthy Elements list! This small addition simplifies the process by allowing you to collapse or expand all element categories with just a single click. No more manual collapsing or wasting time navigating through categories!

Applying a global Query Loop to your container is made super easy thanks to the filterable global query loop dropdown that will list all the global query loops saved inside the Global Query Manager. Just click on the global query you want to reuse, and you’re done!

Tired of setting your query loops one by one? Embrace global query loops! With our new feature, save query settings in a manager for easy global management. Change any query variable, and it applies across the entire site. Categorize, filter, and add descriptions to each global query for simple maintenance. Generating global queries is a one-click task in the Bricks UI, and selecting them in the builder is a breeze through a dedicated dropdown menu.

Introducing the Advanced Text Wrapper — wrap or unwrap selected content inside any desired HTML tag for the Basic Text and the Heading Elements effortlessly. No HTML coding required! It also allows you to add extra classes, styles, or an href tags seamlessly for enhanced text formatting.


Meet our cool new feature: the Box-shadow generator! Spruce up your designs with awesome box-shadows in just a few clicks. Take your pick from a bunch of ready-made presets and add that wow factor with minimal effort. This generator is like magic—it handles all the fancy stuff, letting you customize complex multi-layer box-shadows without any coding. Whether you’re styling on IDs, classes, or pseudo-elements, this tool vibes perfectly with the Bricks builder.

Streamline your workflow with Advanced Themer! Forget about creating interactions and conditions one by one. Now, with a simple one-click operation, effortlessly clone settings from one element to another. Save tons of time and ensure consistent results across your design.

Easily get a comprehensive overview of all the element IDs on your page thanks to this new function integrated to the Structure Helper! Plus, streamline your workflow by copying any element’s ID directly to your clipboard.

Introducing the Speech to Text AI converter, your go-to tool for effortlessly converting any audio file into text! Simply upload your audio file, choose the output language and set the desired temperature, then sit back and witness the magic unfold. The entire transcription of your audio file is generated seamlessly inside the builder, eliminating the need for manual transcription efforts.

The Grid Builder V1 has been a massive success! We gathered the feedback from the community and included the following features in V2: Repeat Grid A new option has been added to adapt the CSS declarations of each children to include a repetitive pattern (an+b). Example: :nth-child(4n+3)  New Span switch Instead of setting the start/end…
Some non-relevant rows related to the color shades were added to the tables. They have now been excluded.
New Bulk Actions You can now Lock and Unlock your global classes in bulk. Enable/Disable specific classes in the bulk actions You have the ability to further customize your bulk actions within the class manager by enabling or disabling any specific class for executing your bulk action (new toggle icon on the right of each…
In some cases, when leaving extra spaces in the editor, it could generate an empty “.” class. This has been fixed. 
Update values inside global classes You can now find & replace values that are inside the global classes attached to the elements that you are targeting.
New icons for the previewed structure You can now show the HTML tag and the ID of each element in the structure. You can easily copy the ID to the clipboard too. A new “Highlight” toggle has also been added to activate/deactivate the highlights in the structure. Show interactions set on global classes The script…
New Text-link icon The new element “text-link” has been added to the shortcut list of items you can quickly add from the right shortcut bar.
Group Tabs indicators You'll have now indicators on the parent groups tabs, not only on the controls itself. Different indicators for ID and classes It will indicate class styles when you are on the ID level (blue dot), and it will indicate ID styles when you have a class active (red dot). Indicators between Classes…
In some cases the grid guides weren’t covering the entire top/bottom screen. This has been fixed.
New zoom slider You can now easily zoom inside your images UX Improvements The Resource panel - when closed - won’t close the other opened panels. For example, you can now open/close the resource panel while the Grid builder modal is open - you won’t need to reopen the Grid builder each time you close…