FEATURES
Nice-to-have
We love all the features that come with Advanced Themer! However, we thought it would be nice to make a separate list of what we consider to be the not-so-essential, yet delightful features. Isn’t it wonderful how these little details help enhance our experience using Advanced Themer? So, get ready to discover our handpicked selection of the nice-to-have features included in Advanced Themer!

Selection
Modified Mode
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.
Link Spacing Controls by Default
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!
Remove Default Libraries for Icon elements
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.
Color Popup set to RAW and displayed as a LIST
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.
Sync Element’s label with the first Global Class name
Need a quick way to generate labels for your elements? How about automatically creating labels based on the class attached to the element? That’s the core idea behind this tweak! As soon as you add a class to an element, the script instantly "labelizes" the class name and attaches it to the element. No more worrying about labels—it's all done for you!
Code Element Tweaks
Give your Code Element a powerful upgrade! With Code Element Tweaks enabled, you'll unlock a range of new features designed to simplify writing and managing custom code within Bricks. These enhancements offer a more intuitive and efficient experience, allowing you to handle your custom HTML, CSS, and JavaScript with ease, reduce friction, and save you time!
Link indicator inside the Structure Panel
Need an easy way to identify which elements are wrapped in a link within your Structure Panel? This feature adds a small icon next to all elements enclosed in a link, making them instantly recognizable.
Cleanup deleted global classes from the elements
Clean up deleted global class IDs attached to your elements! This optional feature allows you to remove outdated class IDs that are no longer in use, providing a cleaner and more organized element structure. By default, this cleanup is disabled, giving you control over whether to keep or remove class IDs, especially when testing different utility classes. This option ensures your elements stay streamlined without accidentally losing important data.
Hide/Remove Element
Advanced Themer introduces advanced element visibility options to enhance your workflow. With this feature, you can choose to hide a specific element within the builder without affecting its visibility on the frontend. Conversely, you can disable an element from the frontend while keeping it visible and editable within the builder.
Merge Global Classes
Have you found yourself creating numerous global classes on an element, each with its own style? Now, rather than getting lost in an endless copy/paste process, you can merge all existing styles into a single, well-organized class with just one click! The merge global class feature centralizes styles from all active global classes into a newly created global class of your choice, eliminating the need for copy/paste.
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 your fingertips!
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.
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.
Autogenerate your CSS Component selectors
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 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.
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.
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 magic!
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 hassle!
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 your taste – icons, colors, sizes, shapes, borders, and more!
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 builder settings.
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!
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.
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.
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 to the parent element in a flash!
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 to 4.
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 this special feature is all about!
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 and select the perfect match.
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.
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 ease.
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 CSS option as well.
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.
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 as a super helpful copy/paste Call to Action.
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 page directing to the template archive or global settings.
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 to header/footer templates when using the Strict Editor Mode for a more seamless experience.
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 manage which toolbar icons will show up in the Strict editor View.
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.