Get Bricks

Collection: Builder

  • WooCommerce Builder

    WooCommerce is a free plugin to manage the e-commerce functionality of your WordPress site. It is the world's most popular…
  • 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…
  • Interactions

    Interactions, available since Bricks 1.6, let you bind certain user or browser events (e.g. click, mouse hover, content loaded, etc.)…
  • Popup Builder

    The Popup Builder, introduced in Bricks 1.6, is a very flexible, fully customizable solution to show popups anywhere on your…
  • Element Conditions

    Element Conditions, introduced in Bricks 1.5.4, let you skip rendering an element on the front end if its conditions aren't…
  • Best Practices

    Please keep the points below in mind when working with Bricks: Permalink SettingsGo to Settings > Permalinks, select Post name,…
  • Known issues

    When I open the builder I don't see the elements on the canvas If you open the builder and you…
  • 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…
  • 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…
  • 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…
  • 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

    Every time you perform a save in the builder, Bricks creates a revision/snapshot of your Bricks elements data (template, page,…
  • 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…