Advanced Themer gives you the ability to add page transitions to your site in a few clicks! These animations can be set on a global level – affecting all the pages of your website – or on a page level. Inside the page level, you can also enable the ability to transition specific elements.

This powerful new feature lets you view all your remote templates in a clean, organized left panel, with categories for easy navigation. With Quick Remote Template, you can add multiple templates at once without leaving the modal. Plus, you can drag and drop entire sections into specific positions, and even save remote templates to your local server with just a single click!

Introducing AI-powered capabilities to automatically generate or enhance the custom CSS code for any Bricks element. This feature enables smarter, faster CSS development by generating optimized code for your elements, reducing the need for manual adjustments and speeding up the design process.

With the all-new AI Prompt Manager, you can now store your most frequently used prompts for quick and easy access. No more repeating the same input over and over again—simply select the prompt you need from a smart, intuitive dropdown. This feature helps you stay organized and saves valuable time, allowing you to focus more on your work and less on manual input.

Hold the CMD key (or CTRL key for PC users) while clicking on any element in the Structure Panel. This will highlight the selected element and its children, while temporarily hiding all other distracting elements in the panel for a cleaner view.

Easily scale down your preview window to get a clear overview of your page. The best part? With Zoom-out enabled, only the root elements (typically your sections) are selectable within the preview window. These elements can be dragged and dropped only at the root level, ensuring you can reorder your sections without accidentally nesting them or disrupting the design by altering inner components.

Easily apply your color variables to any builder control with the new Color Variable Picker. This tool showcases all your palettes in an organized layout, complete with each color’s corresponding light/dark shades and tints. After trying this feature, you won’t want to use the native color grid anymore!

Simplify your CSS by replacing directional properties with logical properties. Logical properties adapt automatically based on the text direction and writing mode of your content, ensuring consistent layouts for both left-to-right (LTR) and right-to-left (RTL) languages. This approach reduces the need for manual adjustments, makes your code more maintainable, and improves accessibility for global audiences.

Introducing the Nestable Dark Mode Button and Toggle, two new elements offering full control over inner elements for easy customization. They are fully accessible on the fly – with aria-label and focus styling, support logical properties, and include precompiled default styles within the builder controls.

Stop accidentally moving your elements inside the structure panel! Click the corresponding lock icon to disable dragging and fix the elements’ order. Click again to re-enable dragging and restore functionality.

Bricks now lets you track which control has been modified on specific elements or classes. However, the feature has a limitation: switching to another element automatically disables the “modified view”, making it hard to navigate while checking for changes. With this new feature, the “modified view” will remain active even when switching between elements, making it easier to track changes across your structure.

Extract all CSS variables from your Custom CSS code and generate core Global CSS Variables with a single click! This feature is especially handy when using an external framework, allowing you to integrate builder functions like the Variable Picker for a more streamlined workflow.

Tired of repeatedly clicking the link icon to link all your spacing control values? Now, you can set the default linking behavior for spacing inputs! Choose to link all sides by default, or just the opposite ones. Say goodbye to tons of unnecessary clicks!

By default, Bricks displays your colors in a grid view within the builder’s color picker and expects you to select a HEX value. For users who prefer working with CSS variables instead of static values, this often means switching to RAW mode repeatedly to paste your variable. With this new feature, the color picker will automatically open in RAW mode and display your colors in a convenient list format, streamlining your workflow.

Advanced Themer helps you to migrate all the data saved by Bricks to your database. It includes the Bricks settings and all your global classes, global variables, color palettes, components, theme styles, etc…