Feature Finder
167 feature(s) found.
Page Transitions
Advanced Themer gives you the ability to add page transitions to your site in a few clicks! These animations can be set on a global level – affecting all the pages of your website – or on a page level. Inside the page level, you can also enable the ability…
View Feature
Quick Remote Templates
This powerful new feature lets you view all your remote templates in a clean, organized left panel, with categories for easy navigation. With Quick Remote Template, you can add multiple templates at once without leaving the modal. Plus, you can drag and drop entire sections into specific positions, and even…
View Feature
Focus mode
Hold the CMD key (or CTRL key for PC users) while clicking on any element in the Structure Panel. This will highlight the selected element and its children, while temporarily hiding all other distracting elements in the panel for a cleaner view.
View Feature
Zoom-Out
Easily scale down your preview window to get a clear overview of your page. The best part? With Zoom-out enabled, only the root elements (typically your sections) are selectable within the preview window. These elements can be dragged and dropped only at the root level, ensuring you can reorder your…
View Feature
Color Variables Picker
Easily apply your color variables to any builder control with the new Color Variable Picker. This tool showcases all your palettes in an organized layout, complete with each color's corresponding light/dark shades and tints. After trying this feature, you won't want to use the native color grid anymore!
View Feature
Logical Properties
Simplify your CSS by replacing directional properties with logical properties. Logical properties adapt automatically based on the text direction and writing mode of your content, ensuring consistent layouts for both left-to-right (LTR) and right-to-left (RTL) languages. This approach reduces the need for manual adjustments, makes your code more maintainable, and…
View Feature
2 New Elements: Nestable Darkmode Button & Toggle
Introducing the Nestable Dark Mode Button and Toggle, two new elements offering full control over inner elements for easy customization. They are fully accessible on the fly - with aria-label and focus styling, support logical properties, and include precompiled default styles within the builder controls.
View Feature
Lock Elements Order
Stop accidentally moving your elements inside the structure panel! Click the corresponding lock icon to disable dragging and fix the elements' order. Click again to re-enable dragging and restore functionality.
View Feature
Extract Variables as Global Variables
Extract all CSS variables from your Custom CSS code and generate core Global CSS Variables with a single click! This feature is especially handy when using an external framework, allowing you to integrate builder functions like the Variable Picker for a more streamlined workflow.
View Feature
Quick Search
Looking for a specific element inside your structure? One click! Wanna add any new element to the structure? One click! You want to assign (or create) global classes/variables to your element? that's also one click. Say goodbye to the countless hours spent at searching after your stuff!
View Feature
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…
View Feature
Codepen Converter
Imagine writing (or copy-pasting) HTML, CSS, or JavaScript into an editor, clicking a convert button, and—boom!—all that static, hard-to-read code is transformed into dynamic Bricks elements. That’s exactly what this feature delivers! Simply drop your custom code into the editor, and watch as it seamlessly converts into native Bricks elements…
View Feature
WPCodeBox integration
WPCodeBox is a powerful style and script organizer, highly popular in the Bricks community. However, one crucial feature was missing for full Bricks compatibility: the ability to edit CSS, SASS, and partials directly within the builder and see live changes without refreshing the page. With this new integration, you get…
View Feature
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,…
View Feature
AI generated Structure
Welcome to the future, folks! Imagine being able to generate an entire page using native Bricks elements— complete with accurate attributes, BEMified global classes, and labels — from just a single AI prompt. It’s not a vision for tomorrow — it’s happening today! Harness the power of AI and the…
View Feature
Generated Code & Element HTML parser
Playing with the Bricks' native controls and seeing real-time changes in the browser is incredibly satisfying. But sometimes, you need to dig deeper into the code generated on the frontend. With this feature enabled, you'll get a new tab where the generated CSS and HTML are fully exposed. You can…
View Feature
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.
View Feature
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…
View Feature
Admin/Editor notes
Now, you can easily add notes to any element within Bricks. Simply write down your thoughts, reminders, or instructions directly on the element. To view your notes, just hover over the dedicated icon in the structure panel — no need to activate the element. This streamlined process ensures you can…
View Feature
Nested Elements Library
Effortlessly create and save your own reusable elements in just a few clicks! Unlike global elements in Bricks, nested elements support unlimited children, custom styles, and classes. You can quickly categorize and filter all nested elements within the dedicated library. This library also includes default nested elements such as headers,…
View Feature
Dynamic Data Helper
If you frequently use dynamic tags in your builds, you're likely familiar with how small the dynamic data dropdown is, often requiring extensive scrolling to find the tag you need. With this new feature, scrolling is a thing of the past! All your dynamic tags are displayed in a fullscreen,…
View Feature
Image Mask Helper
Bricks offers a handy set of 24 SVG masks for your images, but there's currently no way to preview them within the builder — you have to try each one individually to find the right fit. With this new feature, all available masks are displayed in a fullscreen modal, making…
View Feature
Focus Point
Have you ever struggled to set the perfect focus point for your images across various browser sizes? Say goodbye to those challenges! With the new focus point feature in Advanced Themer, you can effortlessly drag and drop the ideal focus point for any image or background-image. The function dynamically calculates…
View Feature
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.
View Feature
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…
View Feature
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.
View Feature
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…
View Feature
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…
View Feature
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.
View Feature
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.
View Feature
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…
View Feature
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.
View Feature
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.
View Feature
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.
View Feature
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.
View Feature
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…
View Feature
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.
View Feature
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…
View Feature
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…
View Feature
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.
View Feature
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.
View Feature
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…
View Feature
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…
View Feature
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…
View Feature
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…
View Feature
Plain Classes
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…
View Feature
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…
View Feature
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.
View Feature
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!
View Feature
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.
View Feature
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.
View Feature
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…
View Feature
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.
View Feature
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!
View Feature
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.
View Feature
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.
View Feature
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!
View Feature
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…
View Feature
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.
View Feature
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.
View Feature
“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.
View Feature
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.
View Feature
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.
View Feature
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.
View Feature
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…
View Feature
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.
View Feature
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.
View Feature
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…
View Feature
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.
View Feature
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…
View Feature
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.
View Feature
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…
View Feature
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!
View Feature
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.
View Feature
Global Color Manager
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…
View Feature
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…
View Feature
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.
View Feature
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!
View Feature
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.
View Feature
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.
View Feature
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.
View Feature
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!
View Feature
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.
View Feature
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!
View Feature
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!
View Feature
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…
View Feature
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…
View Feature
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!
View Feature
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…
View Feature
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!
View Feature
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…
View Feature
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.
View Feature
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.
View Feature
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.…
View Feature
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.
View Feature
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…
View Feature
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…
View Feature
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!
View Feature
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!
View Feature
SuperPowerCSS: custom CSS 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!
View Feature
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.
View Feature
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.
View Feature
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…
View Feature
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.
View Feature
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.
View Feature
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.
View Feature
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!
View Feature
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…
View Feature
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!
View Feature
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…
View Feature
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.
View Feature
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.
View Feature
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!
View Feature
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.
View Feature
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.
View Feature
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.
View Feature
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.
View Feature
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!
View Feature
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.
View Feature
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.
View Feature
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.
View Feature
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.
View Feature
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.
View Feature
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.
View Feature
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 Feature
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…
View Feature
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…
View Feature
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…
View Feature
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,…
View Feature
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.
View Feature
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…
View Feature
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!
View Feature
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.
View Feature
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…
View Feature
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.…
View Feature
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.
View Feature
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…
View Feature
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.
View Feature
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.
View Feature
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…
View Feature
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.
View Feature
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.
View Feature
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…
View Feature
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…
View Feature
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…
View Feature
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.
View Feature
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…
View Feature
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…
View Feature
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…
View Feature
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…
View Feature
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!
View Feature
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!
View Feature
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…
View Feature
Text to Speech converter
Introducing the Text to Speech AI feature, your ultimate solution for converting text into lifelike speech! With this innovative tool, simply input your text, select the desired voice and adjust the speed to your preference. Sit back and experience your text come to life as it is seamlessly transformed into…
View Feature
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…
View Feature
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…
View Feature
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…
View Feature
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…
View Feature
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…
View Feature
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!
View Feature
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!
View Feature
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!
View FeatureDisable 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…
View FeatureEnable/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.…
View FeatureAdd 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.
View FeatureChange 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!
View FeatureReduce 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…
View Feature