Bricks 2.3

We’ve focused on refining the parts of the builder you use every day, while also introducing a few meaningful new capabilities.

This version lets you paste HTML & CSS directly into the builder where it is automatically converter into native Bricks elements, classes, and variables, helping you speed up your workflow even further.

You’ll find major query filter improvements, new motion features like real Bricks-native parallax plus perspective and scale3d transforms, and a more powerful Image Gallery experience with Load More and Infinite Scroll.

Alongside those bigger additions, we’ve continued to polish the builder experience with usability improvements such as Pin control groups, accessibility refinements, and a wide range of fixes for WooCommerce, WPML, search, classes, components, and other real-world workflows.

Lets dive a bit deeper into the highlights of this release …

HTML & CSS to Bricks

We’ve introduced a powerful new way to accelerate your workflow in Bricks. Copy HTML and CSS from any source and paste it into the builder. Bricks detects the code in your clipboard and converts it into native elements, classes, and variables.

Element Mapping

• Standard HTML elements are transformed into their native Bricks element counterparts.
• CSS styles (such as margin, padding, width, and max-width) are automatically mapped to the corresponding Bricks UI settings whenever possible.
• Any CSS that cannot be directly mapped to a specific Bricks setting is preserved as custom CSS within the element’s settings or a dedicated code element.

Support for External Resources

The conversion process handles external stylesheets (e.g., Google Fonts) and SVGs. For security, these elements require manual signing before they are rendered in the builder.

A new setting under Bricks > Settings > Builder > HTML & CSS to Bricks allows you to choose how the feature behaves.

This new feature significantly reduces the need to manually recreate designs element-by-element, making it easier to utilize layouts generated by AI tools or existing web libraries.

Documentation: https://academy.bricksbuilder.io/article/html-css-to-bricks/

Pin control groups

Pinned control groups streamline work by letting you pin frequently used control groups to a dedicated section at the bottom of the panel.

Pinned groups stay easily accessible while you work, can be unpinned with a single click, and their state is remembered between sessions.

The pinned section is also resizable, with a double-click option to quickly expand or collapse it as needed. For teams that prefer the previous behavior, this feature can be disabled in Builder settings via “Disable pinned control groups”.

Image Gallery – Load More & Infinite Scroll

The Image Gallery element now supports loading more images on demand through the new “Load more (Image gallery)” interaction without any additional AJAX calls.

You can define how many images appear initially, how many are revealed per load, and even set those values responsively.

For a more seamless browsing experience, you can also enable infinite scroll to automatically load more images as visitors approach the end of the gallery, with controls for trigger offset and delay.

This makes it easier to build galleries that start lightweight and expand smoothly as needed.

New Query Filter Controls

Filter – Select: Search, Multiple options, advanced styling

Filter select fields now support a more advanced select experience powered by Choices.js.

The Select filter is now much more flexible. You can enable search for faster option discovery, allow multiple selections for more refined filtering, and use advanced styling controls to better match the filter to your site’s design.

These improvements make Select filters more practical for larger datasets and give you more control over both usability and appearance.

Filter – Radio & Checkbox: More styling controls

Radio and Checkbox filters now offer much more styling flexibility. In addition to option spacing and typography controls, you can now style the custom input indicator itself, including its gap, size, border width, border style, border color, background color, focus ring color, and checked-state colors.

Checkbox filters also include a border radius control, and button mode styling has been expanded with dedicated controls for normal and active states.

Filter – Range: Controls for Decimal Places & Custom Stepper

The new Decimal places control gives you more precision when working with non-integer values. In input mode, you can also enable a Custom Stepper to make adjusting minimum and maximum values more intuitive.

To help it fit your design, the custom stepper also comes with styling controls for button spacing, input spacing, background, border, and typography.

Filter – Datepicker: Control for Datepicker Format

The Datepicker filter now includes a dedicated control for the datepicker format. This gives you more control over how dates appear in the picker, making it easier to match regional formats and create a more consistent user experience.

Color Manager: Reorder colors via drag and drop

Managing your palette is now more intuitive. You can now reorder colors in the Color Manager via drag and drop using the “move” handle when hovering over any color, making it easier to organize brand colors, favorites, and project-specific swatches exactly the way you want. This helps keep large color libraries tidy and puts your most-used colors right where you need them.

Real Parallax Effect

Bricks now includes a native, dependency-free real parallax effect based on scroll movement, instead of relying on the classic fixed-background approach.

You can apply parallax to the element itself or to its background image, with dedicated controls for horizontal and vertical movement speed, background speed, and the point where the effect begins.

This gives you more flexibility to create more natural motion effects and fine-tune how elements move as they enter the viewport.

These new controls are located under the “Transform” control group within the Style tab.

CSS transform: perspective() and scale3d()

Bricks now includes additional transform controls for perspective() and scale3d().

This makes it easier to build more advanced 3D transform effects directly in the builder, with support added both in the control UI and in generated styles.