Builder Tweaks
Put the Bricks Builder on Steroids
Using the Bricks Builder is definitely a fun adventure! But, there are a couple of small hiccups this plugin aims to smooth out for an even better experience. For example, wouldn't it be nice to choose the hover state of an element with fewer clicks? How about easily identifying overflowing elements on mobile devices? Or perhaps, quickly verifying if an element meets the contrast requirements for accessibility standards? With these little improvements, your journey in Bricks building will become even more delightful!
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!
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 that can be easily edited and exported. Smiles guaranteed!
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 even tweak the HTML code directly, and the HTML parser will automatically update the Bricks controls with your changes. It’s like magic, isn’t it?
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 keep your workspace organized and your ideas accessible without disrupting your workflow.
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, cards, image galleries, and more.
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, filterable modal, making it incredibly easy to find the tags you're looking for.
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 it super easy to select the one that best suits your design!
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 the optimal object position while previewing different aspect ratios, ensuring your images look perfect across all devices.
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.
Move Styles over different elements, classes or breakpoints.
Optimize your responsive design with Copy/Paste/Reset Breakpoint Styles! Quickly copy styles from one breakpoint and paste them onto another with just a few clicks. Apply copied styles from/to a different ID, class, or pseudo-element effortlessly. Wanna reset all the styles generated on a specific breakpoint? That's a one-click operation with Advanced Themer!
CSS Grid Builder
Advanced Themer provides you with a whole new experience to create complex grids with an intuitive drag-and-drop modal. The CSS grid builder from AT supports the most common cases: styling at the ID level, at the class level, supports different breakpoints & query loops, and can even insert static content inside your dynamic loops! Since V2, it's also super easy to create repeated grid patterns, convert your column/rows values in a minmax() function, and add advanced responsive controls to your grid settings.
Global Query Loop Dropdown
Easily get a comprehensive overview of all the element IDs on your page thanks to this new function integrated to the Structure Helper! Plus, streamline your workflow by copying any element's ID directly to your clipboard.
Add elements to your structure panel on the fly!
Check out this amazing new addition - the right sidebar! We have included the most popular elements right in the sidebar for easy access. Just with one click on your desired icon and the element of your choice will magically nest perfectly inside the structure panel.
Global Query Manager
Tired of setting your query loops one by one? Embrace global query loops! With our new feature, save query settings in a manager for easy global management. Change any query variable, and it applies across the entire site. Categorize, filter, and add descriptions to each global query for simple maintenance. Generating global queries is a one-click task in the Bricks UI, and selecting them in the builder is a breeze through a dropdown menu.
Tag manager inside the structure panel
If you're looking for an easy and efficient way to manage your HTML structure inside the builder, look no further than our improved structure panel. With just a glance, you can quickly review all the HTML tags attached to your elements and make any necessary changes right then and there.
Responsive Helper
Verifying the responsiveness of your design across various breakpoints can be a challenging task. However, our new Responsive Helper makes it a breeze. Simply double-click on any device icon to adjust the preview screen to both the minimum and maximum values of each breakpoint. Utilize the "resize" slider for a swift examination of your design on all possible viewport width.
Element Tab Shortcuts
Gone are the days when you had to jump to the style tab and search for the right accordion to style your element. With this nifty feature, you can effortlessly reach any style tab in the element panel, all by simply clicking one of the smart tab shortcuts conveniently placed on the left panel.
Structure Panel Helper
This new panel allows you to filter your structure panel based on advanced criteria, such as: highlighting the non-consecutive headers on the page, showing the elements that have data-attributes set, having pseudo-classes styles, etc... This assistant will ensure your page follows the best web practices!
Pseudo-elements shortcuts
Now you can quickly access your pseudo-classes styles without any hassle! Advanced Themer provides five helpful icon shortcuts for each element - the hover state, as well as the :before, the :after, the :active, and the :focus pseudo-elements! Simply click on them and – presto, you've got it!
Custom CSS control on steroids
The Bricks Custom CSS control now inherits all the editor enhancements from the Advanced CSS panel: CSS variable suggestion dropdown, auto-brackets, auto-indent, search function, and more!
Advanced Text Wrapper
Introducing the Advanced Text Wrapper — wrap or unwrap selected content inside any desired HTML tag for the Basic Text and the Heading Elements effortlessly. No HTML coding required! It also allows you to add extra classes, styles, or an href tags seamlessly for enhanced text formatting.
Move elements inside the structure panel
With the activation of this feature, you'll gain the flexibility to easily move elements within the structure panel using either keyboard shortcuts or the contextual menu. The versatile movement options include shifting active elements up or down among siblings or altering the indentation position by moving them left or right.
Box-shadow Generator
Meet our cool new feature: the Box-shadow generator! Spruce up your designs with awesome box-shadows in just a few clicks. Take your pick from a bunch of ready-made presets and add that wow factor with minimal effort. This generator is like magic—it handles all the fancy stuff, letting you customize complex multi-layer box-shadows without any coding. Whether you're styling on IDs, classes, or pseudo-elements, this tool vibes perfectly with the Bricks builder.
Copy/paste your Interaction & Condition settings
Streamline your workflow with Advanced Themer! Forget about creating interactions and conditions one by one. Now, with a simple one-click operation, effortlessly clone settings from one element to another. Save tons of time and ensure consistent results across your design.
CSS keyboard Shortcuts
If you're writing a lot of CSS code, chances are this feature will drastically increase your productivity! 20+ keyboard shortcuts have been added to all the CSS code editors to automate popular declarations such as media queries, states, and pseudo-elements.
New CSS Controls
Column properties ("fake" masonry layouts...), advanced transform settings, white-space, backdrop-filter, background-clip, break, perspective, etc... are just some of the new CSS controls that you can now activate inside the builder.
Enable / Disable any Bricks element
Whether you're aiming to hide particular elements that you don't plan to use in the builder or looking to prevent them from being loaded on the server entirely, Advanced Themer empowers you to achieve this with just a few clicks!
Draggable Structure Panel
Want the flexibility to detach the structure panel and position it anywhere within the window? AT simplifies the process for you: simply double-click on the structure's header to toggle between docking and undocking the structure panel. Move it around freely using drag-and-drop. Additionally, you have the option to resize the undocked panel to your preferred size.
Custom default settings for relevant elements
Ever wondered why Bricks set the default HTML tag of a basic text as a div instead of a paragraph? Or why does it enable automatic caption by default on all images? You can now override these settings in a few clicks!
Lorem Ipsum generator
Have you ever begun creating your designs while still waiting for your clients to send the content? If yes, then you're surely familiar with lorem ipsum! You know, the hassle of constantly swapping windows just to copy and paste your lorem ipsum text into Bricks? Well, not anymore! Lorem ipsum is now integrated within the builder itself!
Contrast Checker
To make your design WCAG 2.0 compliant, it's essential to have the right contrast between elements, which can involve complicated tests. The contrast checker handles it all by highlighting any elements in the builder that don't meet WCAG 2.0 standards.
X-mode
X-mode offers a convenient method to identify overflowing elements on your page or just to review your overall layout structure. By clicking on this toolbar feature, all your elements will receive a greyscale filter and a distinct dark outline to easily spot any issues.
Grid Guides
If you're a Figma user, you must be familiar with this cool feature. Advanced Themer pops a toggle icon on the toolbar, and when you activate it, a neat grid layer shows up over your design. This helps you make sure everything's aligned just right in a snap!
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.
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.
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!
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.