bricks builder review

Introduction

Bricks Builder is a new theme that includes a page builder. Version 1 was released in March 2021 and it has a surprising number of features. It includes a theme template builder, a page builder, and works with Custom Post Types and custom fields. In this review I will do a high level overview of Bricks, but I am mainly going to focus on templates, or the “theme builder” features.

This post is part eleven of a series looking at Custom Post Types and the theme building functionality of page builders. In part one I created a Custom Post Type using CPT UI and Advanced Custom Fields.  If you are unfamiliar with Custom Post Types and want to follow along, then take a look at that post first. In this walk-through and review I going to use the Custom Post Type created in part one as a starting point for creating the single and archive templates for it using Bricks.

Video Version

Bricks Overview

This is a premium only offering available from the Bricks Builder website. Like most WordPress page builders, the editing experience is pretty close to WYSIWYG.

bricks website

Unlike some builders, the output on the front-end is well optimized and the website touts good speed scores out of the box.

bricks speed

Bricks version 1 launches with good custom field support. It works with ACF, Pods and Meta Box. Toolset is on the roadmap.

bricks custom field support

Speaking of roadmap, Bricks has an open feature request board where people can add suggestions and vote. The developers say they want to grow the product based on user feedback.

bricks roadmap

There is a knowledge base with help articles and videos. There is a decent level of help for getting started.

bricks academy

There is introductory pricing for 1 or 1,000 sites. It is a lifetime license and during the early launch stage, the money back guarantee is extended. They will post when it ends, but for the time being they would like to make it possible for people to try it out, give feedback, and follow along to see how it develops.

bricks pricing

Setup

I have a starter site that I use for demos. It has a bunch of posts and a books Custom Post Type. We’ll see those below. There is also a default “main” menu setup.

main menu in starter site

Theme Default Layouts

I installed the Bricks theme and this is what the blog / archive looks like on the front end by default. I have some test posts created and it shows the blog in a two column grid by default. There is no header or footer.

front end with test posts

If we look at a post we see at the top that it has stretched the featured image full width and over that there is the post title and post meta. The content is boxed.

single post top of page

At the bottom of the page there is the author avatar, then social share buttons, then related posts by category, the comment form, and then post navigation for the previous and next posts.

single post bottom of page

Given that the theme is supplying a default single and archive layout, I’m not sure why it doesn’t include a simple header and footer.

The Book Custom Post Type

Here are the plugins installed. I used CPT-UI and Advanced Custom Fields to create a Custom Post Type called Books and an associated taxonomy called Genres. This process is covered in the part one of the series. WP Reset Pro is used to reset the site between testing sessions.

plugins installed

I added several book records.

book records

And here is a single book record where on the right you see the Genres custom taxonomy and the featured image. Book covers have a portrait orientation, which require a different type of layout. Note there are two custom fields at the bottom, one which has the URL to the author’s website and the other is a photo of the author. We will try to include these on the template for the single book page.

single book record

This is the default book archive, the same layout as the blog archive.

defaut boot archive

And here is the default book single page. There is no layout at all.

default book single

Bricks Settings

Bricks has several pages for accessing features and option settings. The Getting Started page has some overview information and links to help.

bricks settings getting started

The Template tab is where you manage the templates. Bricks is a theme builder as well as a page builder and the expectation is that you are going to create the theme template layouts yourself, or import some from the library. The lack of a header and footer is a big hint to get started with that. We will return to this area after going through the rest of the settings screens.

bricks settings templates

The Settings page has several tabs to organize the options. On the General tab the Post Types section is to set which post types you want to use the page builder on. There is some limited Gutenberg integration. The Gutenberg Data section has two options, to bring Gutenberg data into Bricks and the over way, to save Bricks data as Gutenberg blocks. On this screen I checked these two as they seem to provide the most bi-directional compatibility. I also checked to allow the Admin to upload SVG images.

bricks settings general tab

The Builder Access tab is where you can enable or restrict access on a site with multiple contributors.

bricks settings builder access

On the Templates tab most of the settings are related to either sharing your templates so you can access them on your other sites, share them with other people, or access other people’s templates. The one exception is the “Disable Default Templates” option. By default when you create a header and footer template it will be applied site wide, this option turns that off in the event you want to use multiple headers and footers.

bricks settings templates settings

On the Builder tab there are some options for builder behavior. I changed the Toolbar Logo Link to go to the home page.

bricks settings builder settings

The Performance tab is really just a convenience to make it easy to disable some default WordPress behavior that many people don’t use anyway.

bricks settings performance settings

The API keys options are for integrating with 3rd party services.

bricks settings api keys

Custom Code is where you can upload CSS and JavaScript for sitewide use. There are places in the builder where you can add code for particular pages.

bricks settings custom code

You can upload custom fonts on the Custom Fonts page. When you click the Add New button there is a screen to upload them and a help icon with a link to a knowledge base article about how to do it.

bricks settings custom fonts

Bricks has a default sidebar defined, but you can also create custom sidebars should you need them.

bricks settings sidebars

There is a System Status page, which I think should be called System Information.

bricks settings system information

I entered the license on the License screen.

bricks settings license

Quick Tour of the Editor

Here is a “map” of the editor with a reference table underneath.

editor map
  • 1. The Canvas which provides a pretty close representation of what things will look like on the front.
  • 2. Add a new section.
  • 3. Insert a template from the library.
  • 4. Link to help knowledge base.
  • 5. Elements Panel.
  • 6. Configurable button. You can configure it in the admin settings. By default it shows a preview.
  • 7. Structure Panel.
  • 8. Hover Styles.
  • 9 List of Pages (or post types that we have allowed for editing).
  • 10. Revisions.
  • 11. Settings.
  • 12. Add Element or show Element Panel.
  • 13. Responsive View Toggles.
  • 14. Current screen width.
  • 15. Undo and Redo.
  • 16. Link to Knowledge Base
  • 17. Templates Screen.
  • 18. Go to the WordPress admin.
  • 19. Preview canvas.
  • 20. Save.

When you drag an element onto a blank canvas, or add a section to the canvas then you automatically get a section, row, and column also. Here I added a heading. If you hover over the bottom right corner you see the section controls, which are yellow / gold.

section controls

If you hover over the top right there are the row controls, which are purple.

row controls

If you hover over the top middle you get the column controls, which are blue.

columns controls

And if you hover over the bottom middle then you get the element controls, which are green.

element controls

When you click on an element then the list of available elements in the left panel changes to a properties panel. If clicking on an element doesn’t bring up the properties panel then you can click on the “pencil” icon. The properties panel has two tabs. The Content tab lists options related to the content. Note the subtle little dot next to the Heading and Tag labels. That tells you a setting was made for that. You can change text by clicking on in in the canvas or on the properties panel.

properties panel content tab

Here is the Style tab. The sections and options in the Style tab are pretty consistent across elements.

properties panel style tab

Looking at the buttons on the top left toolbar, the folder icon, second from the left, opens the Structure panel. The icon on the right expands everything.

structure panel

Note the three dots on the right side of each item in the structure. Hovering over those will show the settings for that item.

structure item settings

The flag icon, which toggled, means that any properties you change apply to the hover state of the item.

hover styles

The Pages panel shows you the post types you’ve allowed for editing and you can see the created pages or create a new one.

pages panel

We don’t have any revisions yet, but the clock icon opens that panel. When there are revisions you will see them in a list and you can revert to one of them if you need to.

revisions panel

The Settings panel has a couple of subpanels.

settings panel

The Theme Styles subpanel has a few general sections and then a section for each element in the element list. This is where you create your default settings for everything. These are editor wide. Note the Conditions section. Here you set what you want these theme styles to apply to.

theme styles panel

Under Settings there is also a Page settings section. Here you can set general settings, SEO settings, social media settings, as well as add custom CSS and add JavaScript that applies just to that page.

page settings panel

The last section under Settings is for Template Settings. It is currently showing some Header settings because the template open in the editor is for a header. The Conditions section is important because that is where you tell Bricks what the template will be used for. There is also some option to select the content that will be used for preview purposes in the canvas.

template settings

Creating Some Site Templates

Site Header

I go to the Bricks Template screen and click Add New Template. I give it a name of Site Header. On the right side there are three panels related to Bricks templates. The first is where you select the type of template. I pick Header. Below that are two input areas, one for template tags and the other for Template Bundles. So, you might tag and bundle a template if you were creating a design set. For a simple site I don’t think you need to use those.

creating site header template

I published it and clicked Edit with Bricks. We are taken to a blank editor window, but Bricks knows we are creating a header.

On a high level, I want to add a full width section and give it a background color. Then in the column add a logo on the left and a menu on the right in a row with boxed content. I click the button in the middle of the canvas to add a section. Bricks knows it is a header and adds a header section.

header section added

What’s different about a header section is it has these header options. I access those by clicking on the Header Settings button. Most of these settings are for a sticky header, and I don’t need that, so I leave it all as is.

header settings

I access the section settings by clicking on the control in the lower right side. Under Layout I toggle it to full width.

make section full width

Then under the Background settings I set a dark blue background color.

set background color for section

I then go to the elements panel and search for logo.

search for logo element

I drag that into the row and in the logo settings I go and upload a logo that I prepared. I set it to a medium size. I think you’d want to fill in the box for logo text also.

upload logo

I then search for the menu element.

search for menu element

I drag and drop that into the row. It landed to the left of the logo, but I dragged it to the other side. In the drop down I selected the main menu.

add menu element

Unfortunately you cannot see the menu and it is pushed next to the logo. In the settings for the menu element, I go to the Typography options for the top level menu, make the text size a bit bigger, and set the color to a light color.

set menu color

I went to the Layout settings for the column and set the Justify Content to Space Between and align items to center.

set row layout

Here is the finished header.

final header

Site Footer

I repeated the process for the footer. First I created the template in the admin, choosing that it would be type footer.

creating site footer

Then I added a section, set it as full width and made the background the same blue as the header background. Then I added a text element and put in the copyright notice, and set the text color to a light color in the Typography settings. Footer done.

finished footer

Creating the Home Page

I created a new page and named it Home. I then went to the Admin / Settings / Reading page and set that new page to be the home page.

set home page in settings reading

I then went back to the list of pages and clicked on the Edit with Bricks link.

create home page

In the Bricks editor I added a section and set the top and bottom margin to 70px.

set section margin

I searched for the Posts element.

search for posts element

I dragged and dropped that into the section. I then checked under the Posts panel to make sure the Post Type was Posts.

set post type

I toggled the Navigation on.

toggle on navigation

I saved and this is the final on the front. Looks good!

home page final

I clicked on one of the posts and the default post single looked fine.

post single now

Creating the Book CPT Templates

The Book Single Template

I created a new template for the book single.

book single template created

Here are the Template Settings for the book single.

template settings for book single

And here are the preview settings.

preview settings for book single template

I added an image into the left column and set the dynamic data option (the lightening bolt) to the featured image.

image dynamic source set

At the bottom of the list of elements there are some for the single template. Odd that there is not one for the Featured Image.

single template elements

I dragged the Post Title, Meta Data, and Post Content elements into the column on the right. This is what it was looking like.

post elements added

I then dragged an Image element under the book cover image. This would be for the author’s photo custom field. I selected the ACF Author’s Photo field as the dynamic source.

authors photo field chosen

I set the size of the photo.

size of authors photo set

I added a button under the author’s photo. I changed the text, style, and link options so that it picked up the custom field with the link to the author’s website.

button added

I positioned the button. I didn’t see a way to center it in the column, so I added some padding to the left side. That doesn’t seem an ideal way to go about it.

positiong button

After saving, I went to look at a book record on the front. Looking good.

book single on front

The Book Archive Template

As previously, I created a template.

create book archive template

In the editor, as before, I added a section and gave it a top and bottom margin of 70px. Then I added a Heading element with the words “Book Reviews.”

add book review heading

Then I added the Posts element and set the post type to books. I also selected to show 9 items.

post type posts

I first tried to use a list layout, but was unable to show the image with the correct aspect ratio and keep the correct gap between the image and the other fields. So I switched to a grid layout with 3 columns.

grid layout

I also selected the Medium Large image.

post image setting

I clicked on the Fields panel and then the Excerpt item and increased it to 50 words.

excerpt field

I added the Read More field.

added read more field

Underneath the list of fields there is a settings section for each field. I adjusted the settings for the Read More field.

read more button settings

I noticed that some of the images were different sizes. I think that the original images are that way.

images are different sizes

I also noticed on mobile that the image was not centered in the column. I could center the content, but that applies to all of it and the excerpt would also be centered, which looked odd.

image not centered

So at the bottom of the Style tab, I opened the CSS panel and added a bit of CSS to center and size those images.

add css for image display

I saved and went to the front-end. Looks good.

book archive final

Discussion and Conclusions

There are some things I noticed while working with Bricks. Here are the cons, pros, and observations.

Con – Template Conditions Don’t Make Sense

Here is what I mean. On the main Templates page there is a place where you set the Type of template it will be. All “Theme Builders” have two levels for defining what the template applies to. On the screen where you create a template there is only 1 level exposed. It would make life easier if we set the conditions in one place at the same time. For example, here I’ve chosen that it will be a “Content” template.

example one step one

Then when I go into the builder I go to the Settings area and click the Template settings. It should only have the options that would apply to a content template. But look, I can now set it as an Archive.

second level


I do that. I add a condition to set it as an Archive for books.

example one step two

Guess what, the setting for “Content” still shows as the selection on the first screen!

Con – Image Sizes in the Post Module are Limited

As we saw when trying to create the Book archive, the Portrait orientation of the featured image was difficult to accommodate. There should be an “Original Aspect Ratio” option that then sets the width of the image to fit in the column and lets the height size automatically.

Missing – There Is No Loop Builder

Because of there is no loop builder, there is no way to add a custom field to an archive list. Simple sites can get by without this, but advanced sites will need this feature. In previous installments of this series, the ability to add custom fields to the archive has been a test to separate the simple implementations from the advanced ones. The ability to create your own loop output is a power feature that Toolset and Oxygen, for example, offer and that allows you to create more advanced content views.

Missing – No Conditional Display Options

There are no conditional display options. This is another feature that is essential for advanced sites. A loop builder and conditional display options help to make sites have more application-like functionality.

Missing – No PHP Element

It would be very nice if there were a PHP Element. Bricks has elements that allow you to add custom CSS or JavaScript, but not PHP. Oxygen and Toolset, for instance, have this and it allows you to access the many WordPress PHP functions as well as to use the output functions of ACF and Metabox for displaying repeater fields and flexible content fields.

Observation – SEO Options May Not Be Sufficient

Bricks has some SEO options. They area a nice idea, but I wonder if they are sufficient. I assume if they are left blank they are not output, so there is no issue, but I’m thinking that in this case it might have been better to leave it for a dedicated plugin.

Observation – Design Sets and Pre-Designed Library

I like the idea of custom Theme Styles and of being able to import entire Style Kits, the but ones provided at launch are pretty limited. I suspect these are placeholders for the time being. Each design set includes a list of all of the elements. I hope that those are built using HTML elements so that if you set, say all of your heading options, that the elements use heading tags and will inherit those choices.

Pro – Lots of Extras and Details

Bricks has a large number of useful features that go beyond the basic builder. For example, the ability to create custom sidebars that you can use in your pages and templates. There are optimization options for turning off seldom used WordPress features, many of them old and outdated, but still on by default. You can easily add custom code either sitewide or by page / template without needing to add another plugin or use code snippets. Also, there are a fair number of third-party integrations for the initial launch.

Pro – The Builder Is Full Featured and the Interface is Responsive

There are a good number of elements in the list, more than 50 available at launch, and they are well organized. Drag and drop worked well. I liked the ability to pin elements to the top of the list. The interface was fast and there was not a slow-up as sometimes happens in builders with a lot of elements or content. I liked the way you can quickly switch between device size breakpoints.

Pro- Accessing Dynamic Data and Custom Fields is Easy

There are several ways to access and use dynamic data and custom fields. You can use the elements, use the lightening bolt, or type in curly braces. No matter which way you do it, it is easier to access the custom fields than other builders. Bricks supports ACF, Meta Box, and Pods (with Toolset on the roadmap). It is nice that users are not locked into only one option.

Pro – Was able to Create the Desired Singe Book Template

As they say, the proof is in the pudding. I was able to quickly and easily create the single template for the book Custom Post Type. I did have to use some CSS to center and size the images, but I’m not sure if that was due to a lack in the editor or my unfamiliarity with it.

Conclusions

The Bricks Theme gets a lot of points for creativity. It feels like the developers looked at a lot of builders and picked the best features from each. There were a few cons and things missing, but the Bricks team has extended the money back guarantee until any initial-release bugs or major pain points are addressed. This gives us plenty of time to try Bricks and follow along with development.

Interaction with the developer has been positive and they are listening to user feedback. There is an active Facebook group where users can ask questions and share. The initial launch of Bricks got a lot of attention, perhaps more than the developers anticipated. They now have the challenge to build the team and manage the transition so that Bricks can live up to its potential. Despite the rough edges, I’m excited about Bricks and looking forward to seeing it grow. During the launch phase Bricks is very aggressively priced and I encourage people to take a look to see if it might meet your site building needs.

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”  

Similar Posts