Builder Tweaks

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…

Initial Release Date

September 25, 2024

Last Modification

February 4, 2025

Official Videos

Content Creators Videos

No Video found.

Documentation

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!

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