FEATURES

Game Changer

Advanced Themer comes packed with numerous cool features, ranging from minor customizations to major enhancements that can totally amp up your productivity. In this part, we’re excited to share with you the cherry-picked, most fantastic features found in Advanced Themer, so buckle up and explore!

Selection

Class Manager

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.

Group your Classes by Categories

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.

Bulk Actions on Classes

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.

Style Overview

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.

Class Converter

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.

Style indicators for the left panel and the pseudo elements shortcuts

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!

Style & classes indicators inside the structure panel

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.

Extend your classes & styles from any element

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.

Advanced CSS Editor

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.

Export ID Styles to any Class

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.

Dynamic Colors

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!

Alpha channel supported

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.

Color Shades generator

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!

Auto-darkmode

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.

No-code Darkmode

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!

Customize any shade and dark color variant

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.

CSS Grid Builder

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.

Add elements to your structure panel on the fly!

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.

Global Query Manager

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.

Tag manager inside the structure panel

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.

Responsive Helper

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.

Element Tab Shortcuts

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.

Structure Panel Helper

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!

Pseudo-elements shortcuts

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!

Custom CSS control on steroids

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!

Quick-save Templates

Elevate your design process with our new template creation feature! Easily create a template for any section from the preview window or the structure panel menu. The quick-save function generates a thumbnail and attaches it to your templates while also displaying a preview of the saved DOM structure.

Variable Manager

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!

Create Fluid and Static Variables on the fly

With Advanced Themer, you're free to explore beyond fixed variable categories. Go ahead and create your own variables, for any existing CSS property – be it with static or fluid values. Have fun as Advanced Themer comes up with a custom clamp function tailored for all your fluid variables!

Import your own CSS Variable Framework

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.

Variable Picker

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.

Variable Preview on hover

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!

Autocomplete your CSS Variables

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.

Enable/Disable any feature

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.

Import/Export your Advanced Themer Settings

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.

Generate Content right inside the builder

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?)

Generate AI images and save them right inside WordPress in one click

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!

Write faster CSS codes with your AI assistant

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!

Enable/disable elements options for your clients

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!

You won't build websites without it anymore!