Bricks Builder Tutorial - Building Templates For Blog Posts, Category Archives, 404 Page

hi this is vance in this video we look at templating feature in brix builder so first off use the timestamp in the description below to quickly jump to the section of the video use the links in the description below to support me in future video creation and lastly please leave a comment below if you have any questions and i'll try my best to answer them so if you don't already know brix is a new wordpress page builder in the market the first version of bricks was just released mid-march and they're running a special discount lifetime discount of their lifetime licenses so it costs 149 us dollars for a thousand websites comes with lifetime updates lifetime support lifetime community access and more so the wordpress the woocommerce builder is development but it should be up in maybe about a few months time and before then the lifetime license discount should be still around so if you're watching this uh early on you might want to if you're still on the fence you can just watch these tutorial videos and decide for yourself later on okay uh in this tutorial we'll go through how to use community templates and breaks for blog posts templating customizing a little to show you how it's like and then we'll build blog posts archives for category and tag pages and lastly a 404 page so let's get it right into the wordpress dashboard and start building so if you watched my previous video you would know that we've built the global footer global header and now we're going to build a blog post template so as usual you just click on add new then i'll just name this as blog post template then i'll select this make it a single [Music] template type publish it okay then edit with bricks so you can see the header is already there and the footer is already here then i'm just going to populate the content with a sample blog post so that we can see how it looks like when it start building all right okay so we're going to go into community templates so it's this button right over here then go to community templates and then we're going to filter by single and we're going to find let's say we can even preview how it looks like so let's click on this i icon and you can see how a blog post template would look like if you were to use it so i think i'm going to try to use this it looks quite okay and then we're going to customize from there so i'm going to just click on insert template and then that template will be inserted and it looks like we already have a blog post template all right of course we're going to do some customizations here maybe i'm going to first increase the size of this of this section so that's not so narrow maybe increase it to like 900 pixels huh or we could even use percentage right to go for like 75 percent or and then adjust the breakpoints later on so maybe on desktop will be 50 but then as it comes down to tablet if you want it to be 70 oops or maybe even 80 right okay mobile landscape uh probably on the go for like 90 and for mobile portrait you can you can just stick to 90 this looks pretty good right then maybe okay because there's no image here we're going to select the dynamic data select feature image then it should voice it out it's interesting probably doesn't have a probably this this particular pose doesn't have [Music] doesn't have a featured image let's try any one yes oh it's just a random feature image okay but that's better than nothing right okay so this is the title right we wanted the page one and then here is where we want the meta the meta uh data so you click on the first one maybe we'll look at modified date we have a type text in here so we can put so it says modified on update which is pulling directly from the post publish date meta do maybe you could buy the author name right then maybe the number of comments zero comments or maybe just let's see what would be good yeah i think we can go with [Music] comments yep okay we can add more meta if you want but i'm not going to do that i'm going to instead come down to add a new element i'm going to add taxonomy i'm going to drag it in maybe it should be a bit higher okay so maybe let's reduce the margin a little bit to 16 pixels [Music] then this doesn't have any tags but there should be categories yep there are you can change the style if you want to i'll leave it as [Music] let's see maybe i'll give it a start you can change the icon you want it your heart can can it can be anything that you want here and of course they have a white selection of icons that you can use i'm going to use i'm going to go with tag this looks good and i'm going to center like this so i'm going to come down to auto width and i'm going to set this to if it allows me no it doesn't allow me to do or go here so i might have to come down here to just type in some css margin left of course if you don't want to if you don't want it to be centered that's fine either that's fine too but in this case it looks better if it's center line so i'm just going to do that then the feature image is here right you can change the size of the featured image which you want [Music] maybe you don't make it stretch or if you want to stretch it's fine or so now if you want to change the size of this of course you would might have to come down to the column and change the width to something like maybe in pixels 100 and this is where you would have to come to the section layout [Music] come down to the line items center but they're not centering for some reason if you have to come to the column and center this nope oh it's the roll it's the road that's causing it yeah no someone's not working might be about here either way i'm just gonna change this it has to be about i'm not sure what i'm lying doing wrongly but uh it's weird okay i'm just going to leave it at 100. then we'll figure it out later okay so the content is here the author box is here you can add in other stuff if you want so the buyer is there but i don't i don't have any bio added to this admin profile and then this is a post navigation where you can even add a label if you want you can have previous next post right or you can just have it as minimalist as it is here and then this is the related posts so you might want to add in a header at the top center like this oops okay change this to h2 then related all right and then you under related posts you can adjust things like uh if we want why is it so weird was it changing for some reason oh it's ordered by random that's why okay so under fields maybe we want content image let's see if we can add something like uh closed title yep and then maybe at the top you can add in the post date then we have that vertical line and in the author name for example right or you could add in the categories yeah looks okay right but of course the styling might be a bit might have to be a bit different so the font size we're going to bring down to 12. that's okay even 10. i'll go to 12 and maybe the text color can be a bit different [Music] yeah i think this is this looks good right and then style the post title might want this to be h3 okay typography maybe the font size can go down to like 20. yeah it looks better line height maybe 1.2 let's go a bit 1.4 looks quite okay [Music] and there is a little bit too close right so i want to add in some margin at the top i think let's go to 12 is fine okay looks quite okay to me uh i i could add in oh wait post title link okay that might be a better one because then people will be able to click on it right [Music] is how you do it right i think it looks oops it's only yeah it looks like okay on there is this pre-period ah so this can be clicked on okay now now this makes more sense instead of just to post title right yeah and then can you click on okay right click on the category uh category links [Music] all right i think i'm pretty happy with this of course there can be a bit more styling but i wouldn't go into too much uh trouble and then the the comments can be here so if there's a comment it will appear but for now there's no comment here so it's just going to be a form but i think let's take a look at a post that has some comments okay looks pretty okay it's not the best it's not the most style but that's fine and then it shows you no feature image set which is fine because we saw it just now already it's quite wide that's fine i think i still want to decrease the yeah i think this this looks better 900 750 yeah 750 that's just fine okay yes let's see how it looks like on the front end maybe if we go into another post yeah it looks pretty good i mean it's a template after all then oh why is this showing when could be a part because it's not showing here right content fields there is no i don't have uh i don't have the excerpt but somehow it's showing okay either way that's how you can easily add in template there are some bugs of course but in general i think it's quite okay i'll probably report this this this part that it's somehow showing by default or something [Music] yeah um of course what i would like would be maybe the ability to add a button let's see ah i can add a button but it's not immediately clear and then of course if i want to add in post link [Music] right it i'm not sure how how i'm supposed to do it so one thing i will i would like to happen is the ability to maybe add an item and then add a read more button or something there's probably a way to do this even without an update but it's not very intuitive at least right it's like overlay content [Music] yeah so okay i'm happy with this i'm probably going to go okay next i'm going to create a archive template i'm just going to add new block archives this is an archive publish it edit with bricks then i'll probably want to populate it with archive [Music] term maybe okay apply preview first okay then i'm going to add in the template community templates archive sorry this looks quite okay and then we can this is a good starting point at least and then after that we can style it or for some reason there are other i think the other block archive templates that we can use i think we just go with that one and then we can edit from there okay so i guess this is where it gets interesting because if i'm not wrong i'm able to hmm add context the title not sure what this means but i would want to add in let's say a header this is the post i do it yeah so i'll edit the header and then this is probably going to be archive title [Music] okay i did not have time title probably change this to light then link to dynamic data [Music] okay should be archived title and then [Music] this should show up as like whichever category that you're in in some i guess 100 sure honestly this is the first time i'm trying out so let's see me fumble also yeah archives what if i were to click on category yeah category general so yeah this is correct so i'm just going to remove this i'm going to maybe increase the font size for this to be 48 [Music] this [Music] there is uh okay let's ignore that uh i'm going to [Music] really customize the post element so post type date is descending probably yeah this is fine i'm not going to select all this because when you're selling all this i guess it will mess up with the with the uh with how the template generates the content so currently right now it's blank right but it's all right i'm gonna we're gonna customize it uh let's go to fields first field would be the let's add a new field yeah this is the one that we want okay the link the the post title that has the link i'm pretty sure there's documentation that uh that explains how to add a link to anything that you want but um i'm not gonna go go into that this video just going to do as much as we can so maybe modify date modified um then maybe this one can be the author okay you want to add some margin at the bottom probably want to change this to be a bit smaller yep that's good you change the color as well to less yeah so that it doesn't distract the user from the bottom parts then maybe change this to that's fine i wanted to put like category or something but this is already the category archive of the specific category so it doesn't make sense to put a category there i think this is pretty okay oh yeah there are kind of limited styling options now i guess i guess when the repeater element which allows you to just create a like maybe a card or something and then have it repeat multiple times so it's uh so we allow it allows for more customizable customizability so for example if i want uh [Music] the the date the date to be in the top left hand corner or the author to the top right hand corner then we have the the tags not categories for tags at the bottom with colors and everything i can't really do that here at least not without writing a lot of code so that would be something that i guess they are looking at also i believe repeated is one of the most requested features is also we probably will see coming soon or at least in the next few versions [Music] oh right we can actually align this [Music] accordingly if we want bottom right yeah center so i will go from middle center this looks the best so that even if it's long yeah it will still be centered also doesn't have an image [Music] okay navigation if you want imagination there then i guess we can [Music] there's no option to have infinite loading as well so i guess that will be something that we'll look at in the future [Music] uh yeah and that's probably it there's nothing much that we can do it doesn't seem like that that there's a whole lot of customization that we can do but of course if you want you can customize for specific categories so you can choose let's say business category to have a specific featured image or a backdrop image here which i can if i want to uh so let's say for business category or rather since i'm in general i'm gonna change and it's empty right now right so i'm gonna change it to just general category to show it works right then i'm going to select the section select an image maybe just any random image here insert okay then i can adjust maybe bottom center yeah it looks a little bit better and then maybe i can even change this to instead of just three two columns i'm going to change it to two columns yeah you can change the masonry if i want so if the featured image has different aspect ratios it doesn't just all get cropped like in a grid right or i can read metro so it's a bit more i guess not so straight in some ways it's not so boring but i'll i'll say grit will be the safest then you can go up as many columns as you want of course the more columns you go the weirder it looks so i think two columns works the best but also because of the aspect ratio of the feature image which you can edit as well and maybe let's say 16 by 16.99 and then it looks better on a tree column great [Music] i'm just going to edit the fields i'm going to make this [Music] post title a little bit smaller maybe like 18 now 24. yeah it follows good just now it's a bit too big that looks quite okay now save it so this is the placeholder image right now right where i refresh it changes to the head to the specific image that we use just now and then if we were to go into another category huh yeah it's not set because i think i should just duplicate this so you're showing this right now because there is no template that uh that is set for this particular category archive so what i'm gonna do is i'm going to duplicate this archive but i'm going to look at this interesting i guess i could export okay exploit this template import template and then what up since i've imported the template i can edit this [Music] probably change this to catch and then here is where i would set the conditions to be archived categories everything else except the general category save now refresh ah okay let's change this image something else so that we can see the difference we're just going to change this to like this insert bottom center okay that's good so now in general it's still this image that we saw just now oh there's a nice parallax to track yourself and then uh the education category is now a different image so this is of course uh only feasible if you only have maybe like five or six categories if you have hundreds of categories then this might not be feasible you might you might want to do i want to have your template to catch all the categories instead and then just set one generic image for that so that's how you can create a an archive page uh really quickly using one of the templates that's already available so of course there are a lot more customizations that you can do maybe adding a custom description here like i mean you want two sentences to describe uh the archive for let's see this is this is the catch oh and so maybe for maybe if i want a different one i would [Music] i would go in all right okay i'm going to show you something quite neat so you're at the editor back end right you're in the bricks builder now you want to update another template you can just click on templates here and then you can just edit directly from here so you won't you don't have to click so many times you don't have to wait for the backend to learn everything you can straight away come back you can straight away just edit the template from within the builder itself quite neat so this is the this is the template that uh it's applied only for the general category right so maybe i can add in like uh some sort of description here and then here okay just add some margin at the bottom [Music] okay and this is the description for the general query page and then of course if you want this to be on all your your category pages maybe you can even set this to be dynamic right so i don't have to type in general i'm gonna go to the front end oh wait why is it this is weird for some reason the category general page has several categories uh okay maybe it's because yeah i think this should be it okay let's refresh and see yes this is uh okay it's a little bit weird because there's this this is prefix over here but you get the idea you can add in dynamic content uh here as well but i'll just default it to general i'm gonna build this right okay so you can see this is for the general category page and of course under education you won't see that yeah the description over there so this is these are some use cases i guess for uh creating category archive templates and the last part which is 4 4 page i would create a new template which i can just do it from here but i'll i'll just go into the back end here to edit a new one this is a 404 page and then select the error page publish it live with bricks and then by default if i'm not wrong oh it doesn't set but this has to be set to error page okay and then of course i wouldn't i don't think i need i don't think i'll be able to apply preview anyway because yeah it wouldn't be pulling from a specific page anyway all right i'll just add in section i think there are templates for this as well arrow pitch yeah it's not the best of course but because it's job whoa what's going on why is there so much gem ratio okay anyway this is oh is it svg file okay i just delete the svg file and replace it with something else oh no i don't even need to replace anything else i guess i could add an image the image doesn't look pretty arrange it a bit it's a lot of margin over there yeah okay maybe change this image to something like this this random image and then probably you want to bring it down to medium large or even thumbnail no really much is fine on bricks medium yeah this is good whoops the pitch is gone it looks like your requested piece of things is not your fault okay uh do i wanted to search maybe not just back home and then save and look at the front end and then you just change this to like a random thing oops that page is gone but somehow ah i think we have to save it but why is it not could be about also not sure let's try again ah okay we're showing right now so very quickly you already have a 404 page that at least you wouldn't lose traffic you can easily click on the button right now it's not linked but you can click it to maybe like view our latest posts or something or maybe in fact we can put posts here then edit this maybe showing all is a little bit uh overkill maybe just two all right then [Music] this could be uh maybe you can select specific ids [Music] so you can reselect a few maybe these two is to let's say for example these two are your most popular posts that you want people to read right and people come to the 404 page usually most of the time you'll just see that it's an error page that there's nothing found maybe a random back home image but then if you put in like other links to other pages of your website maybe you can still steer the user back to i guess some parts of the website that might be able to convert them or might be able to interest them because if it's a very generic uh 4-4 page um most likely the user will either click on back or drop off totally so having something for them to click on at least would reduce the bounce rate would maybe increase dual time everything that is related to good seo practices so yeah so this is just an example there are a lot of things that you can put in of course maybe you can put in a free book download anything right the the the amount of things that you can do with a 404 page are endless and the i the main concept of the main idea is just to allow people to uh just to maximize other traffic without allowing them to just drop off like that so yeah i guess that's pretty much it for this video um hopefully you found this useful and if you like to buy bricks you can just go to bricksbuilder.io and grab your license there they don't have an affiliate program yet so uh i guess the best way you can support this this video is to i guess uh if you if you like to host on cloud ways which this this demo site is posted on it's blazing fast you can you can sign up for a clockwise account to help support this channel and future video creation but otherwise i think bricks is pretty good of course there are some important blocks that they have to fix that's precisely why they're running uh running it at this kind of price for a thousand websites for a lifetime it's one time payment and it comes with a lot of different stuff that are included in all future versions right so you buy this you pay this one-time fee you get a lifetime license for a thousand websites and all this other good stuff and i'm pretty sure there's going to be even more in the future and how you can see is by going to their website going to roadmap you can see what's in progress as you can see woocommerce builder is in progress container element to build any layout so this is a diff uh a div element instead of the current structure of section row column and then a specific element so if i want to just put in a header i cannot i have to create a section and then the section will automatically generate a row and column but with this new container element which hopefully will be out in a few weeks um it will improve the performance even further so it's really blazing fast but this is going to improve the performance even more and then there'll be other stuff up next optimized asset loading which is more even more performance focused so it's just going to get even better and better right and then lazy loading background images this is already built in in the wordpress core but for page builders it's something that is i guess not out of the box kind of thing so this is going to be included in fixed builder as well styling via css classes and ids so this is available in oxygen in some other page builders i guess where you can just set in a css class here and then style and then copy the css class and paste it on any other element and the css styles will be ordered over so this is not available right now but pretty sure it will be available in the future with when this is up right and this is not just all of course there are other ideas in the in the in the idea board that you can unfold as a user i mean you can still avoid if you're not user it doesn't but it doesn't really matter uh to you so things like custom breakpoints this is something that is important repeater control right acl repeater report i don't really have acf so i'm gonna vote this uh elementor template kit brakes converter this would be quite important because i imagine there'll be some some users thinking of switching for elementor to breaks since brics offers a lifetime license deal right and all these are the different kinds of ideas that were published by users so whatever item you have you can submit here and it's going to impact the features in future versions then you can check the change along here as well so all these are just some of the stink peaks into what comes up in breaks in the following days when the one or two months and if you're looking for a lifetime uh license or lifetime view for page builder for wordpress then i would honestly think that bricks is something that you can look at of course there's oxygen as well but oxygen is a bit more developer friendly and more developer centric but bricks as you can see it's a bit more friendly for someone who doesn't know how to decode so there are a lot of elements that are available that you can do there are a lot of settings that you can set for every single element right out of the box and in a future video i'll also go through a free plugin for now fixable i believe it's by the the authors of dv supreme so they've really started building extra elements for brics so this is just one uh one wordpress plugin developer and apparently they are quite well known in the market [Music] so just like a week and they've already have had a few elements for bricks so it's going to look so as more and more developers develop like extensions and everything for bricks right it's going to be even better so yes if you found this video useful please like this video leave a comment subscribe anything and let me know in the comments if you have any questions and that's pretty much it check my other videos if you want to know more about bricks and see you all again bye

Channel: Vance Wong

Views: 626

Keywords: bricks builder, bricks builder templating, bricks builder tutorial, bricks tutorial

Id: fcq8HRXUAn8

Length: 43min 6sec (2586 seconds)

Published: Tue May 11 2021