What would you like to know?
Collection: Builder
Installation & Activation
How To Install The Bricks Theme Installing Bricks is the same as any other WordPress theme. First, download the latest… ...
An Intro To The Builder
Bricks is a drag & drop website builder for WordPress. It enables you to create your entire site visually, and… ...
Best Practices
Please keep the points below in mind when working with Bricks: Permalink SettingsGo to Settings > Permalinks, select Post name,… ...
Save & Publish
Bricks, by default, automatically saves your builder changes every 60 seconds. To adjust or disable the autosave interval go to… ...
Responsive Editing
What looks great on a large desktop screen usually needs some refinement for smaller devices. This typically involves applying smaller… ...
Custom Code
Bricks allows you to add your own custom code (CSS, JavaScript, HTML, PHP) to various parts of your website. Global… ...
Requirements
To provide you with a cutting-edge site builder for WordPress Bricks uses the most modern technology stack (VueJS 3, etc.)… ...
Template Library
Open the Template Library by clicking the Templates (folder) icon in the builder toolbar or using the CMD / CTRL… ...
Adding & Editing Elements
To add an element to the canvas simply drag it from the panel and drop it anywhere onto the canvas.… ...
Revisions
Every time you perform a save in the builder, Bricks creates a revision/snapshot of your Bricks elements data (template, page,… ...
Unsplash Integration
Finding affordable, high-quality, commercially useable photography for your website (that doesn't scream stock photography) is really hard. Bricks is putting… ...
Global Elements
To reuse an existing element somewhere else on your site we can convert this element into a Global Element. How… ...
Template Settings
When editing a template click the Settings (gear) icon in the builder toolbar to access the Template Settings: You should… ...
Create Your Own Sidebars
Bricks provides you with its own, built-in sidebar generator. Located in your WordPress dashboard under Bricks > Sidebars it lets… ...
Gradients & Overlays
Spice up your site's design by adding background, overlay, and text gradients to any element. When editing an element, the… ...
Shape Dividers
Give your design an edge by adding an unlimited number of shape dividers such as tilts, drops, grids, clouds, strokes,… ...
Context Menu
Bricks' context menu gives you quick access to various block actions such as edit, clone, delete, copy & paste styles… ...
Remote Templates
Remote templates allow you to view & insert templates of another Bricks installation. Avoiding the constant template export from one… ...
Start Editing With Bricks
Once you have activated your license head over to Bricks → Settings and select the post types you want to… ...
Theme Styles
Adjust the default styling of your site layout, elements, colors, links, typography, etc. throughout your site via Theme Styles for… ...
Page Settings
Page Settings allow you to customize the markup and styling of the page you are currently editing. They are located… ...
An Intro To Templates
Templates are a central feature of Bricks. There are different template types. At the very least, you usually create a… ...
Hover Styles
The "Hover Styles" button as outlined below is now outdated. It has been replaced by a fully customizable pseudo-class &… ...
Creating Your First Template
Now that you are familiar with all template concepts and the template library let's create the most commonly used templates:… ...
Custom Fonts
Your website typography has a huge impact on how your site is perceived, and it'll pay off to spend some… ...
Keyboard Shortcuts
Quickly perform the most common in-builder actions through short & simple keyboard shortcuts: Key CombinationDescriptionCMD / CTRLInsert element outside active… ...
Builder Access & Capabilities
Starting at version 2.0, Bricks gives you full control over who can access the builder, and what actions they’re allowed… ...
SVG Uploads
WordPress, by default, does not allow SVG file uploads as this XML-based file format can contain malicious code. It can… ...
Dynamic Data
Use dynamic data to render all sorts of data from your WordPress database with Bricks. For example: Featured image, post… ...
Gutenberg
If you've created your pages with Gutenberg you can continue editing them with Bricks without having to start all over… ...
Settings
Before diving into the builder lets have a look at the global settings, which you can define under Bricks >… ...
Container Element
The Container element used to be the only layout element in Bricks until version 1.5. It has now been extended… ...
Custom Attributes
Bricks 1.3 introduces the possibility to add your own custom HTML attributes to any element. You can add custom attributes… ...
Accessibility
Accessibility (short: a11y), is the fine art of making your website as usable as possible by as many people as… ...
Form Element
The Form element lets you build custom forms with the following form field types: You can define actions triggered by… ...
Asset Loading Optimization
"Performance" being one of Bricks' three pillars, we have introduced a new asset loading solution in version 1.3.4 that offers… ...
Global CSS Classes
A CSS class is a collection of styles (CSS rules) that you can apply to any element anywhere on your… ...
Styling Element States & Parts
Bricks lets you apply different styles to an element depending on its state (such as on mouse :hover or a… ...
Element: Post Content
The Post Content element is a placeholder in the builder that tells Bricks to fetch the post content into the… ...
Builder Mode (Custom)
Starting with Bricks 1.3.7 you can customize the builder mode (color scheme) to your liking by tweaking a few CSS… ...
Query Loop
The Query Loop builder is available for all layout elements, Accordion, and Slider elements. It can also be enabled for… ...
WooCommerce Builder
WooCommerce is a free plugin to manage the e-commerce functionality of your WordPress site. It is the world's most popular… ...
Checkout (WooCommerce)
The checkout page is a special WooCommerce page, created by default during WooCommerce installation. It contains WooCommerce Checkout gutenberg blocks.… ...
Single Product (WooCommerce)
The template type "WooCommerce - Single Product" is only visible if WooCommerce is installed & active. Create a template of… ...
Product Archive (WooCommerce)
The template type "WooCommerce – Product Archive" is only visible if WooCommerce is installed & active. Create a template of… ...
Cart (WooCommerce)
The cart page is a special WooCommerce page, created by default during WooCommerce installation. It contains WooCommerce Cart gutenberg blocks.… ...
Converter
Bricks offers multiple so-called "Converter" options. The Converter is a built-in tool that scans your database for outdated Bricks data… ...
Section Element
The Section element (available since 1.5) allows you to structure/divide your page into self-containing areas (think: one topic per section).… ...
Div Element
The Div element is one of the four layout elements in Bricks (1.5+). Introduced together with the Section & Block element it allows you to create… ...
Block Element
The Block element is one of the four layout elements in Bricks (1.5+). Introduced together with the Section & Div… ...
Understanding The Layout
Bricks has four layout elements (since 1.5) to group & lay out your content in a fast, predictable, and streamlined… ...
Known issues
When I open the builder I don't see the elements on the canvas If you open the builder and you… ...
Element Conditions
Element Conditions let you define one or multiple conditions for any element. Only if those conditions are met is the… ...
Popup Builder
The Popup Builder is a very flexible, fully customizable solution to show popups anywhere on your website based on Interactions.… ...
Interactions
Interactions, available since Bricks 1.6, let you bind certain user or browser events (e.g. click, mouse hover, content loaded, etc.)… ...
CSS Grid Layout
Available since Bricks 1.6.1 CSS grid allows you to create two-dimensional layouts (columns & rows). Whereas CSS flexbox, which Bricks… ...
WooCommerce Template Hooks
Bricks 1.7 introduces a new do_action dynamic tag, which is designed to address the majority of compatibility issues between Bricks… ...
Integration: Adobe Fonts
How to use Adobe Fonts with Bricks All you need to do is provide Bricks with your Adobe Fonts "Project… ...
Filter: bricks/query/loop_object_id
Bricks will use \Bricks\Query::get_loop_object_id() to retrieve the looping iteration's object ID. This static function is used in many places. Especially… ...
Filter: bricks/query/loop_object_type
Bricks will use \Bricks\Query::get_loop_object_type() to retrieve the looping iteration's object type. This static function is used in many places. It… ...
Filter: bricks/query/no_results_content
You can programmatically change the query loop "no results content" using this filter. ...
Menu Builder
Bricks 1.8 introduced a completely new, fully responsive, accessible, and highly customizable suite of elements to create nav menus/site navigations… ...
WooCommerce Notices
New theme style settings under "WooCommerce - Notice" and a new "WooCommerce Notice" element were introduced in Bricks 1.8.1. Allowing… ...
WooCommerce Account Builder
Bricks 1.9 introduces the My Account builder, which lets you customize the account area of your WooCommerce site. This includes… ...
Custom Authentication Pages
Since Bricks 1.9.2, you can create custom pages for the various authentication processes, effectively substituting the standard WordPress authentication pages.… ...
Save Form Submissions
Bricks 1.9.2 introduces an exciting new feature that allows you to capture form submissions. With the new Save form submissions… ...
Scroll Snap
With the introduction of scroll snapping in Bricks 1.9.3, enhancing your web pages with sophisticated scrolling effects has never been… ...
How to set up your Google Maps API key
Thanks to the Map element, adding a Google Map to Bricks is easy. The biggest hurdle is creating the Google… ...
Maintenance Mode
Bricks 1.9.4 introduces the Maintenance Mode feature. A straightforward way to manage your site's availability during updates or construction. How… ...
Query Sort, Filter & Live Search
This new feature set, introduced in Bricks 1.9.6, enhances content interaction through AJAX-powered filter elements such as search, checkboxes, select… ...
Code review
With the implementation of code signatures in Bricks 1.9.7 providing a robust mechanism to safeguard code authenticity, another new key… ...
Code signatures
With the release of version 1.9.7, Bricks takes another significant step to enhance the built-in code security by introducing code… ...
Global Class Manager
Bricks 1.9.5 introduced the Global Class Manager, a powerful new feature for creating, editing, deleting, and categorizing CSS classes directly… ...
Global Variables Manager
Bricks 1.9.8 introduces the Global Variables Manager, a powerful new feature that allows you to create, manage, and categorize all… ...
Restrict License Key Usage
By default, you can activate your Bricks license key on any website that runs the Bricks theme. That is, if… ...
Breadcrumbs Element
Breadcrumbs are an essential part of website navigation, providing users with a clear path to navigate through the site hierarchy.… ...
Element: Checkout Coupon
This Checkout coupon element, available @since 1.11.1, allows you to display the coupon field in various locations on the checkout… ...
Element: Checkout Login
The Checkout Login element allows for a convenient login option directly on the checkout page, enabling returning customers to sign… ...
Password Protection
Bricks 1.11.1 introduces a Bricks-native Password Protection feature, giving you a simple yet powerful way to secure content across your… ...
Masonry Layout
Starting with version 1.11.1, you can easily apply a masonry layout to any layout element in Bricks. The new Masonry… ...
Cascade layer
The specificity of default Bricks styles has always been a balancing act. While we aim to keep these styles as… ...
Components
Components, available as an experimental feature since Bricks 1.12, let you create reusable elements. Each component instance can is be… ...
Global class import manager
Since Bricks 1.12, the global class import manager addresses a key challenge in managing imported classes. Previously, conflicting classes were… ...
Query Results Summary Element
The Query Results Summary element, introduced in version 1.12.2, allows you to display a dynamic count of results within a… ...
Bricks CSS: Compatibility guidelines
Bricks follows the Baseline compatibility standard to determine which CSS features we natively support in the styles Bricks outputs. What… ...
Map Element
The Map element in Bricks allows you to display Google Maps with a range of capabilities, from showing a single… ...
Visual Grid Builder
The new Visual Grid Builder allows you to visually design and manage your grid layouts. The feature becomes is available… ...
Product Variation Swatches (WooCommerce)
Bricks 2.0 introduces Product variation swatches, giving you more control over how product attribute options (i.e. color, size, pattern) appear… ...
Contextual Spacing
Bricks 2.0 introduces Contextual spacing to give you full control over vertical spacing (margin) between elements like headings, paragraphs, and… ...
Icon Manager
Bricks 2.0 introduces the Icon Manager, a new feature for uploading and managing your own custom SVG icon sets directly… ...
Font Manager
Bricks 2.0 introduces the new Font Manager, a centralized interface for adding, organizing, and managing all your site's fonts directly… ...
Command Palette
Bricks 2.0 introduces the Command Palette, a powerful new feature that gives you instant keyboard-driven access to core functionality inside… ...