Release 3.0

January 27, 2025
73 changes

Version 3.0 is one of the most significant updates we’ve ever released! We’re confident in its stability after extensive testing with minimal issues reported during Beta. However, we strongly recommend updating AT in a staging environment first. This ensures everything runs smoothly before deploying it to a live site. As always, back up your site before upgrading to avoid potential data loss due to unforeseen issues.

 

15 New Features!

 

This release is packed with groundbreaking new features that will transform your workflow. Here are just a few highlights:

  • Quick Remote Templates: a brand new way to drag and drop your templates inside your pages.
  • AI-powered SuperPowerCSS: leverage the power of AI when it comes to writing custom CSS inside any element of your pages.
  • A brand-new color variable picker: much more intuitive and organized than the native color popup.
  • Add CSS transitions when switching page thanks to the new Experimental Page Transitions feature.

Listing all the new goodies here would be way too long, so just have a look at the full list below!

 

33 Improvements to Existing Tweaks

 

We’ve overhauled some of the most popular features to make them even better:

  • Tag Manager: no more confusing colors. Add custom HTML tags from the structure.
  • Right Elements Shortcuts: new options to add/remove/move all your shortcuts as you want – including custom elements and components
  • Style Overview: a whole new structure list to easily navigate through all the styles of your elements
  • Granular import/export options: select all the database entries you want to carry on – including all native Bricks ones.
  • …and Tons of UX/UI improvements!

 

Full Compatibility with Bricks Components

 

The latest Bricks release (v1.12) introduced major changes that broke compatibility with older AT versions. But we’ve gone the extra mile—rewriting our entire codebase to ensure full compatibility with Bricks 1.12. Every AT function has been thoroughly tested and updated to work seamlessly with the new Bricks components.

Optimized ACF Requests

 

This version brings a complete rewrite of how your server interacts with the database to retrieve options. On the frontend, the number of requests related to ACF has been reduced to just a few ultra-fast calls.

25 Bug Fixes

 

We’ve squashed numerous bugs reported in earlier versions, including some of the most annoying ones. Alongside the new features and improvements, this release ensures a more polished and reliable experience across the board.

Why This Update Matters

 

Version 3.0 is more than just an update—it’s a complete evolution of AT. From cutting-edge new features to improved compatibility and performance, this release sets the stage for a more powerful and efficient workflow.

 

Check it out today and experience the difference!

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!

It’s tempting to add icons from Bricks’ default icon libraries, but doing so loads the entire library, which can result in unnecessary assets being added to the frontend. With this option, you can remove the default icon libraries from the Icon element and instead upload your own individual icon, boosting your site’s speed and optimizing performance.

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…

Advanced Themer now fully supports the component functions of Bricks since v.1.12.
A new top-right icon within the Structure Helper modal allows you to extend/collapse the inner elements of the components available inside the page.
Clicking on any active filter within the Structure Helper modal will reset the filter and show the structure list without any opacity.
You now have complete freedom to toggle the visibility of any Bricks element using the left-visibility feature in Strict Editor View.
The Right Shortcuts next to the structure panel have been redesigned to feature a new options icon. By clicking this icon, a modal opens where you can easily add or remove elements, including third-party ones. Additionally, you can rearrange the active elements by dragging and dropping them to customize the order. Now, you have complete…
The requests made by ACF to the database went from 284 to… 1!
All the root elements (or parent elements) of each component inside Class Converter have now an active background color. It makes it easier to differentiate on the fly which elements are a parent, and which are children.
When clicking on the skip/include toggle next to a root element (or parent element) of a component, all toggle status will be applied to all the children of that element. This is especially useful when you need to disable an entire inner-component without the need to manually toggle off each child one by one.
A new option has been added in Class Converter to sync the label of each element with the newly assigned global class name.
You now have access to all deleted global classes within the new Trash category in AT's Global Class Manager. Additionally, you can restore deleted classes directly from the manager or permanently remove them as needed.