Bricks Builder is another WordPress page builder, initially released on March 16, 2021, although it was planned to be released a year sooner. But as they themselves say in the release post; excellence takes time. Let’s see if Bricks Builder is excellent enough to compete with established page builder giants like Divi and Elementor.

Talking about Elementor…

Does the user interface in the screenshot on the left look a bit familiar to you too?
If I wouldn’t know any better, I’d say Bricks Builder is just an Elementor add-on with a different skin, like 10Web builder. 

It’s not though – in fact, it isn’t even a plugin, it’s a theme. A very fast theme, especially considering all the features it offers: their own homepage (built with Bricks as well) scores 94/100 on Google Pagespeed’s mobile test.

That’s a really good score, especially since they claim no optimization plugins are used.
That’s because Bricks Builder is built with Vue, a new Javascript library that lets the browser do most of the work, instead of the server like most WordPress websites do.

Elementor wasn’t the only source of inspiration for the developers of Bricks though. 
The canvas with it’s colored containers and elements (Divi calls those modules) feels a lot like Divi, which also goes for the draggable paddings.

The settings panel on the other hand looks a lot like the one in Oxygen. Personally, I don’t like the Oxygen UI, and like Oxygen, Bricks Builder uses a lot of CSS terminology.
But whilst I can’t get used to Oxygen’s UI, Bricks UI feels more intuitive for some reason. I’ll talk about this some more later on.

So Bricks Builders is a theme with it’s own built-in page builder, like Divi and Avada. Or actually, it’s a theme with it’s own built-in theme builder, because it also let’s you create your own header, footer, archives, page and post templates etcetera. But then again, all premium page builders let you do that nowadays. Does Bricks Builder bring anything I haven’t seen before to the table?

Bricks Builder features – what makes it different from the others?

Well, first of all the speed. As I said before, Bricks Builder is really fast – front-end as well as the builder itself. The builder loads within a few seconds and working in it feels fast and intuitive. There are also settings to disable WordPress core bloat like emojis and embeds.

Theme styles

Another thing that set Bricks apart is their theme styles system, which let you set global defaults like colors, typography, margin and padding for every element, the max width of containers and so on. However, you can also set default styles for each element. It’s a little less extensive than Divi’s presets system but still really nice. You can also set conditions for a theme style, so you can use different styles for post, certain pages and so on. You can even export theme styles to reuse them on another Bricks site.

Page settings

In the page settings, you can disable the header and footer, add a dot navigation to the page, change the permalink, page title and meta description, and there are even social media settings so you can decide which title, description and image are shown when the page is shared on social media. 

Templates

Like any theme builder, Bricks too has a template library where you can save your templates for your header, footer, archive, blog etcetera.
You can put multiple templates in a bundle, so you can easily find the templates that belong together. That way, you can create multiple headers, footers and content templates in different styles, and bundle all the templates in the same style.

Which brings me to another interesting feature; you can share your templates / bundles with other users or clients, so your templates will show up in their library too.
It’s also possible to export templates as a json file that you can import onto another Bricks site, but that’s not necessary because of the feature above. 

You can also save your containers as a template, and you can save individual elements as global elements, which will be saved in the elements panel. If you save an element as global, changes made to that element will reflect everywhere it’s used on your website. So if you save a contact button as a global element and at some point you decide to change the background color of that button, it will change the background color of all (global) contact buttons throughout your site.

Bricks comes with about 70 pre-designed templates in 3 styles (bundles), which is a little shy compared to the competition. However, that amount will grow in time.

Containers and elements

I’ve used the word “containers” a few times, but what are containers in Bricks Builder anyway?

Containers can be compared to sections in other page builders, but where other page builders use rows and columns to build the desired layout, you just add more containers with Bricks. Containers are really just CSS flex elements (and soon you’ll be able to choose CSS grid as well). That may not mean anything to you at all, so let me explain 🙂

Containers can be displayed vertically (under each other) or horizontally (side by side). Want a layout with 3 rows? Then just insert 3 containers and set them to be displayed vertically. Want a layout with three columns? Then insert those same 3 containers, but set that they should be displayed horizontally.

You can also insert containers into other containers, so you can have, for example, 3 containers under each other (3 rows), of which 1 row has 3 columns.
I’ve done that in the screenshot below: container 1, 2 and 3 are vertically aligned and are therefore below each other, and container 3 has three other containers in it that are aligned horizontally. These three containers (3a, 3b and 3c) thus form 3 columns.

You can also place elements in each container. For example, container 1 contains a heading element and container 2 contains two buttons. Again, you can set whether those elements should be next to each other (such as the buttons) or below each other, and whether they should be aligned left, right, top, bottom or centered.

The Bricks way takes some getting used to, especially if you’ve used another page builder that works with the traditional rows and columns structure before.
But this way gives you a lot of flexibility because you can create any layout you want.

That flexibility goes for other things as well; for example, you can add an unlimited number of gradient colors to an overlay, background or text
(yeah, you can have headings with gradient colors 😮 ).

You can also use an unlimited number of layered shape dividers on anything, both horizontal and vertical ( 😮 again).

Bricks Builder comes with about 50 “elements” (other builders call those “widgets” or “modules”), which is a good amount. All the basics elements are there, like text, image (also gallery and carousel), button, slider, accordeon, testimonials, price table,  a simple contact form, tabs, counters, Google Maps etcetera. A nice extra is that you can pin the elements you use most to the top so you won’t have to search for them. 

There are also some more advanced elements, like the posts elements which can also show pages or custom post types, with the possibility to include or exclude certain posts or terms.
You can show them in a list, grid, masonry or metro (remember Windows 8?) layout, select which items you want to show (title, excerpt, image, meta data) and in which order, alternate the images in a list view (so the image on the first post is on the left, the image on the second post on the right and so on). Again, a lot of flexibility here.

For single posts, you also have a related posts element and a posts navigation elements which shows the next and previous post.

Bricks Builders also allows you use dynamic data in a lot of places, even inline (okay, one more time… 😮 ). So you can have a text block, and add the post title, author or a ACF field anywhere in the text. I didn’t see that before in any other page builder.

CSS filters, animations and transform

Most page builders offer CSS filters like brightness, contrast, blur, sepia and so on. However, most builders only offer those filters for image elements (Elementor), or the filters apply on everything in a section, row or element (Divi). However, those effects are often very useful for background images, but most builders don’t offer a way to apply filters on background images only. Bricks Builder let’s you choose if you want to apply the filters on backgrounds, or on images, or on the entire container / element.

Bricks builder also offers entry animations and transform effects like skew, rotate and scale on any element.

Unsplash integration

Talking about useful things, Bricks has Unsplash integration 🙂 Whenever you add an (background) image, you’ll find a “browse unsplash” button under the image select box.
When you click that, a popup opens which lets you search the entire Unsplash catalog, which contains over a million royalty free stockfoto’s that you can use on your website for free.

Developer friendly, but a little less end-user friendly

So Bricks Builder offers a lot of features for users who can’t code, but it also offers a lot of features for users that CAN code. 

To start, you can add custom CSS, or a CSS class or ID, to any element, but that’s something most builders offer.

What most builders don’t offer though is a JS block for the head, body and footer, so you can inject scripts for the entire site (like a Google Analytics tracking code) or on a per page level. You can even program your own elements for Bricks Builder!

Bricks Builders also offers a structure panel, which highlights the element you hover on in the builder (you see that panel in the container screenshot on the right).

As I said before, they use a lot of standard CSS terminology, like display (which you have to set to none to hide an element on mobile), positioning (relative, fixed or absolute), justify and direction (row or column, which you can reverse on mobile) etc.

That does make Bricks a little less end-user friendly than a builder like Divi though.
However, that goes for almost every builder. That’s because Divi uses a lot of visual elements in their builder, instead of just text like Bricks (and Elementor too). 

To illustrate that, I made a screenshot of the box shadow setting panel in Divi (on the left) and Bricks (on the right). In Divi, you first choose one of the 8 images at the top, which are essentially presets. Next, the other options appear so you can fine-tune it.

In Bricks Builder, you only see boxes for x, y, blur and spread, in which you have to put the desired values manually. 

The same goes for things like shape dividers, animations, transform effects etcetera. When you want to select a shape divider, Divi lets you choose between a bunch of images of the different shapes, whilst in Bricks (and Elementor too) you only see a list with the names of the different shapes (waves, clouds, drops and so on). 

Pricing

Since Bricks Builder just launched, they have a very tempting lifetime deal for early adapters. For just $59, you can use Bricks on one site with lifetime updates and support.
For $149, you get the same deal for a 1000 sites.

Conclusion

Needless to say I already bought a 1000 site licence right 😉 Even though Bricks is a little less user-friendly than Divi, it does offer a lot of interesting and sometimes unique features.
To highlight a few:

• It’s speed, both front-end and while building – which is an important ranking factor in Google
• Multiple global default styles for each element
• Very flexible due to the use of containers instead of a fixed row/column structure
• Unlimited gradient colors
• Unlimited stackable shape dividers, horizontal AND vertical, on every element
• List, grid, masonry and metro layouts for posts, galleries and so on
• Dynamic data even inline
• CSS filters on background images
• Unsplash integration

In my opinion, Bricks Builder is a great choice if you’re looking for a more affordable alternative to Elementor Pro. Sure, at the moment it misses some popular Elementor Pro features like a popup builder, WooCommerce builder (which is in development) and scroll animations, but it just launched and it also offers a lot of features that Elementor doesn’t. 

As with all new products, it’s always the question whether they will still be around and actively developed in 5 years’ time. 
But with those features at that price, I for one am certainly willing to take that risk! Are you?

Video overview of Bricks Builder