Opens in a new tab
Log inStart free

On this page

Bricks Builder is easy to start with and deep enough to keep surprising you years later. The official Academy and the community forum answer almost any single question, but when you’re learning, it helps to see the handful of features that matter most in one place, in the order you’ll need them.

This guide is that list. Each part is short, practical and points to a ready template that uses the feature, so you can take one apart and see how it’s built.

Getting started with Bricks Builder

Bricks is a WordPress theme with a visual builder built in, so you install it like any other theme. Download the ZIP from your Bricks account, then in WordPress go to Appearance › Themes › Add New › Upload Theme, upload it and activate it.

Two setup steps save trouble later:

  • Install the Bricks child theme if you plan to add any code. Bricks asks you not to edit the theme’s core files, because updates overwrite them. The child theme is also where custom elements live.
  • Enable your post types under Bricks › Settings. Then open a page in WordPress and click Edit with Bricks.

Inside the builder, the workflow is always the same. Open the Elements panel, add a layout element such as a Section or Container, and place content elements inside it. Each element has Content controls for markup and data and Style controls for design. Switch breakpoints in the toolbar to adjust the layout for tablets and phones.

Headers, footers and popups aren’t built on pages. They’re templates, with a template type and conditions that decide where they appear. Get used to that early: most of the features below live in a template.

One more tip before you build anything real: pick your design tokens first. A framework gives you a consistent set of colors, spacing and type sizes as variables. Fancy Framework, the free Bricks framework, is a quick way to start if you don’t have one; Automatic.css and Core Framework are the common alternatives.

Bricks Builder accessibility basics

Bricks gives you a solid accessible base, and most of the work left is in the choices you make while building. What Bricks handles, according to its own accessibility guide:

  • Landmarks. It outputs header, main and footer regions automatically, and wraps navigation in a nav element.
  • Skip links. Two skip links, to the content and to the footer, appear when someone presses Tab.
  • Focus styles. There’s a default :focus style, which you can change under Settings › Theme Styles › Typography › Focus Outline. You can set it to none, but please don’t: keyboard users need to see where they are.
  • Menu keyboard support. Tab and Shift+Tab move through items, Enter follows a link and Space toggles a submenu.
  • Alt text. Images use the alt text from the media library, and you can override it per image.

What’s on you:

  • Use the right tags. Containers let you pick their HTML tag. Use section, article, ul and headings where they belong, not a div for everything.
  • Keep headings in order. One H1 per page, then H2, H3 and so on, without skipping levels for the sake of size. Size is a style choice; level is structure.
  • Label links and icon buttons. Bricks lets you add aria-label to links, and custom attributes to any element. A link that says “Read more” needs context.
  • Give anything that moves a pause. WCAG 2.2 success criterion 2.2.2 (Level A) asks for a way to pause, stop or hide content that moves automatically, lasts more than five seconds and sits alongside other content. That includes autoplay sliders.
  • Check contrast on every background you use, including hover states.

Every Fancy Bricks template is checked with axe against WCAG 2.2 AA, so pasting one is also a quick way to see these rules applied.

Adding popups in Bricks Builder

Bricks has a popup builder built in, no plugin needed. A popup is simply a template with the type Popup. Bricks renders it on the page, hidden, and opens or closes it through Interactions.

Here’s the whole flow:

  1. Create the template. Add a new template, choose Popup as its type, and edit it with Bricks like any page.
  2. Set where it’s available. In Settings › Template Settings › Conditions, choose the pages it can appear on. A newsletter popup might be “Entire website”; a product quick view only the shop pages.
  3. Tune its behavior. In Settings › Template Settings › Popup, set the backdrop, size and position, Close on (backdrop click, Esc key or both), whether the page can scroll behind it, and whether to fetch the content with AJAX.
  4. Open it. Select the button that should open it, add an interaction with the trigger Click, set the target to Popup, pick your popup template and choose the action Show element.
  5. Close it. Add a close button inside the popup with a Click interaction, target Popup and the action Hide element.

Two settings are worth knowing. Popup limit controls how often a popup can show: per page load, per session, across sessions, or again after a number of hours. And the focus handling: Bricks traps keyboard focus inside an open popup and returns it when the popup closes, which is exactly what you want for accessibility. Leave that alone unless you have a reason.

For a popup that opens on its own, use the Content loaded trigger on the popup template. Use it sparingly; a popup that greets every visitor is rarely welcome.

Building a nestable slider in Bricks with Splide

The Slider (Nestable) element is powered by Splide, an open-source slider library. “Nestable” means each slide is a container you fill with any elements by dragging them in, rather than a fixed image and caption.

The settings cover most needs without code:

  • Type: loop, slide or fade.
  • Direction: left to right, right to left or vertical.
  • Items to show and the Gap between slides.
  • Autoplay, with pause on hover or focus and an interval.
  • Arrows and Pagination, each with its own styling.

When you need a Splide option the panel doesn’t show, switch the options type to custom and paste your own options as JSON. They’re Splide’s own option names. For example, three slides per view that drop to one on small screens, autoplaying every five seconds:

{
  "type": "loop",
  "perPage": 3,
  "gap": "1.5rem",
  "autoplay": true,
  "interval": 5000,
  "pauseOnHover": true,
  "pauseOnFocus": true,
  "breakpoints": {
    "767": { "perPage": 1 }
  }
}

Splide’s breakpoints use max-width by default, so 767 means “767px and below.”

For deeper control, Bricks stores every slider it starts in window.bricksData.splideInstances, keyed by the element ID (the Bricks ID, not a custom CSS ID). The Academy’s own example connects two outside buttons to a slider; a shortened version:

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    const slider = window.bricksData?.splideInstances['rrbqsp'];
    const prev = document.querySelector('.my-prev');
    const next = document.querySelector('.my-next');
    if (!slider || !prev || !next) return;
    prev.addEventListener('click', () => slider.go('-1'));
    next.addEventListener('click', () => slider.go('+1'));
  }, 250);
});

Replace rrbqsp with your slider’s element ID. The short delay gives Bricks time to start the sliders first.

If you turn on autoplay, add a visible pause button, for the WCAG reason above. The slider and carousel templates for Bricks Builder are built on Slider (Nestable), and the ones that play on their own include a pause button, so they’re a good place to see the full setup.

Bricks Builder variables and global classes

These two features are what turn a pile of pages into a site you can maintain.

Global variables are CSS custom properties managed inside Bricks. Open the Style Manager from the toolbar and go to the Variables tab. Each variable has a name, written without the leading --, and a value that can be any valid CSS, like clamp(1rem, 2vw, 2rem). You can group them into categories, export and import them as JSON, and rename them; Bricks updates its own references when you do.

Bricks outputs them as root-level custom properties, and many controls have a variable picker. In any field that accepts CSS you can also type var(--name) yourself:

.card {
  padding: var(--space-m);
  border-radius: var(--radius);
  background: var(--primary);
}

Change --space-m once, and every card, section and button that uses it follows.

Global classes are reusable styles. Select an element, click the selector field that shows its ID, type a class name and press Enter. Style the class with the same controls you’d use on the element, then apply it anywhere. The Global Class Manager handles the rest: categories, renaming, locking, import and export.

The one rule that saves the most confusion: element ID styles win over class styles. Bricks’ own advice is to “put shared defaults on the class. Put one-off overrides on the element ID.” If a class change doesn’t seem to work, check whether the element’s ID already sets that property.

Frameworks plug straight into this system. Fancy Framework, Automatic.css and Core Framework all give you variables for colors, spacing and type. Fancy Bricks templates are built the same way: their styles live on global classes with readable names, and every value comes from your site’s variables, so a pasted section already matches your colors and spacing.

A sticky header is a native Bricks setting on the header template, with no code needed. Open your header template, go to its template settings and find the header options:

  • Sticky header keeps the header fixed at the top while the page scrolls.
  • Sticky on scroll leaves it in the normal flow when the page loads and makes it sticky once the visitor scrolls.
  • Slide up after hides the sticky header after a set scroll distance.
  • Scrolling background, Scrolling text color and Scrolling box shadow change its look while scrolling.
  • Transition sets how those changes animate.

Those settings cover most designs. When you want something they don’t, such as a header that gets shorter on scroll, a little CSS on the classes Bricks adds does the job. In the Bricks version I checked (2.4.3), a sticky header gets the class brx-sticky, and Bricks adds scrolling as soon as the page scrolls:

/* "html" makes these win over Bricks' own transition rule */
html #brx-header.brx-sticky > .brxe-section {
  transition: padding-block 0.3s ease;
}

html #brx-header.brx-sticky.scrolling > .brxe-section {
  padding-block: var(--space-xs);
}

@media (prefers-reduced-motion: reduce) {
  html #brx-header.brx-sticky > .brxe-section {
    transition: none;
  }
}

The first rule makes the change smooth instead of a jump, and the last one matters too: people who ask their system for reduced motion get the change without the animation. Class names can change between Bricks versions, so check them in your browser’s inspector after updates.

Keep a sticky header slim. On phones it takes space from the content on every screen, so a tall sticky header costs more than it gives. The header and menu templates for Bricks Builder are Bricks header templates, so you can turn these sticky settings on for any of them.

Creating custom elements in Bricks Builder

There are two ways to make your own reusable element in Bricks, and you should try the first before the second.

Components, no code. Build an element tree once, right-click its root element and choose Save as component. Every instance follows the main component: change it once and every copy on the site updates. Properties let each instance change what should change, such as a text, an image, a link, an icon or a class for a style variant. Slots let an instance add its own child elements inside the shared structure.

Components cover most cases where people used to reach for code. The native Bricks components in Fancy Bricks are built this way: buttons, cards, social links and more, each edited through properties in the panel.

PHP elements, for developers. When you need new controls or server-side logic, Bricks lets you register your own element. You extend the \Bricks\Element class in your child theme. A minimal element, based on the Academy example:

<?php
class Prefix_Element_Test extends \Bricks\Element {
  public $category = 'general';
  public $name     = 'prefix-test';
  public $icon     = 'ti-bolt-alt';

  public function get_label() {
    return esc_html__( 'Test element', 'bricks' );
  }

  public function set_controls() {
    $this->controls['content'] = [
      'tab'   => 'content',
      'label' => esc_html__( 'Content', 'bricks' ),
      'type'  => 'text',
    ];
  }

  public function render() {
    $this->set_attribute( '_root', 'class', 'prefix-test-wrapper' );
    echo "<div {$this->render_attributes( '_root' )}>";
    echo wp_kses_post( $this->settings['content'] ?? '' );
    echo '</div>';
  }
}

Then register it from the child theme’s functions.php, on init with priority 11:

add_action( 'init', function() {
  \Bricks\Elements::register_element( __DIR__ . '/element-test.php' );
}, 11 );

The element then shows up in the Elements panel next to the built-in ones, in the category you gave it.

If you’re not sure which route you need, start with a component. Move to PHP only when a component can’t do it.

Where to go next

The fastest way to learn Bricks is to take apart something that already works. Paste a template, open the structure panel and look at how it’s built: which classes it uses, where the variables come from, how its slider or header is set up. The Fancy Bricks documentation covers the first paste, and the Bricks Builder template library has a ready example for every part of this guide.

Frequently asked questions

Is there a free version of Bricks Builder?

That depends on Bricks Builder’s own licensing, so check bricksbuilder.io. Fancy Bricks doesn’t sell Bricks Builder itself, only templates and components that run inside it.

Is it worth learning Bricks Builder for client sites?

Many freelancers and agencies use it for exactly that, and a template library like Fancy Bricks cuts down the build time once you know the basics.

Can I add popups in Bricks Builder?

Yes. Bricks Builder has a native popup template you can open from a click or another interaction, with no plugin required.

Does Bricks Builder support global CSS variables?

Yes. Bricks Builder has global variables and global classes, and Fancy Framework and Fancy Bricks templates are built around your site’s variables.

Can I build a sticky header natively in Bricks?

Yes. A sticky header is a native setting of Bricks header templates, and you can use it with any of the header templates in this library.

Start with free Bricks Builder templates

Create a free account, install Fancy Framework (also free) and paste your first section in a minute.

Create free account