If you're on this page then I don't need to explain to you what Bricks Builder is. But like any new piece of software, there are a few foundational pillars you need to have under your belt to get a grasp of what you're doing. So here's my personal list of things to know about starting with Bricks Builder. Remember, this list is not comprehensive and there are people out there who can explain the how and the why better than I. So here goes.
For those of us coming from Oxgen Builder where O2 effectively takes over theming, Bricks is a plugin. You upload the Bricks parent theme and the Bricks child theme, and activate the child theme. Then you get to work.
I'm from the old days where I built everything with HTML/CSS. When Wordpress came around we built custom themes based upon the codex, and then we moved to Genesis so we could have a little abstraction. But everything was in the code and everything lived in derivatives of functions.php and stylesheets.
With Bricks you have sections (which are our top level building unit), and we have containers that live in these sections. Within these sections you have Blocks (which are pre-built Bricks elements). And if you want to write your own code, you can use a DIV elemement. So in the past where I'd have a <div> and an <h1> to pull in the title of the blog post, in Bricks you can use the Post Title element.
It took me a minute (ok a lot longer than that) to wrap my mind around how Bricks does CSS and here's the way I understand it. Remember, I'd MUCH prefer a WordPress where we have our standard php templates and our queries and loops, our HTML and our CSS, and our dedicated stylesheets that we can play with in VS code (or VIM for those who live on the server). So there is no direct "style.css" file for you to play around in -- so lets take a look at what you do have.
You can use the GUI on the left side of the builder to add/edit and modify your CSS to your heart's content. Of course doing it that way will likely results in a ton of inconsistent styles ("did we say a 4rem bottom-margin on sections or was it a 4rem top-margin on the sections below?" So while this approach works, there are better ways.
It can be done! But it's probably not the most efficient way to do CSS in Bricks. It's what I'd like to do and what I'd like to see, but that's just not the philiosphy of using a builder in WordPress. If I really want full control I'd move to Astro or similar framework where I can really LIVE in a code editor -- but alas, that's not how WP works.
What you can do is use a plugin such as WP code, and while you create your classes in the Bricks Builder, you can edit the classes the the WP code interface so you do get the code editor-feel wtihout having to spin one up. I do like this solution because if nothing else, it forces you to be consistent.
At this point in my playing around with Bricks I came to the conclusion that it's time to look at a framework. And since we use CoreFramework for our Oxygen builds, I decided to give it a whirl with our Bricks builds, and the answer is....it works.
So while nothing will replace my old-school custom theme or genesis-type aproach to building WordPress websites, WP has evolved to where builders are an key part of the modern build process, and with that comes the flexibilty (or lack thereof) for those of us who long for the days of just the code editor. And of course we can still build sites with vanilla HTML/CSS/JS and get all of the control in the world...but maybe I'll save those for my personal projects, and keep delivering our clients what they want -- Wordpress websites that they can edit themselves.
Bricks is different from other builers in the way it handles templates. To keep it short, you create a header teamplate and assign it as a "header" (you'll see what I mean when you go to create a template). Then you do the same thing for the footer, and the other templates you need (single, archive, etc).
From there, you save the tempalte and edit it in the builder. And while you're at it, you use the settings on the left side (top) of the builder to assign where the template applies. To me it's closing the barn door after the horse left, as I'd like to create my template and assign where it lives before I edit it, but once you get used to it, that's how it works.
As I dive deeper into Bricks I'll keep this post updated as best as possible, but hopfully I've given you a bit of a global map with some directions as you do your own dive into Bricks.
