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!

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.

Quick-save Templates

Elevate your design process with our new template creation feature! Easily create a template for any section from the preview window or the structure panel menu. The quick-save function generates a thumbnail and attaches it to your templates while also displaying a preview of the saved DOM structure.

Enable / Disable any Bricks element

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

Draggable Structure Panel

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

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.

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!

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.

Auto-select Import Images in the Template popup

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

Basic text / Rich text / Heading converter

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

Expand Spacing Controls

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

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

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

Reveal the “class icons” on hover and focus

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

Highlight Parent Elements

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

Highlight Nestable Elements

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

Delete Wrappers & Move Children Up

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

Hide inactive Style accordion panel

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

Hide/show any element from the structure panel

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

“View page on new tab” shortcut

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

Resizable Structure Panel

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

Parent Element Shortcut

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

You won't build websites without it anymore!