Builder Tweaks

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.

Initial Release Date

February 22, 2023

Last Modification

February 4, 2025

Official Videos

No Video found.

Content Creators Videos

Documentation

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.

More Features in the Builder Tweaks category:

Sync Heading Text with Element LabelCheck it Out
Animation Tab & ControlsCheck it Out
Filterable Structure PanelCheck it Out
Quick Remote TemplatesCheck it Out
Focus modeCheck it Out
Zoom-OutCheck it Out
Logical Properties controlsCheck it Out
Lock Elements OrderCheck it Out
Modified ModeCheck it Out
Link Spacing Controls by DefaultCheck it Out
Remove Default Libraries for Icon elementsCheck it Out
Color Popup set to RAW and displayed as a LISTCheck it Out
Quick SearchCheck it Out
Sync Element’s label with the first Global Class nameCheck it Out
Codepen ConverterCheck it Out
Code Element TweaksCheck it Out
Generated Code & Element HTML parserCheck it Out
Link indicator inside the Structure PanelCheck it Out
Admin/Editor notesCheck it Out
Nested Elements LibraryCheck it Out
Dynamic Data HelperCheck it Out
Image Mask HelperCheck it Out
Focus PointCheck it Out
Hide/Remove ElementCheck it Out
AT Main Menu in toolbarCheck it Out
Move Styles over different elements, classes or breakpoints.Check it Out
Collapse/Expand the Elements listCheck it Out
CSS Grid BuilderCheck it Out
Global Query Loop DropdownCheck it Out
Right Elements ShortcutsCheck it Out
Global Query ManagerCheck it Out
Tag manager inside the structure panelCheck it Out
Responsive HelperCheck it Out
Element Tab ShortcutsCheck it Out
Structure Panel HelperCheck it Out
Pseudo-elements shortcutsCheck it Out
SuperPowerCSS: custom CSS on steroidsCheck it Out
Advanced Text WrapperCheck it Out
Move elements inside the structure panelCheck it Out
Box-shadow GeneratorCheck it Out
Copy/paste your Interaction & Condition settingsCheck it Out
CSS keyboard ShortcutsCheck it Out
New CSS ControlsCheck it Out
Disable any Bricks elementCheck it Out
Draggable Structure PanelCheck it Out
Custom default settings for relevant elementsCheck it Out
Lorem Ipsum generatorCheck it Out
Contrast CheckerCheck it Out
X-modeCheck it Out
Grid GuidesCheck it Out
ID’s overviewCheck it Out
Element CSS ShortcutCheck it Out
Expand All Children ElementsCheck it Out
Basic text / Rich text / Heading converterCheck it Out
Expand Spacing ControlsCheck it Out
Increase the builder’s inputs size to easily manage CSS variables and custom CSS functionsCheck it Out
Reveal the “class icons” on hover and focusCheck it Out
Highlight Parent ElementsCheck it Out
Highlight Nestable ElementsCheck it Out
Delete Wrappers & Move Children UpCheck it Out
Hide inactive Style accordion panelCheck it Out
Hide/show any element from the structure panelCheck it Out
Parent Element ShortcutCheck it Out
Control the grid columns inside the global elements panelCheck it Out
Disable the outline border of the active element when styling Borders and Box-shadowCheck it Out
Disable the PIN Icon on the elements listCheck it Out
Keyboard ShortcutsCheck it Out
Class Preview on hoverCheck it Out
Preview Colors on hoverCheck it Out
Darkmode toggle inside the toolbarCheck it Out

You won't build websites without it anymore!

Check the Pricing Plans - Starts from $59