Contextual Class Menu

Advanced Themer provides a variety of functions to enhance your classes and styles capabilities within the Builder. Previously, these functions were scattered all over, with numerous icons cluttering the UX. Now, this feature consolidates them into a single, convenient contextual menu.

Add a Featured Image Column in the Templates Admin Screen

If you find yourself with a large number of templates, it can sometimes be challenging to locate the one you want to edit. With this new feature, a preview of the featured image is added as a new column in the template list. This makes it effortless to identify the template you're looking for at…

Copy/Paste/Reset all the global classes from one element to another

Do you find yourself repeatedly using utility classes and typing them out each time? Put an end to the repetition! This enhancement enables you to easily copy all the global classes from one element and paste them onto any other element within your structure. Need to remove them all? The reset button is right at…

Select the controls your clients can see for each element type

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.

AT Main Menu in toolbar

Looking to simplify the topbar by reducing the number of shortcuts? Well, your wish has been granted! Now, all the global functions of Advanced Themer are thoughtfully organized and accessible within a single, easy-to-use dropdown menu.

SASS integration for Advanced CSS & SuperPower CSS

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.

Auto-select Import Images and/or Replace Content

If you often find yourself importing templates and inadvertently overlooking the "Import Images" or "Replace Content" options, leading to repetitive redoing of the same operation, then this tweak is designed specifically for you!

Masonry Layout for the template popup grid

Activate the Masonry layout view for your template popup grid and enjoy browsing your templates with thumbnails that maintain their image ratio, regardless of their dimensions!

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…

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.

Generate CSS with AI

In instances where you need some assistance and want to save time, artificial intelligence comes in handy! Advanced Themer allows you to instantly produce AI-driven CSS code directly in the class manager and target your root element efficiently.

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.

Move Styles over different elements, classes or breakpoints.

Optimize your responsive design with Copy/Paste/Reset Breakpoint Styles! Quickly copy styles from one breakpoint and paste them onto another with just a few clicks. Apply copied styles from/to a different ID, class, or pseudo-element effortlessly. Wanna reset all the styles generated on a specific breakpoint? That's a one-click operation with Advanced Themer!

Review the CSS generated by Bricks for each Element and Classes

It can be handy to review which CSS styles are produced by Bricks on the frontend. The Style Overview function is now able to quickly list all the CSS declarations linked to an element as well as all the classes connected to that element.

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…

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.

Breakpoint Indicators

This function will display a device icon beside the style group that includes personalized settings, enabling swift identification of breakpoints with custom styles for quick and effortless navigation among them.

Indicators of styles inherited from a class

After activating this particular feature, you will notice a fresh blue dot appearing alongside any control that has already been styled through a class. This will provide you with a comprehensive understanding of which value has been styled on the ID level and which one has been styled through a class.

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…

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),…

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…

Plain Classes Manager

Recently, Bricks introduced an awesome new feature allowing us to add multiple classes all at once! Unfortunately, it's not perfect yet – you still can't delete or replace a bunch of classes in one go. No worries, though! The Plain classes manager comes to the rescue, complete with auto-completion to suggest existing classes while you…

Class Importer

If you're an experienced developer looking to incorporate your own custom classes within the builder, you're in luck - it's now a breeze. All you have to do is upload your Stylesheet into the theme options. Advanced Themer will take care of the rest, automatically enqueuing, parsing, and including all the classes in the bricks…

More used classes suggestion & group filter

A new set of suggested classes are shown at the bottom of the plain class modal - sorted by the number of time they’ve been used on the current page. A new "Group" filter has also been added to suggest classes by any group assigned inside the Class Manager.

Collapse/Expand the Elements list

Say goodbye to the hassle of navigating through a lengthy Elements list! This small addition simplifies the process by allowing you to collapse or expand all element categories with just a single click. No more manual collapsing or wasting time navigating through categories!

Style Overview Shortcut

This new shortcut will show up when a global class is active and will allow you to open the class manager with the current global class already selected and ready to be modified using the advanced tools integrated within the Class Manager.

Class Manager Shortcut

This new shortcut will show up when a global class is active and will allow you to open the class manager with the current global class already selected and ready to be modified using the advanced tools integrated within the Class Manager.

Component Class Manager

This is like the Global Class Manager but applied to a selected element in the structure panel - so you don't have to browse your classes anymore to fix a component. Just select an element and open the Component Class Manager to easily manage the classes assigned to that specific element and all his children.

Autoformat your control values with advanced CSS functions

Want to quickly generate a fluid clamp function? Or convert a pixel value to REM on the fly? This is now super easy to do with our autoformat functions. It supports clamp(), calc(), min(), max(), var(), autoclose variable brackets and pixel to REM converter.

Import your Custom CSS from each element to your Global CSS

If you're looking for a way to regroup all your Custom CSS declared in each element into the Advanced CSS panel, you're now able to do that with one click!

Autogenerate your CSS declarations

Want to style an entire component using Custom CSS? That's super easy with this new feature. Just click on a button inside the Advanced CSS Panel, and the script will generate all your CSS declarations for you - including all the media queries based on your active breakpoint.

Extract your classes from the Advanced CSS and save them as Bricks Global Classes

Get the best of both worlds! Simply write down all your custom CSS inside the Advanced CSS panel. Then, with a simple click, extract all the classes from the CSS declarations and import them as Global Classes in Bricks - so you can easily reuse them inside the Builder.

Save your Global CSS from the builder

You are now able to add/edit/remove your global CSS declarations inside the Advanced CSS panel and save them without leaving the builder!

Group classes by Lock Status

When employing utility classes, you may prefer to have the locked classes appear at the top of the class dropdown, as opposed to the element-specific classes that you may not find much reuse for. With this functionality activated, the arrangement of classes in the dropdown will be determined by their "lock" status.

Autoselect the first unlocked class

If you set a class to your element, chances are you want to style this class by default instead of the ID. This feature will ensure that the first unlocked class of the element gets automatically activated when browsing your elements.

Auto-close CSS Variable Brackets

If you're manually typing CSS variables inside the builder's inputs, you're potentially at risk of creating a styling mess if you forget to close a bracket. With this function enabled, AT will make sure that your CSS variable is correctly formatted.

“Class Highlight” indicator in the structure panel

This feature highlights with a blue outline the elements sharing the same class inside the structure panel. It efficiently allows you to verify at a glance which element in your structure possesses a particular class.

Locked Class Indicator

A.T. will thoughtfully incorporate a green background for all the editable classes and a red background for all the locked classes. This visually appealing and intuitive modification enables you to easily identify the classes you can edit on the fly, thereby enhancing your user experience.

Style Indicators in the media queries panel

With this new feature, you won't have to worry about managing styles on various breakpoints anymore. Once activated, you'll notice clear indicators below each breakpoint where customized values have been applied.

Clone any class

Clone any class quickly and easily, hassle-free, with just two clicks inside the builder. The newly-created class will include all the styles related to the previous one, making it super convenient.

Copy class to clipboard

With just one click, effortlessly copy the name of any global class to your clipboard and seamlessly paste it onto any other element hassle-free.

Find & Replace any Style value

When dealing with CSS variables, we know how tricky it can become when you choose to alter a variable's name and chaos breaks loose. Advanced Themer comes to the rescue with its nifty "find and replace" feature, making it a breeze to globally switch out any CSS value on your page.

Responsive Grids utility classes

Easily craft CSS Grids with a smile: simply select the maximum column count on larger screens, pick the minimum width for each column, and decide the spacing in between. Advanced Themer will create a custom class that can be used right inside the builder.

Reorder your Classes inside the Bricks Popup

This small enhancement can lead to a huge boost in efficiency. No more wasted time trying to find the class you need! When you enable this feature, Advanced Themer will automatically sort your classes in alphabetical order. Trust me, managing classes is so much simpler when they're neatly organized.

Lock Styles on element ID level

We all know that styling on the ID level isn't recommended. But let's be honest, how often do we forget to create a class and start tinkering with the ID's style? Activating this feature will disable styling at the ID level, encouraging you to create a class to access the style panel. Voila!

Autocomplete support for Multiple Classes

The Bricks team has made a positive move by incorporating "multiple classes in bulk" support. Regrettably, this causes the class suggestion popup to break after the first class. When you use our Plain class modal, you'll get a suggestion popup (with autocomplete support) for each class you enter.

Reorder/Update/Remove/Reset classes in bulk

Check out this fresh addition to the Plain class modal! It doesn't just let you create new classes in bulk, you can update, remove, and even reset multiple classes at once, too. Just apply the changes to any class in the popup, and watch your class list refresh right before your eyes!

Highlight all the elements that share a same class

Discover how easy it is to see which elements have the same class! Simply click on any class within the builder, just like when you're applying styles. You'll soon notice a blue outline surrounding all the elements with that specific class.

Class counter & navigator

This new feature displays a handy class counter icon right next to your active class name. It lets you see the total number of times that particular class has been used on the current page. If you give that icon a click, it zips you through all the elements that share the same class like…

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!

Convert Vanilla Bricks Colors into CSS variables

The colors created in Bricks aren't typically saved as CSS Variables; they're primarily static values. But, if you're keen on enjoying the convenience of CSS variables, guess what? You're simply a button tap from utilizing our color variable converter.

Manage & Organize Your Colors with Ease

Your color palettes can get a little overcrowded with various roles for diverse tasks. The good news is that the color manager is all dressed up with new features to put order back into your color system. You can easily play around - adding, removing, duplicating, reordering (with drag-and-drop), or renaming any color and palette.

Advanced Color Pickr

Looks familiar? Typically, if you frequently tweak the developer settings on Chrome, chances are you've come across this same color picker. It offers easy navigation between HEX, RGB, and HSL formats. Not only that, but you can also set custom values for hue, saturation, lightness, and alpha via a convenient drag-and-drop interface.

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!

Complementary Color Generator

Create complementary colors based on any color - following the color theory. Generate the (split) opposite/triad/tetrade/quadratic/compound colors, or an analogous color palette in one click.

Advanced Scale Generator

The scale generator is engineered to handle multi-level color schemes, helping you craft complex color gradients with ease. Making intricate color scales won't be a problem anymore.

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.

Import colors from a CSS variable List

Would you like to import your CSS color variables inside the native Bricks color palettes and leverage the benefits of dynamic data? With Advanced Themer it's as easy as copy/pasting!

Set Custom Darkmode colors for ACSS variables

Do you stick with ACSS colors, yet find yourself longing for an effortless route to design a darkmode version of your website? We've got you covered! And it won't mess with your ACSS settings!

Synced with Gutenberg Default Palette

You've set up your color palette in Bricks – nice job! Now, let's say you're looking to integrate a Gutenberg block into your design. No more tedious copy/pasting needed! With Advanced Themer, all your colors - including the vanilla Bricks colors - are seamlessly synced between Bricks and WordPress. Enjoy streamlined designs without any extra…

New Element: Darkmode Button

This feature allows you to effortlessly add a lightmode/darkmode switch to your page. Do you typically go for a fixed position at one of the corners of your site? Or do you fancy incorporating it into your header or footer? No worries! Every combination is now achievable. Plus, you can tailor each design element to…

Enable/Disable any Color Palette

Wish you could A/B test your colors by temporarily disabling an entire palette? That's a one-click action with Advanced Themer!

Meta Theme Color – Both globally and per page

Do you want to easily customize the display of the page or of the surrounding user interface? Now you can quickly do that for all the browsers that support the meta theme-color attribute. Set a global theme-color value that will apply to the whole site, and even customize it on a per-page basis inside the…

New Element: Darkmode Toggle

The dark mode toggle works just like the Dark Mode button switch. The key difference is one is a button and the other is a toggle – quite the observation! Seriously, this is all about your design preference. Give both a whirl and pick the one that suits you best!

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…

Global Query Loop Dropdown

Easily get a comprehensive overview of all the element IDs on your page thanks to this new function integrated to the Structure Helper! Plus, streamline your workflow by copying any element's ID directly to your clipboard.

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…

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…

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!

Advanced Text Wrapper

Introducing the Advanced Text Wrapper — wrap or unwrap selected content inside any desired HTML tag for the Basic Text and the Heading Elements effortlessly. No HTML coding required! It also allows you to add extra classes, styles, or an href tags seamlessly for enhanced text formatting.

Move elements inside the structure panel

With the activation of this feature, you'll gain the flexibility to easily move elements within the structure panel using either keyboard shortcuts or the contextual menu. The versatile movement options include shifting active elements up or down among siblings or altering the indentation position by moving them left or right.

Box-shadow Generator

Meet our cool new feature: the Box-shadow generator! Spruce up your designs with awesome box-shadows in just a few clicks. Take your pick from a bunch of ready-made presets and add that wow factor with minimal effort. This generator is like magic—it handles all the fancy stuff, letting you customize complex multi-layer box-shadows without any…

Copy/paste your Interaction & Condition settings

Streamline your workflow with Advanced Themer! Forget about creating interactions and conditions one by one. Now, with a simple one-click operation, effortlessly clone settings from one element to another. Save tons of time and ensure consistent results across your design.

CSS keyboard Shortcuts

If you're writing a lot of CSS code, chances are this feature will drastically increase your productivity! 20+ keyboard shortcuts have been added to all the CSS code editors to automate popular declarations such as media queries, states, and pseudo-elements.

New CSS Controls

Column properties ("fake" masonry layouts...), advanced transform settings, white-space, backdrop-filter, background-clip, break, perspective, etc... are just some of the new CSS controls that you can now activate inside the builder.

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.

Enable / Disable any Bricks element

Whether you're aiming to hide particular elements that you don't plan to use in the builder or looking to prevent them from being loaded on the server entirely, Advanced Themer empowers you to achieve this with just a few clicks!

Draggable Structure Panel

Want the flexibility to detach the structure panel and position it anywhere within the window? AT simplifies the process for you: simply double-click on the structure's header to toggle between docking and undocking the structure panel. Move it around freely using drag-and-drop. Additionally, you have the option to resize the undocked panel to your preferred…

Custom default settings for relevant elements

Ever wondered why Bricks set the default HTML tag of a basic text as a div instead of a paragraph? Or why does it enable automatic caption by default on all images? You can now override these settings in a few clicks!

Lorem Ipsum generator

Have you ever begun creating your designs while still waiting for your clients to send the content? If yes, then you're surely familiar with lorem ipsum! You know, the hassle of constantly swapping windows just to copy and paste your lorem ipsum text into Bricks? Well, not anymore! Lorem ipsum is now integrated within the…

Contrast Checker

To make your design WCAG 2.0 compliant, it's essential to have the right contrast between elements, which can involve complicated tests. The contrast checker handles it all by highlighting any elements in the builder that don't meet WCAG 2.0 standards.

X-mode

X-mode offers a convenient method to identify overflowing elements on your page or just to review your overall layout structure. By clicking on this toolbar feature, all your elements will receive a greyscale filter and a distinct dark outline to easily spot any issues.

Grid Guides

If you're a Figma user, you must be familiar with this cool feature. Advanced Themer pops a toggle icon on the toolbar, and when you activate it, a neat grid layer shows up over your design. This helps you make sure everything's aligned just right in a snap!

ID’s overview

Easily get a comprehensive overview of all the element IDs on your page thanks to this new function integrated to the Structure Helper! Plus, streamline your workflow by copying any element's ID directly to your clipboard.

Element CSS Shortcut

Check if your element has custom CSS styles set on the fly! Click on the icon to directly access the CSS control and manage your custom codes in no time.

Expand All Children Elements

Got a load of nested elements to deal with? It can definitely feel overwhelming sorting through several parent elements in the structure panel, just to access the one you need to tweak. Now, there's no pressure. Using this feature, you can swiftly unfold all the elements within a container.

Auto-select Import Images in the Template popup

How annoying is it to import a full template on your page, but realize you forgot the option to import the images? Now you have to delete all and redo the steps again. Well, not anymore. Advanced Themer checks the "import images" for you every time you open the template popup.

Basic text / Rich text / Heading converter

Just like the block/div/container converter, this function will allow you to easily convert a Basic text element to a Rich text or a heading without modifying the styles and attributes you already set on the original element.

Expand Spacing Controls

The spacing controls in Bricks are fancy, but can sometimes be unfriendly when dealing with CSS variables. With Advanced Themer, you can easily toggle an "expanded" view and easily manage your long values without fear!

Increase the builder’s inputs size to easily manage CSS variables and custom CSS functions

The text inputs inside the builder are relatively small and hardly consent your to have a clear overview of the variables and functions added to each field. With this feature enabled, the input size gets increased.

Reveal the “class icons” on hover and focus

If you're working on small devices and you're willing to add all the class functions and shortcuts, chances are you won't have enough room to see your class name anymore. With this feature enabled, the class icons will be visible on hover/focus only.

Highlight Parent Elements

When you select this option, a light blue highlight will be added to the background of all parent elements associated with the active element within the structural panel so you can catch them on the fly.

Highlight Nestable Elements

When you opt for this option, you will notice the icons of the nestable elements in the structure panel beautifully highlighted with a shade of blue so you can catch the nestable parent at a glance.

Delete Wrappers & Move Children Up

You'll notice a new icon appearing in the 'Delete' section of the structure panel. This function empowers you to only remove a wrapper, while seamlessly repositioning all its related elements higher up within the structure.

Hide inactive Style accordion panel

Hide all the inactive accordion panels within the Style tab and focus on the styles you want to edit. This will significantly reduce unnecessary scrolling inside your element's settings.

Hide/show any element from the structure panel

Effortlessly toggle the visibility of an element with ease through the contextual menu in the structure panel, without having to search through the element's styles for the display control.

“View page on new tab” shortcut

We have incorporated a beneficial feature of presenting an option to open the frontend page on a new tab. Initially, this icon remains hidden within the topbar of the builder, but now, we have introduced a global builder tweaks option to conveniently enable this feature.

Resizable Structure Panel

You heard it right - the right structure panel is now resizable in the exact same way as the left panel. This means more room, better functionality, and more flexibility for your daily tasks.

Parent Element Shortcut

When your code starts getting a bit more complex, with loads of items in your structure panel, it can be a bit tricky to quickly spot the direct parent element. No worries though! Advanced Themer resolves this issue by placing a super handy icon shortcut in your left panel. This little gem lets you jump…

Control the grid columns inside the global elements panel

By default, the elements list is showcased in a two-column grid, which looks pretty good. However, it can lead to excessive scrolling when searching for a specific element. When you enable this feature, a fresh set of icons will appear at the top of the panel, allowing you to increase the number of columns up…

Disable the outline border of the active element when styling Borders and Box-shadow

When you're working on the borders and box-shadows of an element, the active outline might cover up your adjustments. To reveal them, you have to change the active element and cross your fingers that you won't need to make extra tweaks! This feature ensures the active outline stays hidden while you style borders and box-shadows!

Disable the PIN Icon on the elements list

Have you ever felt a tiny bit annoyed when you were all set to add a new element to your page, only to have that pin icon pop up in your way, just as you clicked on the element? Truth be told, we're perfectly fine without those pesky pin icons, right? Well, that's precisely what…

Keyboard Shortcuts

If you're a fan of "keyboard shortcuts," this feature has got you covered! Advanced Themer lets you assign custom keyboard shortcuts to the global functions. This includes activating grid guides, x-mode, contrast checker, dark mode toggle, opening the Advanced CSS editor panel, the resource panel, and the global AI panel. 

Class Preview on hover

Quite like the "Color Preview on hover" option, this handy feature lets you see the effect of a class on an element simply by hovering over it. It comes in really handy when you're working with a CSS framework full of similar choices. You won't need to guess the ideal fit anymore - just hover…

Preview Colors on hover

This feature comes in super handy when you're uncertain about the perfect color shade for an element. Just hover over the color within the builder to preview it on the spot! Saves loads of time and effort!

Darkmode toggle inside the toolbar

Want to see how your website appears in dark mode? You can now find a toggle for that within the Bricks toolbar! This feature makes it super easy to identify and fix any style issues in dark mode all in a snap.

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…

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.

Preview your CSS Variables from the suggestion dropdown

Effortlessly view your CSS variables within the iframe window by simply hovering over, or navigating through the suggested values in the dropdown menu using the UP and DOWN arrow keys.

Core Framework Integration

If you are running the Bricks Addon released by the Core Framework team, you'll now see all the variables set in Core inside the Variable Pickr nicely sorted by groups and types.

ACSS Integration

If you have ACSS installed, you'll love how simple it is to select and display any CSS variable used by the framework in your fields. No need to worry about trying to remember all the details or resorting to a cheatsheet. Just open up the Variable Picker, click on the new ACSS tab, and effortlessly…

Fluid Typography

Design unique typography scales by selecting a minimum font-size for mobile and a maximum font-size for larger devices. The plugin will create the clamp function for you. Insert the variable into your font-size setting. Voila, all done! No need to care about breakpoints anymore.

Fluid Spacing

Just like with typography, you have the freedom to develop your own unique spacing approach! Our built-in repeater allows you to easily add or subtract any value according to your personal design guide. Although it comes with a default 8-point grid system, you're more than welcome to customize it to suit your needs.

Fluid Border-Radius

Isn't it frustrating when a beautiful border-radius on desktop gets totally messed up on smaller devices? Worry no more, as fluid border-radius variables have come to your rescue!

Fluid Width

Develop your very own responsive width variables! You have complete control to adjust and fine-tune any value with the use of our built-in repeater.

Box-shadow Variables

Do you often find yourself typing out the same box-shadow values every time you want to style an element? Remembering all those values can be a tedious and frustrating process. However, there's an easy way to improve your workflow and save you ample time with these CSS Variables.

Border Variables

Are you tired of repeatedly typing your border values whenever you need to style an element? It can be a frustrating and time-consuming task to remember all the values. Fortunately, there is a handy solution to improve your workflow.

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…

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.

BricksLabs Integration

BricksLabs has fantastic articles available to make your Bricks experiences even better. Now, you can access the latest posts faster and search for articles using essential keywords with ease- all without having to leave the builder.

Resources Panel

Are you building a template from a design file? Need a quick way to access your CheatSheets? Or maybe you want to filter your media gallery and grab the full image URL? The resource panel has got your back! Simply create your galleries in the theme options, and you can easily display them within the…

AT License key is hidden on the frontend

We understand that license misuse can be a legitimate concern. But rest assured, we've taken extra measures to ensure that your license remains secure - our tool never displays any output inside the DOM. So go ahead, install Advanced Themer today, and take your client's website design to the next level with complete confidence and…

Allow upload of JSON and CSS files in the Media Library

Since we introduced the framework import feature that relies on a JSON file for the categories and variables, you'll need to consent to the Media Library to upload JSON MIME files. We added a simple toggle in the settings to do so. And since some users weren't able to upload .css files, we added the…

Reset your Theme Settings at any time

To keep things fresh and avoid any unnecessary clutter, we added a simple function that deletes old, unused data from the database. , Just give that 1-click reset button a tap to effortlessly clear all the Theme settings data on your server.

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,…

Using new ChatGPT API functionalities without extra cost

There's been an influx of ChatGPT tools lately, most of which charge you to use their APIs. That's totally fine! But, we've decided to take a different approach with Advanced Themer. By using your own API keys, you are billed directly by OpenAI - we don't earn anything from your daily usage. Isn't that cool?…

Add new content… or improve your existing one!

Creating fresh new content for your website with OpenAI is a breeze, but did you know you can effortlessly fine-tune the existing one too? Your content element is auto-copied into the prompt – just give some simple directions to the AI like checking grammar, adjusting the tone, or even enhancing the text overall.

Global Panel and Heading/Text element integration

There are two different panels incorporated into Bricks for your convenience! The first, the global AI panel, allows you to create cool content like completions, chats, edits, and images. The second panel is directly connected to the core text and header elements; simply click the dedicated icon, generate your snazzy content, and paste it right…

Advanced prompt Settings

Get the most out of the impressive openAI API by tailoring your prompts with features like custom voice tones, system context, temperature, top probability tokens, presence and frequency penalties, maximum tokens, and the number of results. Give it a shot and see the difference for yourself!

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…

Speech to Text converter

Introducing the Speech to Text AI converter, your go-to tool for effortlessly converting any audio file into text! Simply upload your audio file, choose the output language and set the desired temperature, then sit back and witness the magic unfold. The entire transcription of your audio file is generated seamlessly inside the builder, eliminating the…

All your session requests are saved in the history tab

The History tab lets you easily find all your past prompts and AI-made content from your session. Want to go back to an earlier AI-created article? No worries, only a few clicks will take you there. Plus, you'll find handy details such as the token count per request, any unique settings you used, as well…

Chat back and forth with the AI assistant

Sometimes, it might take a few tries to achieve the perfect result. No worries, the new ChatGPT 3 & 4 API has chat functionality, which makes communicating with AI a breeze! The best part, it's seamlessly integrated within the builder. Though it's token-hungry, it will truly put a smile on your face!

Your API key is securely stored

Your database has been leaked? Well, that sucks... The good news is that your OpenAI API key is safe because it's stored using 128-bit AES encryption in your database. But next time, you may wanna ask your AI assistant for a couple of suggestions about how to correctly secure your website from database leaks!

Remove Template & Settings links everywhere

As previously noted, editors can't access the built-in Bricks templates and settings. Despite this, there are quite a few links leading to them, resulting in error pages (examples include the admin bar links, dashboard menu, getting started page, and so on). This feature takes care of these by getting rid of any menu item or…

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!

No access to styling options

All the styling options have been cleared from your client builder's left panel. Amazing! But don't forget about the capacity for your clients to modify the padding or margin within the builder! You know, those green spaces beneath the active elements, right? Those have been taken away as well!

Builder tweaks for editors

When you turn on Strict Editor View, things become much easier and cleaner for your clients! The structure panel vanishes, and unwanted icons from the toolbar disappear too. We've even transformed the left panel to be super user-friendly and intuitive!

Disable links to edit the Header & Footer

In the standard editor mode, your client may not have access to the Bricks templates. However, if they edit a page featuring header/footer templates, they'll still see the characteristical red outline and the "Edit Header/Footer" button when hovering over the header and the footer, which could lead to confusion. This feature removes any visible link…

Enable/Disable Any Toolbar Icon

The default toolbar icons could be a tad puzzling for clients who aren't design experts. If you're taking advantage of the Strict Editor View, it's quite likely that you simply wish to allow your clients to modify the content, while preventing them from tinkering with the settings and responsive choices. This feature enables you to…

Add your Company Logo inside the builder

This small addition can truly make an impact on your clients' impressions. This handy feature lets you replace the top-left Bricks logo with your very own.

Change the Accent Color

Maintaining consistency is important, right? When personalizing the appearance of the builder for your clients, it might be beneficial to adjust the builder's accent color to align with your company's style guide. This feature is designed precisely for that purpose!

Reduce the Left Panel Visibility

Your clients should be able to concentrate on their content without having to worry about the settings. That's why we've designed this feature to keep the left panel mostly out of sight, making it pop back into the builder only when it's truly needed, such as when adding a new image or picking an icon.