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