Bricks Boost Documentation

Installation

1. Download the bricks-boost.zip file from your account.
2. In your WordPress admin, go to Plugins > Add New > Upload Plugin.
3. Choose the zip file and click Install Now.
4. Activate the plugin.
5. Navigate to Bricks > Bricks Boost.
6. Enter your license key to activate the plugin (see below).
7. Once activated, configure your features from the Features tab.

License Activation

Bricks Boost requires a valid license key to use. All features are locked until the license is activated.

Activating Your License

1. Log in to your account at bricksboost.io.
2. Copy your license key from your account dashboard.
3. In your WordPress admin, go to Bricks > Bricks Boost.
4. Paste your license key into the input field and click Activate.

Once activated, you'll have full access to all features and settings.

Deactivating Your License

If you need to move your license to a different site or simply want to deactivate:

1. Go to Bricks > Bricks Boost > License tab.
2. Click Deactivate License.

Your license key supports unlimited sites, so you can activate it on as many installations as you need.

Finding Your License Key

Your license key is available in your account at bricksboost.io after purchase. If you can't find it, contact support at support@bricksboost.io.

Features Overview

Bricks Boost includes ten features, each of which can be individually enabled or disabled from the Features tab in the settings. Disabled features don't load any assets in the builder, keeping things lightweight.

Toggling a feature on or off auto-saves immediately. The corresponding tab in the admin nav appears or disappears live.

Variable Picker

The Variable Picker gives you quick access to your Bricks global variables and built-in Boost Mode presets directly in the builder. Right-click any mapped input to open a popup with the relevant choices.

Setup

1. Optionally set up variable categories in Bricks (under Style Manager) for the input types you want to use your own variables on.
2. Go to Bricks > Bricks Boost > Variable Picker.
3. For each input type, either map a Variable Category from your Bricks variables, or turn on Boost Mode to use the built-in preset.
4. Pick a Layout (List or Grid) for how the popup displays your variables.

All settings auto-save the moment you change them.

Input Type Mappings

BB Radius Values

When Border Radius Boost Mode is on, the picker shows your 5 named slots. The values for each slot are configurable in the Boost: Radius Values box at the bottom of the Variable Picker tab. Defaults are 0.25rem, 0.5rem, 1rem, 2rem, and 9999px — but you can use any CSS unit.

Color Layout

For color inputs, you can choose between two display modes:

• List — Shows colors in a vertical list with names and preview swatches.
• Grid — Shows colors as a compact grid of swatches grouped by base name, with rows for shade variations (T, L, D, etc.).

Object Position Picker

The Object Position picker is unique — instead of a list of variables, it opens a visual focus-point picker with the actual image (when available) and an interactive blue dot. Click anywhere on the image to set the position, drag the dot, or use the 5×5 quick-pick grid below for 25 standard positions at 0%, 25%, 50%, 75%, and 100% intervals. The current X/Y percentages display in the bottom-right of the preview.

Live Preview on Hover

For Aspect Ratio and Grid Boost presets, hover any chip to see the value applied live in the canvas before clicking. The original value restores if you mouse out without clicking. (This is only available where Bricks doesn't have a competing native picker that would interfere.)

Currently-Applied Highlight

When the input you right-click already has a value, the matching swatch or chip in the picker is highlighted with a white border so you can see what's currently set.

Usage

Right-click any mapped input in the Bricks Builder. A popup will appear showing the relevant variables or Boost preset. Click any item to insert it.

Boost Builder

Boost Builder is a modal library with three tabs — Layouts, Sections, and Components — that paste blocks straight into your Bricks page. Layouts are baked into the plugin; Sections and Components are synced from your bricksboost.io account and follow your license to every site you build on.

Opening the Modal

You can open Boost Builder from any of these surfaces:

• Top bar buttons — three icons next to Bricks' + button (toggle in the admin).
• Quick Add Bar — Layouts, Sections, and Components icons at the bottom of the bar (toggle in the admin).
• Pop Add popup — Add Layout / Add Section / Add Component buttons at the bottom (toggle in the admin).
• Keyboard — Alt/Option + Q opens Layouts, Alt/Option + W opens Sections, Alt/Option + E opens Components. Works from anywhere in the builder, including over the canvas.

Block Name Input

The block name field at the top of the modal controls how the inserted item is named. The same rule applies on all three tabs:

• With a block name (e.g. "hero", "features") — the classed variant is pasted, with the placeholder (bblayout, bblibrary, or bbgrid depending on what's being inserted) renamed to your block name following BEM conventions (hero__title, hero__cta, etc.). Class IDs are regenerated so repeat pastes don't collide.
• Empty block name — the ID-level variant is pasted as-is, with no global classes and no rename. Use this for one-off drops where you don't need a reusable pattern.

Layouts

The Layouts tab gives you 28 column ratios across four groups: 2-col, 3-col, 4-col, and 5-col. Each tile shows a preview of the column proportions. Click any tile to insert a section + container + grid wrapper with empty column blocks ready for content.

Responsive Breakpoints

Every layout includes Bricks responsive breakpoint overrides built in:

• 2-col / 3-col — collapse to 1fr at mobile landscape.
• 4-col / 5-col — collapse to 1fr 1fr at mobile landscape, then 1fr at mobile portrait.

You don't need to set these yourself — they paste in with the layout.

Sections

The Sections tab is a library of full-section blocks — ready-made horizontal slabs of content that paste in as complete page sections. Drop a Hero in, edit text, ship. Sections are the fastest way to compose a page using your established design.

Categories

The Sections sidebar:

• Favorites — your starred sections, pinned to the top.
• SECTIONS — Hero, CTA, Team, Pricing, Events, Features, Content, Blog, Gallery, WooCom, Testimonials, FAQ, Map, Special.

Empty categories stay visible at a dimmed brightness so you can see the full taxonomy at a glance — even before you've authored content for every category.

Components

The Components tab is a searchable, categorized library of pre-built blocks fetched from your bricksboost.io account. The first time you open it, the components are downloaded and cached locally for 24 hours. Click the refresh button in the toolbar to bust the cache and pull the latest.

Categories

Components are grouped in the sidebar:

• Favorites — your starred components, pinned to the top.
• CARDS — repeating modular blocks (Image, Icon, Person, Pricing, Event, Stats, Testimonial).
• ESSENTIALS — utility and content blocks (Headings, Grids, Lists, Tables, Accordion, Forms).

Grids

Grids is a special category under ESSENTIALS that drops just a grid wrapper — no section, no container — for when you already have your structure and want to add a quick grid inside it. Pick from 25 variants:

• 2 Columns — 8 ratio variants (1:1, 1:2, 1:3, 2:1, 2:3, 3:1, 3:2, 4:1).
• 3 Columns — 8 ratio variants (1:1:1, 1:1:2, 1:2:1, 1:2:2, 2:1:1, 2:1:2, 2:2:1, 3:1:1).
• 4 or More — 9 equal-column variants from 4 Column up to 12 Column.

Grids paste with the same responsive breakpoints as Layouts and respect the block name input the same way (empty → ID variant, named → classed BEM variant). The wrapper paste contains no inner column blocks — you fill the slots with whatever you want next.

View Modes

• Small — 4 cards per row with compact thumbnails. Hover any card for 600ms to pop a larger preview next to it.
• Large — 2 cards per row with bigger thumbnails. Better for visual browsing.

Toggle between views with the buttons in the toolbar. Set the default view in the admin under Bricks Boost > Boost Builder > Components Default View. Each component card displays its name plus a stable serial number (the post ID), e.g. Bio 6 - 485, so you can reference specific blocks unambiguously.

Search

The search input filters across component name, category, description, and post ID. By default, search respects the active category. Click the All toggle next to the search to broaden across every category — and across both the Sections and Components tabs at once. Useful when you don't know which tab a block lives in.

Favorites

Click the star icon on any card to mark it as a favorite. Favorited items are pinned to the top of every category view and appear together under the Favorites entry. Favorites are stored on your bricksboost.io account, keyed by your license — so they follow you to every site you build on, regardless of browser, computer, or WP install. The Favorites entry appears on both the Sections and Components tabs but each tab filters to its own content type, so a starred Hero only shows up in the Sections Favorites.

Variable Framework

Sections and Components are authored using Bricks Styler CSS variables (e.g. var(--space-m), var(--primary), var(--radius-m)). When you paste, Boost Builder automatically translates those variables to match your selected framework, so they hook into your existing design system.

Set your framework under Bricks Boost > Boost Builder > Variable Framework. Options:

• Bricks Native — uses Bricks' default variables. Radius values that don't exist natively (e.g. --radius-m) translate to literal CSS values like 0.5rem.
• Core Framework
• ACSS
• Advanced Themer
• Bricks Styler — no translation (content is authored in Styler).

Settings

Configure Boost Builder under Bricks > Bricks Boost > Boost Builder:

• Show in Top Bar — adds Layouts, Sections, and Components buttons to the Bricks top toolbar, next to the + button.
• Show in Quick Add Bar — adds the three icons at the bottom of the Quick Add Bar.
• Show in Pop Add — adds Add Layout / Add Section / Add Component buttons at the bottom of the Pop Add popup.
• Variable Framework — see above.
• Components Default View — Small (4-up) or Large (2-up).

Keyboard Shortcuts

Footer Counter

The bottom-right of the modal shows X of Y shown on every tab, where Y is the total number of designs in your library — Layouts + Grids + Sections + Components combined. The denominator is consistent across tabs so you always know the size of the whole library at a glance.

Enabling / Disabling

Go to Bricks > Bricks Boost > Features and toggle Boost Builder on or off.

Quick Add Bar

The Quick Add Bar is a vertical toolbar that appears on the right side of the Bricks Builder. It gives you one-click access to your most-used elements without opening the elements panel. Icons match the ones Bricks uses in its own Elements panel for consistency.

Configuration

Go to Bricks > Bricks Boost > Quick Add Bar to customize:

• Active Elements — Drag to reorder, click the × to remove. These are the elements that appear in the bar.
• Available Elements — Browse or search all Bricks elements and click + Add to include them in the bar. Items already in the Active list are hidden from this column.
• Separators — Click + Separator to insert visual dividers between element groups. Select an item first to insert the separator after it.
• Icon Size — Choose between Small, Medium, or Large icons.

Third-Party Elements (Bricksforge, Frames, etc.)

Bricks Boost auto-discovers every element registered with Bricks, including elements added by third-party plugins like Bricksforge, Frames, and Codex. Bricks core elements (including new built-in elements like the Filter family) appear automatically with no plugin update needed.

Many third-party plugins only register their elements when the Bricks Builder is actively rendering a page — they don't load on plain WordPress admin pages. To make those elements visible in this settings page:

1. Open any page in the Bricks Builder at least once after installing the third-party plugin.
2. Return to Bricks > Bricks Boost > Quick Add Bar.
3. The newly-registered elements now appear in the Available Elements column, ready to drag into your bar.

You only need to do this once per plugin. Bricks Boost remembers what it has seen, so the elements stay visible on subsequent visits — even after WordPress reboots or browser changes.

Usage

Once configured, the bar appears automatically in the Bricks Builder. Click any icon to insert that element into the builder, just like clicking it in the elements panel. The bar automatically hides when you enter Bricks' Preview mode.

Reset

Click Reset to Defaults to restore the original element selection and order.

Structure Scroll

Structure Scroll lets you navigate the Bricks structure tree with the mouse wheel from anywhere in the builder. No more aiming at the tiny structure panel on the right — hold a key and scroll.

Usage

With any element currently selected in the builder, hold Alt (or Option on Mac) and scroll your mouse wheel:

• Scroll down — moves the selection down the structure tree.
• Scroll up — moves the selection up the structure tree.

Your mouse can be over the canvas, the settings panel, or the structure panel itself — it doesn't matter. As long as an element is selected, Alt+Scroll moves through the tree.

Requirements

• An element must be currently selected. If nothing is selected, the feature stays inactive.
• Only visible rows are navigated — collapsed parents keep their children hidden from the sequence.

Why Alt Only

Ctrl and Cmd are intercepted by browsers for page zoom — the wheel event comes through without a usable delta. Shift is used by many other Bricks add-ons (including Advanced Themer) for their own shortcuts. Alt/Option is the one modifier that's safe across browsers, operating systems, and other Bricks plugins.

Enabling / Disabling

Go to Bricks > Bricks Boost > Features and toggle Structure Scroll on or off. When off, no assets load in the builder for this feature.

Pop Add

Pop Add is a floating element picker that opens anywhere in the builder with a single key combo. Hold Alt / Option and right-click anywhere — canvas, panel, structure tree — and the popup appears at your cursor with your configured quick picks plus a search across every Bricks element.

Usage

1. Hold Alt / Option and right-click anywhere, or press Alt / Option + A.
2. The popup appears at your cursor.
3. Click one of the quick-pick icons, or type in the search input to find any Bricks element.
4. If an element is selected, the new element is inserted as a sibling of it. If nothing is selected, the new element is inserted at the bottom of the tree.

Press Escape or click the × button to close. Clicking outside the popup — including inside the canvas — also dismisses it.

Configuration

Pop Add has its own element list — separate from the Quick Add Bar — so you can configure the two independently. Go to Bricks > Bricks Boost > Pop Add:

• Active Elements — Drag to reorder, click the × to remove. Separators define a new row of icons in the popup.
• Available Elements — Browse or search all Bricks elements, click + to add.
• Copy from Quick Add Bar — One-click button that replaces the Pop Add list with your current Quick Add Bar list.
• Reset to Defaults — Restore the default element selection.

Third-Party Elements (Bricksforge, Frames, etc.)

The Pop Add settings page auto-discovers every element registered with Bricks, including elements from third-party plugins. Many plugins only register their elements when the Bricks Builder is actively rendering — not on plain WordPress admin pages.

To make third-party elements visible in this settings page:

1. Open any page in the Bricks Builder at least once after installing the third-party plugin.
2. Return to Bricks > Bricks Boost > Pop Add.
3. The newly-registered elements appear in the Available Elements column.

You only need to do this once per plugin. The elements remain visible across browsers and sessions.

Note: even without performing this step, you can still add third-party elements from inside the Bricks Builder by opening Pop Add and typing the element name into the search box — the in-builder search always sees every registered element.

Search

The search input at the top of the popup is always visible and auto-focused. Type to filter across every Bricks element — the full list, not just your quick picks. Press Enter to insert the first match. Clear the search to go back to your quick picks.

Nestable Elements

When you insert a nestable element (Slider, Tabs, Accordion, Nav, Section), Bricks' default child elements come along — e.g. Slider drops in with three slides, Section auto-includes a container. This matches the behavior of clicking the element in Bricks' own Elements panel.

Boost Builder Buttons

If Show in Pop Add is enabled in the Boost Builder settings, three additional buttons appear at the bottom of the popup: Add Layout, Add Section, and Add Component. Clicking any of them closes Pop Add and opens Boost Builder on the corresponding tab.

Why Alt + Right Click

Bricks already uses right-click for its own context menu. Holding Alt / Option tells Pop Add you want its popup instead — without a modifier, you'll still get Bricks' native menu as usual.

Keyboard Shortcuts

Enabling / Disabling

Go to Bricks > Bricks Boost > Features and toggle Pop Add on or off.

Text Boost

Text Boost turns the content input of Basic Text and Heading elements into a light HTML editor. Right-click to wrap selected text in tags, or get attribute-name autocomplete as you type inside any <tag>.

Wrap Menu

1. Open a Basic Text or Heading element.
2. In the content input, select at least 4 characters of text.
3. Right-click on the selection.
4. Pick a tag from the menu — the selection is wrapped and the cursor is placed in a useful spot (inside an empty attribute value for Link and Abbreviation, or after the closing tag for plain wraps).

Menu Contents

The menu shows different options depending on the element type:

Headings drop nested H tags, Blockquote, and the Code submenu because those don't belong inside an <h1>–<h6>.

Remove Wrapper

When the selected text contains any HTML tags, a Remove Wrapper option appears at the top of the menu. Click it to strip every tag from the selection — outer wrappers, inner tags, everything. The stripped text is left selected so you can immediately wrap it in a different tag.

Attribute Autocomplete

Inside any <tag ...> (after the tag name, outside any "..." value), start typing an attribute name and a dropdown appears with matches:

• class, id, title, href, target, rel, alt, src, lang

Use ↑/↓ to navigate, Enter or Tab to select, Escape to dismiss. The selected attribute is inserted as attr="" with the cursor between the quotes, ready for the value.

Note on Classes

Bricks only loads CSS for classes it sees applied to elements through the builder's class list — classes written into raw HTML content (like <span class="foo">…</span>) are not detected. If you want styled spans, apply the class via Bricks' class list on the element itself.

Enabling / Disabling

Go to Bricks > Bricks Boost > Features and toggle Text Boost on or off.

CSS Boost

CSS Boost supercharges every CSS code editor in the Bricks Builder with smart autocomplete, keyboard shortcuts, Bricks variable suggestions, and a powerful right-click Code Picker.

Settings

Keyboard Shortcuts

Code Picker

Right-click anywhere inside the Custom CSS editor to open a cascading variable menu. Hover any category to open the full variable picker for that category — the same picker you get when right-clicking an input in the Bricks panel. Click a variable to insert it (with a trailing ; and a new line ready for the next property).

The Code Picker is configured under the Code Picker section of the CSS Boost tab. The configuration mirrors the Variable Picker settings — you map each input type to a category, optionally turn on Boost Mode, and pick a List or Grid layout. You can also add any number of Extra Categories below the preset table.

Extra Categories

Use the + Add Variable Category button to add any other Bricks variable category to the right-click menu. Each entry has its own on/off toggle and List/Grid selector. Use the × button on a row to remove it.

How It Works

As you type in any CSS editor in the builder, CSS Boost shows context-aware suggestions. It knows whether you're typing a property, a value, or a variable and adjusts its suggestions accordingly. Suggestions include all standard CSS properties and values, CSS functions, pseudo-classes, pseudo-elements, and any Bricks global variables you've defined.

CSS Snippets

CSS Snippets let you save reusable blocks of CSS that can be expanded with a quick keyboard shortcut in the builder. The snippets list is designed to scale — each snippet is a compact row that expands to a full code editor when you click the edit button.

Creating Snippets

1. Go to Bricks > Bricks Boost > CSS Snippets.
2. Click + Add Snippet. The new snippet expands automatically with focus on the name input.
3. Give your snippet a name (for your reference).
4. Write your CSS code in the editor.
5. Optionally, use CURSOR in your snippet code to define where the cursor should land after expansion.
6. Click Save Changes.

Editing & Deleting

• Edit — Click the pencil button on a row to expand its code editor. Clicking edit on another row collapses the previous one. Click edit again to collapse.
• Delete — Click the trash button. A small "Are you sure?" popup appears next to the button — click Yes to confirm or No (or anywhere outside) to cancel.
• Reorder — Drag any row by its handle on the far left to reorder. Snippet numbers (bb1, bb2, etc.) update automatically.

Using Snippets

In any CSS editor in the Bricks Builder:

• Type bb + Tab to open a dropdown showing all your snippets.
• Type bb1 + Tab to expand the first snippet directly, bb2 for the second, and so on.

Cursor Positioning

Place CURSOR anywhere in your snippet code to control where the cursor lands after the snippet is expanded. For example:

%root% {
  display: flex;
  justify-content: CURSOR;
}

After expanding, the cursor will be placed right after justify-content: , ready for you to type a value.

Lorem Ipsum Generator

Quickly insert placeholder text while building your layouts.

Usage

In any textarea or TinyMCE rich text editor in the Bricks Builder, type lorem. A dropdown will appear with options:

• 1 sentence
• 1 paragraph
• 2 paragraphs
• 3 paragraphs
• 4 paragraphs
• 5 paragraphs

Select an option and the placeholder text will be inserted, replacing the "lorem" trigger text.

Auto Class Select

Auto Class Select saves you a click every time you select an element in the builder. Instead of editing at the ID level by default, the plugin automatically selects the first CSS class on the element so your styles are applied at the class level.

How It Works

When you click on any element in the Bricks Builder that has one or more CSS classes assigned, the first class is automatically selected. This means any style changes you make will apply to the class, not the individual element ID.

Deselecting

If you need to edit at the ID level instead, simply click the active class chip to deselect it — just like you normally would. Auto Class Select only triggers when you switch to a different element, so it won't fight you.

Elements Without Classes

If an element has no CSS classes assigned, nothing happens — the plugin only activates when there is at least one class to select.

Import / Export

Transfer your Bricks Boost configuration between sites or create backups of your settings.

Export

Go to Bricks > Bricks Boost > Import / Export and click Download Settings. This saves a JSON file containing all your settings:

• Feature toggles
• Quick Add Bar layout and icon size
• Pop Add element list
• Boost Builder settings (toggles, framework, default view)
• CSS Boost configuration (including the Code Picker toggle)
• CSS Snippets
• Variable Picker mappings, Boost Mode flags, and per-type layouts
• BB Radius Values (your custom S/M/L/XL/Circle values)
• Code Picker configuration (preset rows + custom categories)

Note: Boost Builder favorites are stored on your bricksboost.io account (keyed by your license) and follow you across sites automatically — they aren't part of the export.

Import

Click Upload Settings and select a previously exported JSON file. You'll be asked to confirm, as this will replace all current settings. After import, the page will reload with the new configuration.

If your import references third-party elements that aren't installed on the destination site, those entries are silently skipped from the Quick Add Bar and Pop Add. They reactivate automatically if you later install the missing plugin and visit the Bricks Builder once.

Requirements

• WordPress 6.0 or higher
• PHP 7.4 or higher
• Bricks Builder theme — must be installed and active

Bricks Boost will display a notice in the WordPress admin if the Bricks theme is not active.