Collection: Builder
Best Practices
Please keep the points below in mind when working with Bricks: Permalink SettingsGo to Settings > Permalinks, select Post name,…Understanding The Layout
Starting at version 1.5, Bricks offers four layout elements to group & lay out your content in a fast, predictable,…Block Element
The Block element is one of the four layout elements in Bricks (1.5+). Introduced together with the Section & Div…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…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).…Converter
Bricks 1.4 introduces the new "Converter". The Converter is a built-in tool that scans your database for outdated Bricks data…WooCommerce Builder
WooCommerce is a free plugin to manage the ecommerce functionality of your WordPress site. It is the world's most popular…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 a WooCommerce shortcode [woocommerce_cart]…Checkout (WooCommerce)
The checkout page is a special WooCommerce page, created by default during WooCommerce installation. It contains a WooCommerce shortcode [woocommerce_checkout] which renders…Query Loop
The Query Loop builder is available since version 1.3.7 for the Container, Accordion, and Slider element. Update: It can also…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…Element: Post Content
The Post Content element is a placeholder in the builder that tells Bricks to fetch the post content into the…Styling Element States & Parts
Bricks lets you apply different styles to an element depending on its state (such as on mouse :hover or a…Global CSS Classes
A CSS class is a collection of styles (CSS rules) that you can apply to any element anywhere on your…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…Form Element
The Bricks' "Form" element is an out-of-the-box element to build and place forms on any page built with Bricks. The…Custom Attributes
Bricks 1.3 introduces the possibility to add your own custom HTML attributes to any element. You can add custom attributes…Accessibility
Bricks 1.3 introduces a deep focus on helping site creators to address the accessibility requirements easily. Accessibility (or a11y), is…Container Element
The Container element used to be the only layout element in Bricks until version 1.5. It has now been extended…Requirements
To provide you with a cutting-edge site builder for WordPress Bricks uses the most modern technology stack (VueJS 3, etc.)…Installation & Activation
How To Install The Bricks Theme You install Bricks the same as any other WordPress theme. First, you have to…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…Builder Access
By default only site admins have Full Access to Bricks. To allow builder access for a certain user simply edit…Keyboard Shortcuts
Quickly perform the most common in-builder actions through short & simple keyboard shortcuts: Key CombinationDescriptionCMD / CTRLInsert element after active…Remote Templates
Remote templates is another unique Bricks feature that lets you browse and insert templates of another Bricks installation. No more…Template Settings
When editing a template click the Settings (gear) icon in the builder toolbar to access the Template Settings: You should…An Intro To The Builder
Bricks is a drag & drop website builder for WordPress. It enables you to create your entire site visually, and…Start Editing With Bricks
Once you have activated your license head over to Bricks → Settings and select the post types you want to…Custom Code
Bricks allows you to add your own custom code (CSS, JavaScript, HTML, PHP) to various parts of your website. Global…Custom Fonts
Your website typography has a huge impact on how your site is perceived, and it'll pay off to spend some…Adding & Editing Elements
To add an element to the canvas simply drag it from the panel and drop it anywhere onto the canvas.…Page Settings
Page Settings allow you to customize the markup and styling of the page you are currently editing. They are located…Theme Styles
Adjust the default styling of your site layout, elements, colors, links, typography, etc. throughout your site via Theme Styles for…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:…Save & Publish
Bricks, by default, automatically saves your builder changes every 60 seconds. To adjust or disable the autosave interval go to…Gutenberg
If you've created your pages with Gutenberg you can continue editing them with Bricks without having to start all over…Create Your Own Sidebars
Bricks provides you with its own, built-in sidebar generator. Located in your WordPress dashboard under Bricks > Sidebars it lets…Settings
Before diving into the builder lets have a look at the global settings, which you can define under Bricks >…Revisions
Bricks automatically creates a snapshot/revision of your data on every save using the WordPress Revisions API. To view a list…Shape Dividers
Give your design an edge by adding an unlimited number of shape dividers such as tilts, drops, grids, clouds, strokes,…Global Elements
To reuse an existing element somewhere else on your site we can convert this element into a Global Element. How…Context Menu
Bricks' context menu gives you quick access to various block actions such as edit, clone, delete, copy & paste styles…Gradients & Overlays
Spice up the design of your site by adding background, overlay, and text gradients to any block. The Gradients &…Unsplash Integration
Finding affordable, high-quality, commercially useable photography for your website (that doesn't scream stock photography) is really hard. Bricks is putting…Template Library
Open the Template Library by clicking the Templates (folder) icon in the builder toolbar or using the CMD / CTRL…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 &…Responsive Editing
What looks great on a large desktop screen usually needs some refinement for smaller devices. This typically involves applying smaller…