Builder Tweaks

Color Popup set to RAW and displayed as a LIST

By default, Bricks displays your colors in a grid view within the builder's color picker and expects you to select a HEX value. For users who prefer working with CSS variables instead of static values, this often means switching to RAW mode repeatedly to paste your variable. With this new feature, the color picker will…

Initial Release Date

January 23, 2025

Last Modification

February 13, 2025

Official Videos

Content Creators Videos

No Video found.

Documentation

By default, Bricks displays your colors in a grid view within the builder’s color picker and expects you to select a HEX value. For users who prefer working with CSS variables instead of static values, this often means switching to RAW mode repeatedly to paste your variable. With this new feature, the color picker will automatically open in RAW mode and display your colors in a convenient list format, streamlining your workflow.

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