/bb-ui-enhancements

Add better visible controls on Beaver Builder editor. Work by Matt Eastwood

Primary LanguagePHP

Beaver Builder UI Enhancements

Plugin by Matt Eastwood / Guy Barry / Didou Schol

Add extra styling when editing Beaver Builder layouts. Hit CTRL+e or CMD+e to activate/deactivate enhancements.

  • Distinguishes nested columns by showing dotted outlines
  • Adds a small icon to nested columns
  • Highlights columns and their parents on hover
  • Gives distinct colours to rows, columns and modules
  • Shows all columns when hovering BB admin bar
  • Shows all rows and columns when hovering "Responsive Editing" bar

Once you've selected to show the enhancements, it will be remembered until you disable it again, much like the dark/light mode option.

change styling

You can change the styling of the enhancements by adding CSS variables to your global CSS. All default colors and the outline width are set at root level, so redeclaring them at anything below that should work:

body.fl-builder-edit {
    --bbui-row-color                        : #5fb238;
    --bbui-row-color-hover                  : #8ac171;
    --bbui-column-color                     : #00A0D2;
    --bbui-column-color-hover               : #00A0D2;
    --bbui-module-color                     : #d2005f;
    --bbui-module-color-hover               : #e05292;
    --bbui-empty-col-highlight-bgcolor      : rgba(0, 160, 210, 0.1);
    --bbui-nested-col-parent-border-color   : rgba(0, 160, 210, 0.5);
    --bbui-outline-width                    : 2px;
}

Version history

1.1.1 Moved loading of bb-ui-enhancements.js to footer to ensure jQuery is loaded. 1.1.0 Store Enhancement preference to local storage so it also starts that way on reload, adding css vars so custom colors and border width can be set easily. 1.0.0 First commit