Game Changer

Looking for a specific element inside your structure? One click! Wanna add any new element to the structure? One click! You want to assign (or create) global classes/variables to your element? that's also one click. Say goodbye to the countless hours spent at searching after your stuff!

Imagine writing (or copy-pasting) HTML, CSS, or JavaScript into an editor, clicking a convert button, and—boom!—all that static, hard-to-read code is transformed into dynamic Bricks elements. That’s exactly what this feature delivers! Simply drop your custom code into the editor, and watch as it seamlessly converts into native Bricks elements that can be easily edited and exported. Smiles guaranteed!

Welcome to the future, folks! Imagine being able to generate an entire page using native Bricks elements— complete with accurate attributes, BEMified global classes, and labels — from just a single AI prompt. It’s not a vision for tomorrow — it’s happening today! Harness the power of AI and the flexibility of Bricks to create professional-grade HTML structures in seconds.

Playing with the Bricks' native controls and seeing real-time changes in the browser is incredibly satisfying. But sometimes, you need to dig deeper into the code generated on the frontend. With this feature enabled, you'll get a new tab where the generated CSS and HTML are fully exposed. You can even tweak the HTML code directly, and the HTML parser will automatically update the Bricks controls with your changes. It’s like magic, isn’t it?

Bricks has carefully chosen a set of fields that your clients can edit within the builder. However, some of these options may be confusing for non-experts. With Advanced Themer, you have the ability to selectively choose which fields your clients can edit, allowing you to hide those that you don't want them to access.

Have you ever pondered the idea of integrating SASS into your Bricks experience? Well, wonder no more! With Advanced Themer, you can bring the power of SASS directly inside the Builder, opening up a world of endless possibilities and creative expression right at your fingertips.

We finally have it! This game-changer will allow you to easily manage your global classes. It includes advanced filtering options (classes active on the page, filter by lock status, or if they contain styles in it), and functions such as add/edit/rename/reorder/duplicate/delete classes. You can even drop Custom CSS declarations inside the class and check the generated code on frontend by Bricks.

Should you find yourself utilizing a large number of classes, it can potentially lead to clutter over time. With Advanced Themer, you're provided with the opportunity to organize your classes into distinct categories for more streamlined management and effective filtering.

Seeking a method for quickly renaming, duplicating, grouping, or even deleting multiple classes? Fear not. The bulk actions feature caters to your needs without inducing tedious manual procedures, thereby functioning as a quick and efficient instrument for managing multiple classes all together with easiness and accuracy.

This feature enhances your ability to easily review/add/edit/delete all active styles linked to the current element's ID, as well as its corresponding classes across all breakpoints and pseudo-elements.

With this powerful tool, you can effortlessly transform the ID styles of an entire component (including its multiple children) into easily customizable classes, all with just a few clicks of a button! Since 2.4, the class converter supports nested Class Components and can be ran multiple times to update existing classes with new ID styles.

You know that layout style tab? If an element has custom values set up within that group (or any other group!), a small indicator will appear in the left panel shortcuts. How cool is that? With this neat function, you can easily see which styles are set up on the element - without even browsing your style tabs. This feature even works with styles applied on pseudo-elements such as hover, before and after!

Once you enable the option within your theme settings, you’ll be able to easily identify which elements in your structure panel have custom styles applied on the ID level and which ones have global classes. Just look for the small indicators, and you’ll never have to search for them again.

When you want to apply style changes to multiple elements in Bricks, you either have to duplicate each element (and adjust the content for each) or copy/paste classes and styles manually. But now, Advanced Themer brings in an "Extend" feature that allows you to apply styles and classes from a specific element to multiple targets swiftly.

We know it can be a bit bothersome dealing with such limited space for custom CSS in bricks, particularly when you've grown fond of using tools such as VS Code or similar. That's why we came up with a full-width advanced CSS Editor that boasts some great features, such as autocomplete CSS properties (including variables), AI assistant, autoclose brackets, search, lints, and so much more.

Another HUGE time-saver! Don't you often begin styling on the ID level and then realize it should be on a dedicated class? This handy feature enables you to create a new class (or update an existing one), transfer all your ID styles to it, and reset the styles on the ID element with just one simple action.

Say goodbye to inline colors! With our Advanced Themer, all your color management is handled through custom CSS variables. Imagine your client wants to revamp their website's color scheme entirely. Fear not! In just a few clicks, you can easily make the changes!

The initial color palette manager didn't have the capability to support colors with alpha channels. That's a thing of the past — now, you can assign any transparency value to any color present in your palette and it will indeed be accurately represented within the generated CSS variable.

With a simple click, Advanced Themer can create various color shades for you. You can create up to 20 variations at a time for transparent/light/dark shades! It's pretty much limitless!

Automatically generate the dark version of your color. The script will calculate the opposite lightness of your light color, and assign it to your dark palette in one click.

Implementing dark mode might seem challenging since it usually needs custom JS and CSS to function smoothly. But don't worry! Thanks to Advanced Themer, creating a dark mode variant of your color shades is now a breeze. Just a few clicks, and you're good to go!

If you need to refine each color shade in both light and dark mode after using our time-saving shade generator - that's perfectly OK! You have full control over every color that is generated by our color manager. Indeed, it's completely customizable whenever you need it.

Advanced Themer provides you with a whole new experience to create complex grids with an intuitive drag-and-drop modal. The CSS grid builder from AT supports the most common cases: styling at the ID level, at the class level, supports different breakpoints & query loops, and can even insert static content inside your dynamic loops! Since V2, it's also super easy to create repeated grid patterns, convert your column/rows values in a minmax() function, and add advanced responsive controls to your grid settings.

Check out this amazing new addition - the right sidebar! We have included the most popular elements right in the sidebar for easy access. Just with one click on your desired icon and the element of your choice will magically nest perfectly inside the structure panel.

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 dropdown menu.

If you're looking for an easy and efficient way to manage your HTML structure inside the builder, look no further than our improved structure panel. With just a glance, you can quickly review all the HTML tags attached to your elements and make any necessary changes right then and there.

Verifying the responsiveness of your design across various breakpoints can be a challenging task. However, our new Responsive Helper makes it a breeze. Simply double-click on any device icon to adjust the preview screen to both the minimum and maximum values of each breakpoint. Utilize the "resize" slider for a swift examination of your design on all possible viewport width.

Gone are the days when you had to jump to the style tab and search for the right accordion to style your element. With this nifty feature, you can effortlessly reach any style tab in the element panel, all by simply clicking one of the smart tab shortcuts conveniently placed on the left panel.

This new panel allows you to filter your structure panel based on advanced criteria, such as: highlighting the non-consecutive headers on the page, showing the elements that have data-attributes set, having pseudo-classes styles, etc... This assistant will ensure your page follows the best web practices!

Now you can quickly access your pseudo-classes styles without any hassle! Advanced Themer provides five helpful icon shortcuts for each element - the hover state, as well as the :before, the :after, the :active, and the :focus pseudo-elements! Simply click on them and – presto, you've got it!

The Bricks Custom CSS control now inherits all the editor enhancements from the Advanced CSS panel: CSS variable suggestion dropdown, auto-brackets, auto-indent, search function, and more!

Manage your Global & Theme CSS variables easily within the builder. Create static or clamp values on the fly that are reflected inside the builder without the need of refreshing your browser. Create multiple categories, reorder any option, rename, duplicate, delete, etc... Everything is included to keep your CSS variables under control!

You can now easily create custom categories without relying on AT's preset ones. With this new feature, you have the freedom to customize your categories and link them with any variables you're already working with, regardless of their origin, be it from code blocks, child themes, or any other sources. Simply upload a JSON file that includes your organized structure, and voila! All your variables will appear in the Variable Picker for easy access.

This one is amazing! Now you don't have to memorize all your variables! Instead, simply open a convenient modal displaying your CSS variables, select the most suitable one, and let the plugin set the field automatically or copy the selection to your clipboard.

We've added a neat little feature called Variable Preview on Hover. This cool trick allows you to easily preview the effects of variables on your fields just by hovering over them - all while the main panel is visible! No more clicks needed to see the changes. It will save you a ton of time!

If you prefer typing instead of selecting options, this alternative to the Variable Picker is perfect for you. Simply begin typing inside any styling field, and a helpful suggestion window will appear with all the matching variables for your convenience.

Pick and choose what features you want to use, from Typography to Spacing to Border - and even the builder tweaks, the AI integration, the admin bar item, and the color palette CPT. And if that's not enough, all of the related functions will automatically be disabled on both the backend and frontend, so you don't have to worry about bloating your website.

One of the top features you've all asked for is finally here! You now have the power to export all your theme settings right into a JSON file and just as easily import it to any website of your choice that is using Advanced Themer.

Can you believe we're living in a world where content, assets, and even codes can be generated by a friendly robot right within the builder, all for an incredibly low cost? Welcome to the future, because Advanced Themer is here as the first production-ready plugin for Bricks, seamlessly combining openAI and ChatGPT features. (Pretty neat, right?)

That's simply magical! Just hop onto your AI assistant, personalize your prompt, pick the number of images to create and the size format, and voila! Effortlessly, all the AI images will be crafted and stored in your media library from within the builder. So satisfying!

Are you not super confident in CSS? Don't worry, your friendly AI assistant is here to create actionable CSS code for you! With only a few simple clicks, you'll reach your personalized prompt within the builder. After the AI generates your CSS, just tap on the main CTA to place the code right into your page's CSS. And there you have it!

Select the elements that editors can access within the builder! Disabling an element ensures that they won't be able to click on it, see any associated settings, and prevent them from messing around!