Custom Post Types and Page Builders Part 11 The Bricks Builder Theme

hi this is david mccann for webtng in this video i'm looking at bricks a new theme that includes a page builder version 1 was just released in march 2021 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 video i'll do a high level overview of bricks but i'm mainly going to focus on templates or the theme builder features this video is part 11 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're unfamiliar with custom post types and want to follow along then take a look at that video first in this walkthrough and review i'm going to use the custom post type created in part 1 as a starting point for creating the single and archive templates for it using bricks let's take a look at the bricks website and get an overview of what it offers this is a premium only offering with no free version like most wordpress page builders the editing experience is pretty close to wysiwyg what you see is what you get unlike some builders the output on the front end is well optimized and the website touts good speed scores out of the box brx version 1 has good support for custom fields and dynamic data it works with advanced custom fields pods and metabox toolset is on the roadmap speaking of roadmap brix 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 there's a knowledge base with help articles and videos and it's a pretty decent level of help for getting started there's an introductory pricing for one or a thousand websites it's a lifetime license and during the 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 out bricks give feedback and follow along to see how it develops and given that it's a lifetime license the pricing is very reasonable so i set up a site for brix testing you can see i have a menu created i've got the books custom post type and we'll see that in a minute here i've seeded it with a number of posts if we go look on the back end i've got advanced custom fields and custom post type ui which i use to create the book's custom post type and i've got wp reset pro which i use to reset the site between testing cycles here's the books custom post type you see i've entered a bunch of records if we look at one we can see that we have the normal title and content area we also have a custom taxonomy called genres and we have featured images that are portrait mode orientation instead of the normal landscape mode and at the bottom here we have two custom fields a link to the author's website and the author's photo so we're going to try to include these in the templates we create for books then if we go to appearance i've got the bricks theme installed but i haven't enabled it yet so let's activate it when bricks is activated we get these new admin menu items i'm going to go down to this one and activate my license so the nag goes away and then we'll step through these so i'll pause the video while i activate okay i activated the license so on the getting started page we have some links to help and other resources you notice in the corner here it says what version we've got installed there's been one little bug fix update already this is the screen where you go to create and manage templates and we'll be coming back to that in a few minutes then there's a settings area and this has got several tabs so these are the post types where you want to use bricks as a page builder so by default it's only page then there's this option here for gutenberg data and what that does is it kind of converts gutenberg and bricks data back and forth a little bit my understanding is that it's pretty basic but it's probably a good thing and so i'm going to go ahead and check that and then there's the option for svg image uploads and i'll check that for administrator this is an area if you have multiple users contributors on your site then you can use this to set the role permissions and then there's this templates area you see it talks about remote templates it talks about my template access and for the most part what these settings are for is either to access your own templates on another site if you wanted to import them or someone else's templates if someone makes those available to you or to even share your templates with other users the only setting that doesn't fall into those categories is this one here disabled default templates and what this does is by default the header and footer will apply site-wide but if you enable this then that won't be the case you'll have to set that manually and that's useful if you want to have different headers or footers or control that on your own then there's some builder settings you can disable auto save you have the auto save interval lighter dark builder mode and the option to confirm delete as we'll see in the corner of the editor there's a logo and you can choose what that logo does when you click on it you can set it to be a preview go the home page edit in wordpress or not even be a link there are other links for preview and edit in wordpress but not one to go to the home page that's what i'm going to set it for and i'll save those settings and then these are some performance features they're basically features of wordpress that most people don't use or that are outdated or becoming outdated so you can disable some of these features here so i don't usually use emojis i do use embeds in gutenberg jquery migrate wordpress is moving away from that if you don't have any plugins that are using it you can disable that then this says if you're having problem with blocks built-in lazy loading then set this because blocks has its own lazy loading so i'll save those settings here's where you enter api keys for third-party integrations and it has a fair number of options here a lot of people might use the google maps or recaptcha for email signup forms or social media there's an unsplash integration for being able to browse free images and pull them in there's been some news about unsplash but currently that's free and then there's a place where you can enter custom css or javascript and these are site-wide options there's another place inside the builder where you can add custom code for a template or a particular page then if you want to upload custom fonts you can do that here brix comes with a sidebar but it also has the ability where you can create custom sidebars so this is a nice feature and then here's a system status screen i think it should probably be information called system information but anyway there's a warning then you might want to make an adjustment check your php settings so i have two there's a warning here that my memory limit is a little low and then it's saying two gigabytes of php max upload file size isn't big enough they recommend 16 megabytes so guessing that's just a little bug that it's not parsing the gigabytes but that's not a big deal i'll pause the video and increase this okay let's see so i think i'm gonna put it in right here and save that and now let's go back and refresh this page good so that went away and then the license we already looked at that and i entered my license okay let's take a quick look at what front end of the site looks like by default with bricks enabled before we start doing any theme building and you can see there's no header or footer but there is some kind of default maybe implicit layout for archives and if i look at one of these posts you can see it has some kind of implicit layout for a single post also if we look at the book custom post type same thing with the archive same kind of layout and if we look at one you can see there's absolutely no layout applied at all here so there's some work to do now let's go into the editor so let's go into the builder we'll do that through this templates menu i'm going to click add new and start by creating a site header and there are three bricks related areas here on the side one is you select which template type you're making so in this case i'm doing a header there's also footer content section archive search results or error page so i'm going to do header down here there's an option to give it a tag or to include it in a bundle and so these would be things if you know you had a lot of templates you might want to use a tag for the style kit or something like that or a bundle if you're going to have it be something that you export and import you could use a bundle and you could set a featured image there's a place in the bricks builder where you can look at templates and so if you wanted a featured image you could do that but just for one site or whatever i'm just going to go with setting it as a header i'm going to publish and then here we have two buttons edit with bricks or delete bricks data so be really careful if you click this one that basically deletes everything you've done with bricks for that template so it just kind of resets the template so i'm going to go edit with bricks we're taken into the editor there are several parts to the editor there's this top toolbar and we'll go through that so this is the campus area and then this is a side panel which has the elements on it and we'll come back and look at these but first let's go through this top toolbar so we set this when we click on it'll go to the home page this one shows you the structure of the elements on your page we don't have anything yet but as we work on adding elements to the page this shows you the structure and we might use that again as we're going along and note that you can add something from there you can insert the templates or get help just these are the same controls as there then as you're working on adding styles if this is toggled on then the styles or settings you enter those reply to the hover state there's this pages button here where you can see pages and we only see pages here like this would be post type if we had selected that we could edit posts or books and that would be an option in this drop-down and these are the pages that exist so if you wanted to edit those with a bricks builder you could get into them here or you can even create one then this is the revision area this little clock icon and you can go see the revisions and go back and apply one if you need to and then there's a settings area here has three areas theme styles page settings and template settings so theme styles you can see this is the default brick style that's selected now but you can create your own set and that gives you kind of a clean slate of all of the settings and you can apply your own and then there are three template bundles that are supplied let's look real quick at the default one you can see there's some site layout options there's a large color palette with a number of colors their content links topography and then there's a place where you can style the elements so you can see there are a lot of those then if we look at one of the design sets we see it has all of the same things so you see those little dots that shows you that there's been some setting change to that so that's a little indicator and for example if we look at the colors you can see it's using two colors in this template bundle i was kind of hoping that the template bundle would show us kind of everything in action be a blueprint or something but right now they are kind of basic and then an important thing especially when you're creating or changing styles is there's a condition tab here where you say what your style is going to apply to so say you create a color palette then you want to come in here and set a condition saying it applies the entire website or to one of these things so that's important when you delete something it's a double click first to select it and this second one to confirm those are the theme styles here the page settings there's a general setting which nothing's showing because we don't have a page open there's some basic seo settings not sure if these are sufficient but for someone who wants some minimalistic seo this might be good enough there are some social media settings if you're sharing the social media and then some places where you can enter custom css or javascript just for this template or page then there's a template settings area here and here's for the header it knows that we're editing a header and it gives us the sticky header options then there are some conditions you can say what it applies to so for some of the other templates we create we'll be using those and then if you're editing like say a page or a book you know you're creating a template for those then you can come in here and select which content is going to be the preview content next is this plus button is where you access the panel of all the elements here are some controls to switch between different device sizes when you're testing to make sure that your content works on different device sizes and this shows you what the current size is over here you have an undo and redo you have a link to help this is a place where you can manage your templates or create a new one then this takes you to the wordpress admin here's a preview button and the save button so that's the top bar now in the canvas when you add a new section you can see like i said it knows we're doing a header so it gave us a header section by default but when you add a section even before you add any elements to it there are three levels there's the section which is this kind of yellow gold these are the controls for the section then there's a row these are the controls for the row and then there's the column and these are the controls for the column and note that all of these have a little pencil icon if you want to go in and edit and so let's add just for instance a heading and so you see the column controls were at the top in the middle and the element controls are in the middle at the bottom and note also that when we added the element the panel over here with a list of elements changed to a settings panel and so these are the settings for the element we're working with you have some content settings and a bunch of style settings when you're working with one of these elements that's text there's an option to just click on it and you can type right in there or if you need to you can click the pencil icon to open the settings on the side one more thing i wanted to show you is that there are three places to access and work with and add dynamic data at the bottom of the elements panel there's some dynamic data elements that you're probably all familiar with you can just drag and drop those in or if we go here and let's say that we want to pull the title in this way then you can click on the lightning bolt and you can select some dynamic data that way either things like the post tokens author site archive category terms or if you're working on a template for a custom post type as we'll be doing then you'll have your custom fields showing in this list as well and so that's the second way and the third way is you can type a curly brace and insert the dynamic field that way as well there are kind of three ways to work with dynamic data and one thing i've noticed is that this is a lot less clunky and more streamlined than say entering fields in elementor so that's nice okay so i'm going to now start over let's actually build our header so i'm going to add a new section okay so i'm going to go to the section now edit section go to layout i'm going to make this full width and so you can see our row is boxed and i'm going to go to background i'm going to add a color a background color and let's choose a blue find kind of a pleasing blue there okay and i'll copy this to use later on the footer now let's go and add a logo element you can see it gives us a little indicator of a place where we can drop that and i'll select a logo i'm going to insert that i'm going to change it from full size to being let's see what medium looks like that's better now i want to insert a menu so i'm going to search for menu and i'll add that okay so let's select our menu make sure that's selected then i'm going to go to top level menu and let's change topography let's give it a lighter color so we can see it and let's make the font size like say and 18 maybe now let's go to the column settings and layout let's justify the content space between so we've got the logo on the left and the menu on the right let's align item center so i think our header's done i'm going to save it and let's go to the front of the site and take a look and that's what it looks like so now let's go through the same process again and we'll make the footer so i'm going to add new site footer select footer publish that edit with bricks it's going to be the same kind of process i'm going to insert a new section i'm going to make the section full width i'm going to give it that background color then i'm going to insert a text element here and i'll clear this out and i'll enter my copyright notice and i'll go to style topography let's change that text color so we can see it and let's center this so there's our footer let's save that and now let's go and check that out all right so we have our header and footer now let's fix this home page so we have some padding and get the images closer to their native default so let's create a home page now with bricks so i'm going to go to pages add new call it home i'm going to publish it this is kind of standard wordpress stuff go to reading and set that we want our home page to be this click save changes now i'm going to go to that page and we will edit it with bricks okay same kind of process i edit section i go to layout only on this one i'm going to add some margin to the top and bottom and then i'm going to search for posts we'll use this post element and then check that i've got the right post type selected and then under layout grid and this is fine but for image i want to select the image height okay then we will look at these things a bit more but that's sufficient now for our home page so let's save that and now let's go to the home there's our home page and that's a page not a template and if we look at one this is what the default post template looks like and so i'm just going to go with that for now okay so you get the idea on that okay so the next step now is going to be to create the templates for the custom post type okay so the steps should start to look familiar we're going to go to templates we're going to add new and this one will be the single book template we're going to choose content and publish and now edit with bricks okay we're going to add a section and we're going to give it some margin and now i'm going to go here to the column and i'm going to duplicate it so we have two columns and i'm going to move this one over and this will be for our featured image so i will add the featured image here and choose featured image you see how it shows the other image the author's photo option okay and see it's not showing yet we don't see any preview data so what i need to do is a couple of things first we go into the template settings and conditions so we want to tell it that this is for books and then we want to set our preview okay good just gonna save that here now let's add the other fields and one thing to note here is that a nice feature of the builder is you have these little pins here so you can pin these to the top and so if they're ones you use all the time make it faster than scrolling down so let me show you that okay so let's add the title and then [Music] let's add the metadata okay and then let's add the post content now let's add another image under here and this one will be for the author's photo let's go to style and let's set the height and width and now let's add a button under that and let's choose info okay and we want the link to go to [Music] the author's website so that's easy to select and we'll have it open in a new tab so now we need to center this see if we can do that easily so let's try centering that let's see if like to have auto margins i'm not sure how to get that going there do width auto width let's see what that does so that takes away the extra part there positioning i guess i can adjust it that way i'm not sure that's the ideal way to do it but i can do that okay so we've got our single here pretty quick let's save that and now i just want to check it in different device sizes see that kind of is a little too much there that's why doing it the way i was doing it might not whoops let's undo that so that might not be the best way to center that you all need to come back to that here it's worse and then this is weird so that looks worse let's go back to desktop view let's edit this and in our layout positioning let's do away with that that didn't work so i think what i'm going to need to do here is go to the column layout and let's set its width at let's say 20 on desktop and then we'll go to this column and we'll set it to 80 percent maybe a little less okay let's try 75 then let's go here that looks okay that kind of looks okay but here now let's set this column so on mobile its width is 100 and let's set this column so on mobile it is also 100 okay and then then for the column layout let's say if we can get these things to stack there we go okay we still have the problem with this okay now let's go back to desktop so i'm not sure how to center this button so let's try editing the button go down to css let's give this button class of and add that here okay so that got our button centered i can see i need to go here to the content and change the text all right so that finishes our design here let's go look at it on the front end and that looks pretty good all right i'm happy with that generally this is pretty easy i had a little trouble centering this button so that's the single now let's go create the template for the book archive and we'll choose that we want archive and we'll save it and edit it we'll add a row we'll give it some top and bottom margin and then let's go like we did before for the home page we'll add the posts it has these items here i should point out that it has these items here that labeled archive but there's no loop here available yet so i can't really use these but let's go get the posts and add that okay i'm gonna save this let's check our settings and let's say post type book okay save that now we need to fix the image here and because it's a portrait image the way i usually do this is that i go to a list view and have the image on the side and the content on the other side i guess we want the image linked and let's see if we can adjust the image to make it so that doesn't do it how about if we go thumbnail no so that's good enough resolution but it doesn't adjust the size so i think what i need here is kind of an original size original aspect ratio option with the ability to adjust the width so i'm not seeing this here so i'm going to try going to a different layout and let's try grid and let's try three so that's better that's pretty close this is cut off a little bit but that's pretty close let's try adjusting the size there there that's got everything on there so there's our image set on the fields i want to go down i want to go to excerpt and make that a little bigger okay and then i want to add a field and let's add and read more button okay so that has our fields then for each of the fields when you're in this fields panel there's a area where you can adjust some settings for that field so i'm going to go down here to button to read more and under the read more i want to give this a top margin of say 25 so that looks good and we'll give it this different color let's try actually info okay and on the content option we've got padding at top and bottom i guess that looks pretty good okay we've got an extra image there so let's go back to here instead of ten let's make it nine okay and now let's go to navigation and we'll turn on the navigation good all right let's save this and go check it on the front okay now let's look at our book archive and that looks good go to the second page okay so i like that we had a little trouble kind of getting the layout we want the list layout but this looks pretty good so there are templates for the single and the archive for our custom post type books okay so that's the walkthrough we've created the templates now for some discussion and conclusions there are a few things i noticed while working with bricks and so here are the cons pros and observations the first con is that there's a little inconsistency or room for confusion with how templates are assigned let me show you what i mean so pretty much all the theme builders there are two levels of settings when you define what a template applies to and brix has that also but like i said there's a little room for confusion so here's the single book template i've assigned it to content you see the options header footer content section archive search results error page okay so my thought is like we did you know you you say okay it's content and then you go in as we did and we say it's going to be for single book and when we did archive we went and said it's going to be archive for books let's edit this and i'm going to show you the kind of room for confusion so here's my single book template we go to the settings to the template settings and conditions you can see okay we've got this book post type condition just to show you what i mean i'm going to delete that condition and look at it as if i was creating it new and you see here even though this is a template for content i can now come in and set this template as being for archive so let's say i'm going be post set it as the post archive okay and you see that doesn't fit but i can do those settings so i save that so our single template is now set for conditions for post archive let's go back and look at the single template settings it still says content that's kind of the danger of being able to make the same setting choice in two places so it's just a little thing that probably needs to be refined and then another con which we just saw is that i had trouble adjusting the image sizes seems like the defaults are all geared towards a landscape oriented featured image so those were the cons now there are a couple of things that i thought were missing first is that there is no loop builder because there's no builder there's no way to add a custom field to an archive list and simple sites are fine with that but advanced sites will need this feature when i've looked at other theme builders the ability to add custom fields to the archive has been a test to separate the simple implementations from the advanced ones and the ability to create your own loop output is a powerful feature that toolset and oxygen for example offer and that allow you to create more advanced content views another thing that's missing is that there are no conditional display options this is another feature that's essential for advanced sites a loop builder and conditional display options help to make sites have more of an application-like functionality and then the third thing that's missing is that you have an element for html or for css and javascript but you don't have the ability to add php and that's something that toolset and oxygen have and it really helps when you're building advanced sites because then you can call some of the many wordpress functions directly or if you're working with something like acf or metabox you can use their functions for showing repeater fields or layouts so anyway that's a powerful feature that it would be nice to have so those are things that i think are kind of missing so we've had the comps we've had the things i think are missing here are two observations one is that brix has these seo options and they're nice but i really wonder if they're sufficient and i'm assuming that if you don't enter anything there that nothing's output so maybe it doesn't matter because i think most people are going to use an seo plugin that has more features the second observation is that the design sets and pre-design library they're pretty limited and i suspect that these are placeholders for the time being now let's talk about the pros and even though i've mentioned the cons the things that are missing and those observations my overall feeling is very positive about bricks it pro it has a lot of extras and details brix has a large number of useful features that go beyond just a basic builder for example the ability to create custom sidebars that you can use in your pages and templates there are those optimization options for turning off seldom used wordpress features you can easily add custom css or javascript either site wide or by page or template without needing another plugin or without needing to use code snippets and there's a fair number of third-party integrations for the initial launch another pro is that i found the builder to be full featured and the interface is very snappy there are a good number of elements in the list more than 50 available at launch and they are well organized the drag and drop works well i like the ability to pin elements to the top of the list the interface was fast and there's not a slow up as sometimes happens in builders and i like the way you can quickly switch between device size breakpoints another pro was that accessing dynamic data and custom fields is very easy there are several ways of doing that you can use those elements you can use the lightning bolt or you can type in curly braces and no matter which way you do it all three of those are easier than trying to access custom fields with some of the other builders brics supports acf metabox and pods and tool sets on the roadmap so it's nice that users aren't locked in to just one option another pro was that it was easy to create the desired single book template as i say the proof is in the pudding and i was able to quickly and easily create the single book template for the book custom post type i did need to add a little css to center the button and i'm not sure if that was a limitation in the bricks editor or i just wasn't familiar with it enough to find the right combination of settings all right so my conclusions about the bricks theme is that it gets a lot of points for creativity looks like the developers looked at a number of builders and picked the best options from each although there were a few cons and a few things missing the bricks team has extended the time frame for 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 without the pressure of needing to evaluate it immediately so i really appreciate that the developers recognize that this is version one and there are some rough edges that need attention interaction with the developers has been positive and they're listening to user feedback there's an active facebook group where users can ask questions and share the initial launch of bricks got a lot of attention and 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 brix is very nicely priced brix is a builder with a lot of potential and i encourage people to take a look to see if it might meet your site building needs so that's the walkthrough and review of bricks there's a text version of the video available on the web tng website along with other walkthroughs reviews and resources i hope you found this video useful thank you for watching

Channel: David McCan

Views: 1,754

Keywords: wordpress page builder, bricks theme, bricks builder theme, bricks review, bricks and custom post types, best wordpress theme, best wordpress page builder, bricks walk-through, bricks walkthrough, webtng

Id: DfRIbEiwbKE

Length: 41min 9sec (2469 seconds)

Published: Sat Apr 03 2021