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

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!

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 a glance.

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!

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

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.

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

You won't build websites without it anymore!