The short answer
Every term you will meet in the Bricks Builder world (the builder itself, styling, dynamic content, and the new AI vocabulary) defined in one or two plain sentences each. Bookmark it; we update it as Bricks evolves.
Bricks Builder is powerful, but it talks like a developer. Docs, the community, and every tutorial assume you know what a nestable or a query loop is. This glossary is the missing translation layer. Terms are grouped by topic, not alphabetically, so related ideas sit together.
The builder itself
Bricks Builder
A visual site builder for WordPress that works as a theme rather than a plugin. You design pages visually while it generates comparatively clean, fast code. That combination is why it attracts performance-minded builders.
Canvas
The live preview area in the middle of the Bricks editor where you see and click your page while building it.
Structure panel
The tree view listing every element on the page and how they nest. When a layout misbehaves, this is where you find out what is actually inside what.
Element
The basic building unit in Bricks: heading, image, button, video, form. Pages are trees of elements. Add-ons extend Bricks by adding new element types.
Nestable
An element designed to contain other elements, like a slider whose slides can hold anything rather than a fixed layout. Nestables are a big part of why Bricks feels more flexible than older builders.
Breakpoint
A screen width where your design is allowed to change: desktop, tablet, phone. Bricks lets you adjust almost any setting per breakpoint, and you can define custom ones.
Mobile-first / desktop-first
The direction your styles cascade. Desktop-first (the Bricks default) means you design for large screens and override downward; mobile-first is the reverse. It matters because tools and snippets assume one or the other.
Revision
A saved snapshot of a page you can restore. Bricks keeps revisions as you work, and in Bricks 2.4, AI edits create restorable revisions automatically.
Structure & layout
Section
The full-width horizontal band that pages are stacked from. Hero, features, pricing, footer: each is typically one section.
Container
The box inside a section that holds content at a readable width instead of letting text stretch across a 32-inch monitor.
Block / Div
Generic grouping boxes for arranging elements inside a container. Block comes with a few convenience defaults; div is completely bare.
Flexbox
The CSS layout engine Bricks uses for arranging children in rows or columns: direction, alignment, gap. Most "how do I line these up" questions are flexbox questions.
CSS Grid
The other CSS layout engine, built for two-dimensional grids of rows and columns. Better than flexbox for card grids and magazine-style layouts. Bricks supports both.
Styling & design systems
ID styles
Styles applied directly to one specific element. Quick, but unrepeatable: change your mind and you edit every copy by hand. See our guide on when to use which.
Global class
A named, reusable set of styles (like .card) you attach to any element. Edit the class once and every element using it updates. The single most important habit for maintainable Bricks sites.
Utility class
A tiny class that does one job (.text-center, .mt-m). CSS frameworks ship hundreds of them so you compose styles instead of writing them.
BEM
A naming convention for classes: Block, Element, Modifier, as in .card__title--large. It keeps big projects from descending into .final-header-2-new chaos.
CSS variable (custom property)
A named value like var(--primary) used instead of a hardcoded color or size. Change the variable and the whole site follows. This is the foundation of every design system. Explained gently here.
Design tokens
Your design decisions (colors, spacing scale, font sizes) stored as named values. Bricks has native support for them since the 2.2 Style Manager.
Theme styles
The site-wide defaults in Bricks: what headings, links, buttons, and spacing look like before you touch anything. Set these first and every page starts 80% designed.
CSS framework
A prebuilt system of variables, utilities, and conventions. In the Bricks world that usually means Automatic.css (ACSS), Core Framework, or Advanced Themer's AT framework. Whether you need one: plain answer here.
Content & dynamic data
Query loop
A repeater: design one card, point it at a content source (posts, products), and Bricks renders one card per item automatically. This is the feature that turns static pages into a real CMS-driven site.
Dynamic data tag
A placeholder, like the post title or a custom field, that fills itself from your content instead of being typed in. The bridge between design and data.
Custom fields (ACF, Meta Box, JetEngine…)
Extra structured data attached to your content (price, rating, event date), created with plugins like ACF or Meta Box and pulled into designs via dynamic data.
Custom post type (CPT)
A content type beyond posts and pages: projects, team members, properties. Combined with custom fields and query loops, this is how real sites are modeled.
Conditions
Rules that show or hide elements, or apply templates, based on context: logged-in users, post category, field values.
Templates & reuse
Template
A saved design applied by rule rather than pasted by hand: headers, footers, archive layouts, single-post layouts.
Component
A reusable element group with a live link back to its source. Edit the component once and every instance updates. Different from copy-paste, which creates orphans.
Wireframe
A section skeleton (layout and hierarchy without final branding) that you adapt instead of designing from a blank canvas. Bricksfusion's library ships 390+ of them for Bricks.
Bricks JSON / copy-paste format
Bricks structures can be copied as JSON text and pasted into any other Bricks site. This is the mechanism template libraries and AI generators use to deliver sections.
Motion
Interactions
The native trigger-and-action system in Bricks: on click, hover, or scroll-into-view, do something (show, hide, toggle a class). Covered in our complete animations guide.
GSAP
The industry-standard JavaScript animation library, used under the hood by most advanced WordPress animation tools. Maximum power, real learning curve.
Page transition
An animated change between pages instead of the default hard cut. What they are and how to add them.
prefers-reduced-motion
A device setting some visitors enable because motion makes them ill. Well-built animations detect it and tone themselves down automatically.
Core Web Vitals
Google's speed and stability metrics for loading, interactivity, and layout shift. Animations done wrong hurt them; done right, they don't.
The AI vocabulary (new since 2025–2026)
LLM (large language model)
The AI engine behind tools like Claude and ChatGPT. It predicts good output from patterns, which is why it writes plausible code and occasionally invents plausible nonsense.
MCP (Model Context Protocol)
The open standard that lets AI assistants operate other software, including, since Bricks 2.4, your Bricks site. Plain-English guide here.
Abilities (Bricks 2.4)
The individual operations Bricks exposes to AI clients: create an element, update a template, list breakpoints. Bricks 2.4 ships around 145 of them. What they mean for you.
Prompt
What you write to the AI. In section generation, prompt quality is the difference between a usable draft and generic filler.
BYOK (bring your own key)
A pricing model where you connect your own AI provider API key and pay the provider directly, instead of paying a middleman subscription for bundled AI. How the costs actually work.
API key
A private password-like code from an AI provider (Anthropic, OpenAI, Google) that lets software use their models on your account. Treat it like a password.
Application password (WordPress)
A special-purpose password WordPress can issue so external software, like an AI client, can act on your site without your real login. Required by the native Bricks MCP setup.
Ecosystem & buying terms
Add-on
A plugin that extends Bricks with new elements or capabilities. The ecosystem is large; quality and maintenance vary, so check changelogs before buying.
Child theme
A thin theme layered on top of Bricks so customizations survive theme updates. Bricks provides an official one.
LTD (lifetime deal)
Pay once, use forever, including updates. Common in the Bricks ecosystem. The catch to evaluate: the vendor must stay healthy for "lifetime" to mean something. Look at shipping cadence, not promises.
Staging site
A private copy of your site for testing updates, betas (like Bricks 2.4), and experiments before they touch the version visitors see.
Missing a term that confused you? Tell us via the contact page and we will add it. This glossary is maintained, not published and forgotten.
FAQ
Questions about this topic
What is the difference between a section, a container, and a block in Bricks?
A section is the full-width horizontal band of a page. Inside it, a container holds the content at a readable width. Blocks and divs are generic boxes used to group and arrange things inside the container. Section > container > blocks is the standard nesting.
What is a query loop in simple terms?
A query loop is a repeater: you design one card, tell Bricks which content to pull (posts, products, team members), and it repeats your design once per item, automatically staying up to date.
What does BYOK mean in AI tools?
Bring Your Own Key. Instead of paying the tool vendor a subscription for bundled AI, you plug in your own API key from a provider like Anthropic or OpenAI and pay them directly for exactly what you use. It is usually cheaper and more transparent.