Getting Started with Bricks Builder: An In-Depth Guide.

Facebook Tweet Pin LinkedIn

Bricks Builder has been getting much more attention in recent months, and I think it’s good. I’ve gathered some thoughts on new users coming to Bricks Builder. If that’s you, please read-on!

All of the following is very much “IMO” and not to be taken as the sole truth of the things here.

Who is Bricks Builder for?

Getting started with Bricks can seem overwhelming…and it is, even for experienced WordPress users. Bricks is aimed at users who are familiar with CSS/HTML/JS, who have experience in development. It can be intimidating to learn and it can take a while to understand. Learn by doing. Anyone of any experience can learn Bricks. Be patient and be okay struggle bussin’ for a bit.

Is Bricks Builder Low Code? No Code?

Bricks abstracts away the act of writing code aspect of web development, greatly reducing the need to write code. However, you’ll probably find it sometimes still necessary to generate code for specific use cases. It’s a low-code tool, IMO.

Bricks is opinionated.

What I mean by that is that Bricks aims to surface semantic terminology for most elements used to build websites for users. To that end, it also outputs semantic code. When you place a Section, on the front end you get a…Section and not Div.Section > Div > Div > Div, etc. Default code output is cleaner. Bricks builder by its very nature is a technical tool that respects the building blocks of building for the web. By learning Bricks, you’ll learn more about how to build properly for the web.

Learning Bricks

Learn by doing, messing up, and then understanding (so that you can fix your wayward builds later). You can find website layouts you like and then recreate those in Bricks. Several users of varying levels of experience have done that here. That’s a great approach to learning any page-building tool.

I learned by building layouts from https://library.relume.io and also picked out some showcase sites from Webflow’s website.

Read: Understanding the Layout –

https://academy.bricksbuilder.io/article/layout/ – This article is helpful in understanding the basics around building a layout and helps demystify Sections, Containers, Blocks, and Divs.

Add-ons

There are a lot of great add-ons for Bricks. Hold off until you understand how Bricks works. Learn the most important thing first, and when you’re comfortable and confident, start adding things to your Bricks toolbox. Here is a good list of Bricks resources to peruse.

ACSS, OxyProps, CoreFramework

– Not necessary at all. But they are rocket-fuel to your workflow once you know how Bricks works and have solid fundamental understanding of CSS/HTML. Once you have these tools and are good with them, you’ll miss them when they’re unavailable.

Coming from [Insert Builder Here]

Each builder deserves a lengthy write-up of how to approach Bricks depending on what other platform you’re coming from and I won’t do that here. Bricks is more akin to Oxygen Builder and Webflow IMO and perhaps that transition is a bit “easier?” Other Oxygen users can chime in on that. The workflow is somewhat similar in terms of UI, placement of elements and inputting values into fields, as opposed to ol’ fashion dragging-and-dropping of things. Bricks is sorta drag-n-drop but I wouldn’t recommend using it that way.

Divi and Elementor and Beaver Builder

These builders lend themselves more to creating layouts by dragging and placing elements onto a page. They do a great job of abstracting some of the more tedious aspects of building for the web. Bricks sorta does the opposite and thrives at making you embrace the tedious things. 😉

Kadence Blocks, Gutenberg, Generatepress

IMO, the block editor should be considered a content layout engine, not a tool for building sites (and that’s a whole other can of worms to pore over). The interface and how you build out sites is much different. GP and KB do a fine job of making it easier to work with the Block editor to build websites and page layouts. The experience is often disjointed as some aspects happen in the “Site Editor” or “Customizer” while other parts happen on-page. It got annoying for me. Bricks has a pretty slick UI and all of your site building for footers, layouts, post type layouts, and popups, all happen within the editor.

Beyond the Basics

I HIGHLY recommend that once you familiarize yourself with building simple layouts that you get comfortable with…

Dynamic Data Tags –

One of my favorite features in Bricks and among its more useful features to boot. Just about any data in your WordPress database can be output using Dynamic Data tags. There are several tags provided out-of-the-box by Bricks.

You can even use {do_action:my_custom_hook} to place hooks within your templates and layouts to output content to them. Super powerful. You can also get regular ol post meta like so {echo:get_post_meta(ID), 'meta_key'}

But listen, c’mere, you can also output the value of custom PHP functions with Dynamic Data Tags! It’s true!! {echo:your_custom_function} You can also use custom post meta to output data, too!! Both of these things are super helpful and I’ve leaned on them so much in my recent site builds.

Interactions and Conditions.

Arguably two of the most powerful features in Bricks that add a ton of value. With conditions you can hide/show content based on several points of criteria. If you’re an experienced dev, you can write PHP functions that output a value that you can then call using Bricks Dynamic Data tag and use it as a value to compare against. Powerful stuff. Interactions are just so helpful. You can make Bricks do so many things based on page load, click, cookie storage and more.

I created a simple feature where a user can toggle the layout of a post feed between grid or stream within a few minutes. Granted, not super complex but the fact I can casually just DO that is sweet. https://s3-us-west-1.amazonaws.com/imgcaps/2024-01-14_23.39.35.gif

Query Loop Builder

It is also very powerful and worth your time to learn to use. Try building simple queries first just for post types. Then, try getting more complex by adding sorting and then meta queries.

Templates and Global Elements

I love these features. It can be tricky to understand how Templates and Global Elements differ. Both can be used to create Bricks layout elements that can be easily reused throughout a website. However, they differ quite a bit.

Templates

Bricks offers a robust Template Management and Building Engine. With Bricks Templates you can:

Create a template library that you can share with other websites to import layouts easily
Tag and categorize your templates.
Create and reuse templates through out your website using the Bricks Template Element.

Using Templates

There are a couple of ways to work with templates.

Build your Template by going to Bricks > Templates > Add New. After your template is built, you can import it into another template or onto a specific page, or you can place the Tempalte using the Bricks ‘Template Element.’

Building your template this way also allows you to categorize and tag your Templates. You can also build templates for headers/footers/ single and archive layouts for all types of Custom Post Types.
Edit an existing post/custom post type’s template. This template is constrained to the specific page you’re editing the template for.
You can place a pre-made template using the ‘Template Element.’ This provides the most flexibility IMO. Allow me to explain…

Templates are obviously great for creating layouts or components you plan to re-use on your website. The secret sauce here is to place your Templates using the ‘Template Element’ in Bricks. From the element panel, you can search for the ‘template’ element and then place it and choose the template you wish to load. I recommend this because it allows you to have one place to manage your template across multiple parts of your website. In short, create your template once, in the template builder. Then place that template using the Template Element.

Global Elements

Global Elements are not as robust as a Template. A template can contain several elements like divs, headings, text elements and all of them have different settings applied to them. That’s not the role of a Global Element. Global Elements are intentionally different. Think of a Global Element as a single solitary element with a few settings applied to it that you can use over and over again.

For instance, I will often use a simple Divider Element as a Global Element. The Divider might have a different thickness and color than the default settings. It’s a much simpler element, comprised of a few key changes that can be reused as needed. Commonly used elements like Dividers, Icons, Common Text with specific styling are all good candidates for a Global Element

Get Notified When We Publish New Content!

Join more than 2,500 people who get our marketing automation, business marketing, and WordPress news!

Getting Started with Bricks Builder: An In-Depth Guide.

Who is Bricks Builder for?

Is Bricks Builder Low Code? No Code?

Bricks is opinionated.