Mastering Bricks Builder - Creating a Dynamic Website & Blog

today we're going to see how we can start to put some of the key pieces together using bricks Builder to create a more fully featured website our example is going to be pretty simple but it's going to show you how you can combine things like repeater regions Advanced custom Fields templates all those kinds of things together to start getting a real feel for how you can use bricks in a real world project so let me show you an example of what we're going to create we're going to use a recipe blog as an example but you can use this for anything you want the principles are basically the same so so if we scroll down you can see we've got a typical archive page which will have a loop inserted into it with various different custom posts inside here each of these have unique information we've got taxonomies associated with them we've got custom meta Fields associated with them all those kinds of good things so you can see we've got things like cooking time calories recipe types and so on if we hop into any of these you'll see we have the single post template again we've got the same kind of information here different design but if we scroll on through we've got a lot more information including our repeater regions for our nutritional information so doesn't matter what you want to add in here you can add it in and it will be displayed inside the template you've also then got the information about the actual recipe itself how to go about it we've got the ingredients set inside you instructions and any other information you may want to include so now we've seen what we're going to create let's start creating it so first things first let's create the custom post type for our recipes so we've got Advanced custom Fields Pro installed you do need Pro if you want to work with the repeater region but if you don't want that part this tutorial you can get away with the free version without any problems at all so let's first of all go into ACF we're going to create a new post type we're going to add new we'll give this a name we're going to call this recipes and the singular recipe that'll autocreate the post type key we haven't created any taxonomies yet we'll do that at a moment so there's nothing to select we're going to choose this to be hierarchical and we're going to pop into the advanced configuration from there we're going to make sure we've got title editor featured image and we'll leave custom Fields enabled everything else can be left as it is needs to be active labels we're not going to touch those visibility what we're going to do is we're going to set this to be menu position one in this example and we'll choose an image that we're going to use for the icon we'll choose this one of a carrot that's perfectly fine we leave everything as it is we don't want to exclude this from the search for obvious reasons URLs we're going to set this to have an archive if you don't set this to have an archive it doesn't know how to use it so no archive will be available to you inside bricks itself if you want to you can set an archive slug so we'll set this to be recipes and we'll pretty much leave everything else as it is okay so once we've done that we'll hit save changes we now have a new entry right at the top for our recipe recip so the next thing you want to do is go and create a taxonomy to associate with this so we can group all of our different recipes together to do that again into ACF use the taxonomies option We'll add a new taxonomy we'll call this recipe types recipe type for the singular everything else will be autocreated again we're going to set this to hierarchical even if you don't use a hierarchy inside your sort of taxonomies and all those kinds of things it just is a much nicer way of working so I would always recomm men using hierarchical no matter what hop into advanced configuration again we're going to say the option for sort terms we're not going to worry about the default term make sure it's active labels again we're going to leave as they are visibility everything looks good there we're going to say we want to show an admin column it just makes it a little easier we're going to leave everything else as it is scroll back up to the top and set the post type and Associate this with our new custom post type which is recipe click save changes and now if we come back up to our recipes we have a new section called recipe types so the third and final thing we need to do with ACF I create meta fields and Associate those custom meta Fields with our new custom post type for all the additional Fields like the preparation time calories and all those kinds of good things so all we're going to do is we're going to come back over choose the option for field groups click add new one more time we'll give this a name we'll call this recipe extra Fields before we add our fields in let's scroll down to our settings and our location room rules and set the post typee is equal to our custom post type of recipe so now we associate the new metap Fields we're going to create with our custom post type so those connections are already there for us so now we can create the various different fields that we need so let's go and create some of our first Fields so the first we're going to do is we're going to change this over to be a number this is going to be our preparation time that will autocreate the field name but again if you want to change that you can do just make sure you don't have any spaces in there use either Dash or an underscore we don't going to worry about validation presentation and so on but obviously if you want to set things up inside you to make sure these things required you can do all that set it up exactly as you want let's add another field in again this is going to be another numeric field this is going to be the yield next up we want the number of calories per serving so again we're going to add a new field in again it's going to be a number field close that field down next we're going to add in a small text field we going to set this to be a text area we're going to name this recipe overview add another field this is going to be for our ingredients so we're going want to allow people to have a little bit more control over the actual way they sty content and so on so we're going to set this to be a wizzy wig Editor to give us a little bit more control we'll name this ingredients this time we are going to pop into the presentation section and we're going to set this to be just visual only and we're going to set this to have a basic toolbar we don't want to have too many options available there so again close that one down next up we're going to add another one in so add a field in again we're going to set this to be a wizzywig editor field label it's going to be instructions again we're pop into presentation set the same here as well just be visual only with basic there we go finally we're going to add in our repeater region so let's add this in scroll down until we find the option for repeater we'll give this a name we're going to call this nutritional information and now what we can do is we can add the fields that we want in now if you want more information about how to use repeater regions in ACF connecting that up with working with bricks Builder there's a video here you can check out which goes into a lot more detail so I'm going to skim over a lot of this quite quickly but I say if you want more information check that video out okay so we're going to add three Fields inside our repeater first of all let's add the first field in and you can see this basically opens up exactly what we just been doing this just sits inside a repeater and the beauty of working with repeater regions is we can have the same information or the same pieces of information but we don't know how many times that's going to be needed so people can just keep on adding and adding and adding so this works great with this nutritional information but you use it in so many different use cases so first of all we're going to add in the nutrition type we'll leave that set to text that's perfectly fine we'll close that field We'll add another field now make sure you you use the sub Field section not this add field at the bottom otherwise you're going to add a standard normal field in let let's add a new field again we're going leave this set to text set this to nutrition value again autocreate add one final field in I'm going to set this to call daily allowance and there we go so we've now created our repeater region now you can if you want to choose from three different types of layouts from table block and row we're going to leave this set to table works perfectly fine in this example and if you expect to have potentially you know 50 plus different records you may want to add pagination in for example there's probably never going to be more than about half a dozen so it doesn't really need it so now we've got everything set up we've got it associated with our post type of recipe we can now click save changes we've now created our custom Fields Associated that with our custom post type created a custom taxonomy to group our custom postype together and everything is now in place so let's first all come over to our recipe section come into recipe types and we're going to add a couple of different taxonomies in here so for example we're going to add things like main meal add a new recipe dessert add new recipe type We'll add one more in and there we go so we've now added a couple of taxonomies to group our content together for our a new custom post type now if we come into all recipes obviously there's nothing inside IDE here yet but you can see there's our recipe test we told you we wanted that to be included so all we need to do now is add a new recipe and we can see all of the custom fields that we've added in are now available to us so you got our standard title we've got our standard description and our standard featured image we've also got our recipe types which so our taxonomy and the three different recipe types we just created and all of the custom Fields underneath available to us including our repeater region at the bottom so I'm going to put one recipe in just to show you and then I'm just going to quickly duplicate and create a couple of other examples just so we've got some content in here so first of all let's give this a name we say this is a main meal We'll add our featured image we'll set the featured image add in a basic description preparation time yield calories per serving we'll poping a recipe overview then we'll poping our ingredients finally we'd add some instructions and then we've got our nutrition type which is our repeater region so all we need to do is add a row and now we can just put whatever information is required so nutrition type we'll call the first one sodium we're going to say this includes 24 millgram daily allowance we'll say 25% We'll add another row in again we'll put what values we want in and we'll add one more for good measure and there we go we'll publish this and we've now added our first recipe in so we come back out of here there's our Smash Burgers you can see it's a main meal type so we've got the basics in place now I'm going to go and just repeat that a couple of times to add some recipes in so we've got some content available to us and there we go I've added in a couple more recipes so now we have four different recipes so we got something to fill our designs out with so with that being said the next thing we need to do now is to create the two different templates that we need for our overall setup the first one we're going to create is the archive which will list all of our different recipes and then we're going to create the single post template so let's start off by creating that first template so we going to come over into bricks we chose the option for templates create and add a new template first things first let's give this a name I also like to make sure that I name things in a very logical fashion so when I look back over I can see exactly what any template refers to so we're going to call this recipe archive template we're going to set the template type to be archive if you want to apply template tags and so on to organize things which I would advise you to do when you start to get a lot of templates if you're dealing with a couple you know a handful it's not really worth worrying too much about we'll click publish and now we'll go and edit this with bricks now we've created our template we need to tell it where and when to use it even though we set this as an archive it doesn't know when we want to actually reference this so to do that we're going to come to the Cog for the settings in the top left hand corner and from there we're going to open up the template settings we have two different options here the conditions tells it where and when to use the template and the populate content is more for when we're building the template out choosing making sure we're actually looking at content that comes from the right part of our overall website in this case the recipes so first of all let's set our conditions so we're going to add a condition and we need two different kinds of conditions here we needed to be the archive template for our recipes but we also need it to be the archive template for any of the recipe types so things like our dessert main meals and so on we're going to use the same template for both so let's apply the conditions so first things first we want to make sure this is set to be archive then we choose the archive type so we're going to choose the option for post type then we're going to open the last option up and choose our custom post type which is recipes there we go so this's the first condition set up now you don't need to add another condition in we can add extra sections in here so even though it says post type we can add another one in so we can click this time we're going to choose categories and tags then you see this opens up a new option for archive terms click to open that up and you can scroll down and you can see we've got all terms recipe types so choose that option we also say apply to child terms so this is now going to catch either of those conditions so whether it's just the post type of recipes or it's going to have any of the categories things like I say like main meals and so on next up let's go to populate content we'll open this up we can choose the content type so for this example we want to choose archive posts then choose our post most type of recipes click apply and preview even though nothing's going to be seen it will now reload refresh and allow us to see that data so now we've set up the conditions and we've set up the populated content the next thing we need to do is go and actually build the template out now before we go any further let's just hit save to make sure that everything is committed now before we go any further I am using a couple of third-party tools to speed up my overall design process but I want to say at this point you do not need to use these tools at all so for example you can see I've got these little icons down the right hand side these are shortcuts to the common elements that we have in the normal elements panel things like your sections your divs your containers those kinds of things and also things like your headings your basic text and so on I'm going to use these because it speeds up my process but you can follow along by simply replacing anything that I used on the right hand side with the normal elements on the left hand side so just bear that in mind you do not need this secondly I'm using core framework which is a CSS framework which means that I've got global settings set up for things like my spacing my typography and so on to give me consistency and speed again you do not need to use it you can replace any of the values that I use in any of the instances with any kind of value you want whether it's M's Rems pixels percentages whatever I'm just using these to speed up my design process so don't feel you can't follow along just substitute what I use for what values you want to use hope that makes sense and it's clear here okay so the first thing we want to do is start to build out our template first thing I want to add a section with it in a container so we'll click to add that in again like I say this is all available to you using the options here you could just click on section and that would do exactly the same as what I've just done okay so the next thing I want to make sure that we've got a bit more space at the top because I'm using a floating header which overlaps I need to compensate for that so I'm going to se hit the section make sure that's selected come over to my Styles into my layout and I'm going to use a margin at the top to give me some more space this is where like I say I'm going to use core framework but you can put a value in right click and I'm just going to choose the option for 3XL and you can see that now gives me pretty much equid distance above the top and bottom Okay so we've now got the basics in place now we're going to create the card design that's going to make up the bulk of our archive and then we'll apply a loop to that so what we're going to do is we're going to choose the container to make sure that's active we're going to add a block inside there because this go full width gives us most control so let's make sure we got our block selected and we're going to add in first of all a heading then we're going to add in an image and finally we're going to add in Rich Text so these are the three key basic elements that going to make up our card design now the next thing we want to do is go and change the content to the right content at the moment it's just putting filler content in so we'll select our heading we'll come over onto the left hand side go into content replace this I am heading we'll get rid of that completely going to click our little lightning bolt for our Dynamic data and from there now again this is something that you won't see this is part of advanced thema you'll just see a drop- down list all the exact same options are available just scroll to the list until you find what I'm showing you so first thing you want to do is choose the post title and you see that now pulls in the wrong information but that's perfectly fine for now we haven't created the loop so it doesn't know what to use select our image come over set the dynamic data we'll select it this time we're going to choose the featured image option again it doesn't know what to use at this point so don't worry about that and finally we're going to come to our Rich text we're going to select this little block of text and remove it click our lightning bolt come over to post and from there we're going to choose post content and from there we're also going to come down underneath which says the word limit we're going to click and we're going to set this to be 25 so we can limit the number of words that are going to be displayed for longer content Okay so we've created the basic outline for our card now we need to go and create a loop to tell it how we want all of this to work so first things first let's click on our block and what we're going to do here is we're going to come over and choose the query Loop under the content on the left hand side click the little sort of Icon and from there we're going to tell it what content we want to reference so we're going to choose posts choose the post type to be recipes we're going to say order by publish date you can set ascending or descending however you want and we'll set this to have something like six posts maximum Okay so we've now created our Loop so you can see now we start to see the right information being pulled through there's our four different recipes but it looks absolutely rubbish let's Rectify that let's choose our container and from there we're going to come over to the left hand side again we're going to change this display from flex and change this to grid I'm going to come to a grid t template column we're going to do 1fr 1fr we now have a nice two column layout so everything already looks considerably better before we go any further let's click on save to make sure we save that but obviously things don't look quite right yet we need to start some styling and make things look a lot better well let's deal with that next now for good accessibility we want to make sure that these are not being left as divs we want to set them as an unordered list and list item so what we're going to do is we're going to make sure our container selected and you can come over and you see the HTML tag is set to div we can click and we can say we want this to be an unordered list we click on our block which is our card design which we'll rename in a moment we'll select that do the same thing again this time though we're going to change this from div we going to set this to Li for a list item so now that semantically makes a lot more sense each of these now is going to be a list item as part of an unordered list now let's start to organize things a little better and then we're going to start styling things to make everything look a lot nicer so first things first we're going to come up to our container and we're going to call this recipe Loop container then we're going to come down to our block and we're going to rename this we're going to call this card so making sure we've got our recipe Loop container selected we're going to come over to the left hand side and we're going to set the gap for our grid and again I'm going to use one of my values from core framework but you can use a standard arbitrary value whatever you want to use okay so there's the first part done now the next thing I want to do is apply some Global classes to the various different parts of this so we can style things in a consistent fashion so with our card selected what we're going to do is we're going to give the card a global class so we're just going to come over we're going to call this recipe dasc card so now we've named our recipe card as in recipe Das card we're now going to use bem name to name the other three elements now B just stands for Block element modifier don't worry too much about what all of that means it's just a naming convention that makes life easier and if you hand this off to someone else that's accustomed to working with bem naming they'll very quickly and easily see exactly what classes you've set up and how they relate to various different components we've got recipe Das card for our card design so what we're going to do is we're going to create another one now for our heading so we select the heading we're going to do recipe Dash card so exactly the same we're going to then do two underscores and we're going to call this heading so what we're effectively saying is that this heading is associated with our recipe card that's basically all we're doing here hit the enter or return do the same thing now for our image so recipe Das cardor image and then finally our description so again recipe Das card uncore uncore excerpt and hit enter or return so now we have classes applied to the card The Heading the image and the rich text or excerpt area and we can reference those and because we're using bem naming we can see when we take a look at our card and then we take a look at heading we can see that this heading is associated with our recipe card same thing for our image same thing for our excerpt just makes life a lot easier it's pretty simple and standard way of working okay so now we've given those classes we can start to style things so for example if we come to our image we can now come over making sure we've got that class selected come into style for example inside there we're going to come into our borders open our border option up and from there we're just going to connect our radius I'm going to use again one of my Global classes we're going to set this radius to be small and now we've Associated that and connected it up so so that value now is being applied on a global class level it's just a nice simple way of working and anywhere else we want to use this if we use the exact same naming convention all of those will be changed if we make a change to any of the instances of that particular Global class it's where working with a tool like bricks makes life so much quicker and easier okay so next up let's choose our heading and let's start the style thing so again making sure we've got our Global class selected we can come into our typography we can set our styling and size and so on inside you so again let's set things up let's go for something like large we'll set our font width to be something like 600 capitalize the first letters job done and if we want to we can do anything we want then on the actual text at the bottom but that looks okay so we're going to select our card now and what we're going to do is we going to come to our content again making sure our recipe card is selected so we're styling it on the global class level not the ID level and we're going to put a row Gap in to separate things out a little bit we'll say 2xs so that now gives us a little bit of space between the image the title and the details underneath so let's just click save on this and take a quick look so now we can see we've got everything in place and we can see we've got our burgers and our strawberry fool and all those kinds of good things all done so that's the basic starting point now let's go and add in some more information some of our ACF data that we created as part of our custom post type so before we do though let's just make sure we've got our card selected and just just make this look a little different so we're going to come into our Styles we're going to come into our layout into our padding and connect all of these together apply a little bit of padding around these not going to go too crazy something like medium looks pretty good then what we're going to do is we're going to come down to our borders and we're going to apply a light border to this so we'll connect all of these together set a one pixel border set this to be solid and we'll just choose a light gray color just You've Got Something There to separate these out and finally we're going to come into our radius connect those together and we're going to make these a little larger so we're going to set these to be medium because whenever you're working with any kind of radius you'll see that I've set this one to be small so it makes Visual sense when it come to the actual outside ones that the The Next Step Up just everything looks nicer as they get further into your design those rounded corners should get smaller and as they go further out they should get bigger that way you get a visual hierarchy with the corners okay so again let's just hit save and we've now got our basics in place so next up let's go and add in some of that additional metadata so we're going to add in a rich text element we're going to just click to add a rich text element we're going to position that underneath our heading you see that's put the basic info in before we go any further we're going to give this a global class so again we're going to use that bem name in so recipe card underscore uncore we're going to call this meta there we go so with that class selected we're going to come over into our Styles into our typography and we're going to set this and make it just a little bit smaller so we'll set this to be small there you go that looks a little bit better and now we're going to come to our content we're going to replace all this we're going to delete what's there going to call this prep time colon and now we're going to click on our little Dynamic data icon come down to ACF this time and what we're going to do is we want the preparation time choose that option from there and you can see that now replaces with a value so now we we can just put in mins and then we can just add anything else we want in so we'll put yield in again same thing going to click on little lightning bolt to come to ACF choose yield and you see that puts the information inside there and finally we're going to add one more in which is going to be the actual category or categories that this particular recipe is from so what we're going to do is we're going to click on our little lightning bolt again this time we're going to choose the option for terms and we're going to scroll on through until we find the option for post terms recipe type choose that option from there and you can see that now puts in in this example desserts main meal and so on it also automatically makes it a link which is pretty cool which is going to take it to that other template that we set up when we set the conditions up for any of these sort of subsections of our taxonomies and so on hope that makes sense Okay so we've now added in some custom information so let's make these titles a little bold so we can see what they make sense to there we go now let's just click on Save let's preview this and as you can see now we've got all the information available including our custom meta information so the final thing we need to do is just make these a clickable link to go and actually take a look at the recipe itself cuz at the moment you can't click on anything to go anywhere to do that we're simply going to choose our image and from there we're going to come over to the content option come down to where it says link we're going to say other URL our link type is going to be external URL click our little lightning bolt and from there we're going to choose the option for post URL again you won't see it like this you'll just have a long list just scroll through until you find the exact same value as I'm choosing choose that option and we are done so again we'll save that and let's go and test it out so let's view on the front end that's now clickable so if we click on our strawberry Fool For example that'll take us over to a really ugly looking page that has only the most basic of information and not everything we need so that's the first part done we've created our archive now we're going to go and create the single post type and add in some of the additional information including our repeater regions okay so now the archive is finished time to move on to the single post template to show our full recipe and all the relevant details so back into templates inside bricks we're going to add a new template again give it a name that means something come over to the template type and from there we're going to choose the option for single we'll publish and we'll edit with bricks like we did before we need to make sure that we set up the conditions for where and when this is going to be used and also to populate the data so we're going to come over to our settings into our template settings option into conditions add a new condition this time from here we're going to choose the option for post type as opposed to Archive and then we're going to choose our recipes next come into populate content and from there we're going to choose the option for single post page click and we're just going to search for one of our individual recipes so we'll search for our cookies and we'll click on okay hit apply and preview and like before this will reload and then we're ready to go so just to make sure we'll click on Save and like we did last time we're going to go and add in a section to start off with again we'll choose our section and we'll just apply a little bit of styling to this to give us a bit of space because of our navigation at the top so we'll set 3 XL so like we did before we'll select our container we'll add in a heading we'll add in an image and we'll add in some rich text and again like we did before we'll set the basics up make sure everything is working and then we'll start adding those extra little bits and pieces so first of all let's choose our heading come over to our content remove this placeholder choose our little Dynamic data icon and choose our post title there we go choose our image click our Dynamic data icon choose our featured image finally click on our Rich Text remove what's in there in the placeholder click our Dynamic icon choose our post and this time we're going to choose the option for our post content there you go we now have the basic elements being pulled in so like we've done before we can now start to add in extra things we want give these Global classes making sure that everything is named accordingly and then we can start styling everything the way that we need so let's do that first of all we'll change our container and we'll just call this recipe container what we're going to do is we're going to give that a global class as well so come over to the left hand side we'll call this recipe Das container and hit enter so now we've given that a global class and now we can just do exactly same thing using our bam name in for the elements inside there so like we've done before recipe Das container underscore uncore heading and just to make life a little easier I'll copy this first part hit enter to say enough for our image so come over paste that in image hit enter finally there we go so now we've applied those classes like we did before as well we're going to come up to our recipe container making sure we've got that class selected come to our row Gap add in some spacing so we'll do small like we did before choose our heading come over to our Styles and like I said we're stying everything now on the global level so again if we wanted to make sure that these were using the same values we could set up a global class for this and then apply it any we want and override things it's just it it's super simple once you get used to it once you start to sort of forward plan how you're going to do things so for this example we're going to just set this up with our typography set that to Excel and we'll set our font style and white and uppercase there we go so there's the first part like we done with our image we'll select our image making sure the class is selected come over into our borders from there we're going to apply some rounded borders on this we'll set medium like we've done before there we go so we now got the basics all in place this is just our basic information none of our ACF data so let's start to add that in now we're going to add another rich text area in we'll position that below the heading above the image like we've done before we can now give this a class if we want to we can also set up what values we want inside there so for this example let's come into our content remove this placeholder start adding in our data so we start with our preparation time like we did before we'll click our Dynamic data this time we going to come down to ACF and we're going to say preparation time couple of dashes inside there here make this bold you kind of get the idea this is just basically repeating what we've done before so I'm not going to go into all the detail and cover every single aspect of this I'll just do some of the basics this time we'll do calories again we'll click our little Dynamic data icon and we'll choose the option for calories per serving and the final one we'll add in is going to be categories so again click our little data Dynamic icon this time we're going to choose the option for terms and like we to before we're going to choose the option for our recipe types and we'll just make that bold there we go let's hit save and as you can see now that's put in the relevant information all in there for us okay so that's pretty cool and pretty easy to do now let's come over and I want to put sort of split this into two columns now we want to put the nutritional information on the right hand side and everything else on the left hand side so the easiest way to do that is we're going to come to our Rich text we're going to add in a couple of blocks we're going to pop in our Rich text into the first one next up we're going to add in a container and put both of our blocks inside that container there we go so now what we can do is we can simply come to our container set this to be grid and we going to change this to 2R for the left column and one f for the right column and you can see now we split that into two columns and finally we're going to come in here here we're going to set our spacing which I think we did medium before there we go so now we got our nice simple two column layout so now what we can do is we've got some basic info in there we now need to just go and add in the extra ACF data so it's all very simple and straightforward making sure you've got the relevant Block open we'll click to add in more data so we'll add Rich Text in one more time make sure that's selected and delete this placeholder information come down Dynamic data over to ACF choose our ingredients in this example we'll do this one more time so we'll just simply duplicate this choose at that change that from post content this time again we're going to come into ACF we're going to go into our instructions reposition those you got the wrong way around which I have okay so that's all that done so we're going to come into our block again like we've done before we're going to come into our row Gap and we're going to set that to be small so we can separate things out and finally we're going to come into our Rich Text for our ingredients and from there we're going to come over and we're going to give this a class so like we've seen before this is our recipe container and underscore underscore ingredients so you don't need to apply classes to everything if you're not actually making any changes to them so for example where we've got the the instructions and things like that I will leave those as they are I don't need to apply a global class to them because I'm not actually doing anything to them so you can leave them as they are this Rich text let's change that from Rich Text we'll call that ingredients just so we can see what this actually relates to and now what we've got that let's go into our Styles and let's just style that so it looks a little different so we'll connect these up we'll apply some padding go for something like medium we'll set this to be a minimum width of 100% control background choose a color we'll go for this light color come into our border connect these and apply a one pixel border all the way around set it to be solid we'll make that a slightly darker blue something like this and finally we'll connect these and we'll set some rounded Corners so again we're going to go for medium and there we go we now have things laid out so now obviously we want to make sure that everything is positioned the way it needs to be so we'll just drag that up in between the two of those and there you go you can see we've now inserted that element so obviously there's a lot more you could do here with styling and design and all those kinds of things but this is more about showing you how to build it and how to get things set up and then you can design this however you want okay so we're now ready to move on to the nutritional information in this right hand column so first of all let's select the column we're going to add in a heading going to change this over and call this nutritional information when we're at it let's rename this left hand block to nutrition block and for each let's just resize this to make it get a little smaller so we'll choose our heading come to our Styles and we're going to come in our typography set this to be something like large there we go okay now we've done that we need to put in a block couple of blocks underneath to kind of break things out we've got some information the left hand side and the right hand side we want to separate out so to do that we're going to add in a couple more blocks we add our first block in we'll select it and we're going to add two blocks inside there so this is going to kind of the parent container for this and then these are going to be the left and right hand sections so what we'll do is we'll choose our block and from there we're going to come over to our content we're going to set this to grid we're going to set 1fr 1fr so we now have those side by side and everything looking good I'm not going to worry about putting a gap in between because the information is going be pushed over to the left hand side and the right hand side there's a natural gap between anyway okay so first of all let's choose our first block and inside there we're going to come over and we're going to add in some Dynamic data so we're going to add in some rich text choose our Rich Text block and get rid of this information here we going to choose our Dynamic data come down to ACF and this time we're going to choose our information from our nutrition options which are part the three different fields we go inside our repeater so the first one is our nutrition type so we'll add that then we're going to put a dash and we're going to put in another field so we're going to click again down to ACF this time we're going to put the nutrition value there we go so those are the first two pieces now if we scroll up you can see nothing's really showing up inside there that's because again we haven't set a loop up on this so once we set the loop up this will start to fill the data route so worry about that in a second so we select our second block which is our right hand block again we're going to use the option for Rich Text choose that rich text block delete our placeholder information back into our Dynamic data and choose ACF this time choose our daily allowance choose that option from there we'll align this over to the right hand side make sure we got our block selected and we're going to set this again over to the right hand side as well to make sure that sits on the right location okay so now I'm going to come back up to the parent block the one that sits above these two individual blocks the left and right down block again hope that's making sense what we're going to do is we're going to come over choose query Loop then come down to our query option and from there we're going to change the type and choose ACF repeater nutritional information this is one of the reasons why I love working with bricks I don't need any thirdparty tools to be able to handle things like repeater regions so now what I need to do is choose that option I'm not going to worry about a template or text or anything else you can see that's now pulled in the relevant information for me we're basically done on that side of things now what I need to do is apply a little bit of styling to this to make it look the way that I want that's all really super simple so we can come into for example our Rich text and what we can do is we can just apply again a class to this so we'll just call this nutritional text what we're going to do is we're going to click on the second option and we're going do the same thing again there so nutritional text so we're going to apply the same class to the both of these and you see now both of those have this blue outline so now what we can do is any changes we make to this will apply to both of them because it's used in the same class so now if we come into style for example choose our font size and we'll set this to be something like small even though this isn't showing properly which is a kind of Quirk you get with bricks Builder that now has picked up those relevant values and we'll apply it to all of these inside the loop so if we save this we'll refresh and see if that'll actually update correctly it doesn't we'll view this on the front end you can see everything is showing up the way it should do inside there and if we take a look all our styling is in place all our information is in place you can see everything is showing up inside there for the repeater got our custom information if we click on this category now which will take us to that template we created for the archive and applied that extra condition to it you see we go to desserts that will show us all the desserts and if we click on this Strawberry full for example you can see there's our nutritional information all the information about how to cook it or how to make it or whatever the case is everything is laid out really all set up in a very simple and straightforward fashion now once this way way further you could go with this and I would take this a lot further when it comes to the styling and adding extra features in and things like that but what this should demonstrate is how you can take those component pieces work with archives work with templates work with conditions work with Dynamic data work with repeater regions and so on all inside bricks itself with no additional plugins required to be able to create really quite Advanced websites using some pretty straightforward techniques now as always I'd welcome your feedback if You' got anything you'd like me to cover anything you like me to sort of expand upon from what I've covered in this video let me know in the comments section down below and if you want to find out more about the tools that I'm using with bricks to create these kinds of sites and speed up my workflow you can check out my blueprint right here take a look at that as always my name is Paul C this is WP TS and until next time take care [Music]

Channel: WPTuts

Views: 4,452

Keywords: WPTuts, bricks builder tutorial, bricks builder, bricks wordpress, bricks templates, bricks archive, bricks single post, bricks builder wordpress, getting started with bricks builder, web design, wordpress, wordpress tutorials, website, bricks, bricks tutorial, bricks filters, filter & search wordpress, wordpress blog, wordpress blog tutorial, wordpress tutorial, how to build a website, wordpress page builder

Id: ym31vWcuttg

Length: 43min 2sec (2582 seconds)

Published: Thu Jun 27 2024