Bricks Builder - Introduction to Dynamic Content

i'm sure you've heard about the latest page builder for wordpress that's hit the market brix builder if not i would suggest taking a look at the video i released recently and i'll give you an idea of what it's bringing to the table now in this video i'm going to show you one of the key areas that i feel brix excels at and that's how easy it is to add in dynamic data from tools like acf pro pods or metabox which is currently running a lifetime deal over on appsumo link will be in the description if you want to check that out now let me quickly say that this is not a design tutorial it's about functionality okay so with that being said let's just fire up wordpress and take a look at brix builder so a really simple setup and i don't want to waste your time by showing you how to do all these kinds of things because chances are you already know what a custom post type is and how to add acf fields so what i've done is i've set up a simple custom post type and we just named this recipes so you can see that's all we have inside there and if we go into custom fields we open up the field group we've got a recipe field group inside there and if i open that up at the moment i simply have an image field and a gallery field but obviously you can put most fields inside you now it's worth bearing in mind at this point in time you are still going to have some limitations on things like repeater regions and things like that so these are not going to be supported right out of the box with version 1.1 of brix builder that we're currently checking out so please do bear that in mind and don't get frustrated if you realize that you can't get everything you want done right now this is still a very early version of this entire builder okay so now we got things set up i've got the normal wordpress fields for your title your content and your featured image and we've just got a couple of extra fields inside here nothing particularly special like i say a gallery and an image field okay so with those things set up how do we go about inserting this into a template we need to do is come into bricks and we're going to come into the template section and inside the template section you can add a new template as we do that we're going to do a couple of things first of all we can give it a title so we're just going to call this recipe archive and we'll start off with the archive page first of all on the right hand side then it says select template type so we can choose the range of different template types so we want to choose archive now when we move on to the singular there's one thing i want to clear up there's no single kind of template type inside you it's done under the content now for me i would prefer to see this as being set up as a sort of single post so we kind of know what we're dealing with the template so definitions that you're used to when you're working with wordpress itself so i've spoken to thomas the developer expressed my opinion on that whether anything will be taken on board i don't know but just so you you're aware content is basically your single post and so on okay so let's come into archive and we're gonna do is we're just gonna simply say publish on this now we can edit this with bricks once you do that we'll open up the bricks editor and we can start using all the normal elements or widgets whatever you want to kind of call them now you see i've already gone ahead and created a header and footer inside you nothing you haven't already seen before in my initial video but now we can drag and drop elements in so this is an archive so what we want to do is we simply want to just do a search for post and there's our post widget so we can drag and drop that into our main area and you see that now pulls in all our posts this gives us all the control then over all the different things we can style how we can lay things out those kinds of things now again this is one there's limitations currently with working with bricks we can't create custom loop layouts and we can't insert custom metal field data into these so for example we can still reference things like your title for the post the featured image for the post those kinds of things but we don't have any custom post values we can pull in in this template and again this is something that i've spoken to thomas about so i'm hoping this will be something that won't be too long before it actually gets implemented into the whole brix builder but what we have like i say is we have control over various different elements so we can set up what post information we want inside your conditions and things like that so once you understand these the rest of it should become pretty straightforward so post type we can expand that out and you can see we've got your posts your pages and any custom post types you create in this example recipes so we'll choose that and you can see that now immediately updates to show us the custom data that we want not the default wordpress post data you can set up your ordering you can set up your order by how many posts per page you want you got include options so you can include or exclude individual posts or you know custom posts or whatever it is you're doing you can exclude those and you can also use terms so if you're using tags and using taxonomies categories those kinds of things you can reference those directly inside you as well so you can create templates of various different purposes that's quite simple and straightforward to work with your layout then gives you the ability to choose between currently four different kinds of layouts you list and you see it updates for us in real time grid which is what we currently looked at your masonry and also your metro style which in this example doesn't look great but you've got full control over the styling of all these let's just leave these set to grid and like i say all your styling options your image ratios all those kinds of things are inside you but this isn't a design tutorial this is just showing you the custom post type type things now this is the field data this is what we're seeing inside each of these loop items and currently you can see we've got the featured image which is a standard you've got your title your meta and your excerpt and if we expand this out you can see we've got a couple more options so we can add a read more in here if we want to taxonomies those kinds of things so we say read more you can see that puts read more in there and we can add more insight here if we want to as well you can change the text you can set an overlay value on there you can delete these completely if you want to all the options are there for you and then we can also do things like make the image clickable so we can see we can say we'll link the image and that will just set this up to use the permalink and again it would be nice to see more options inside you where we could fine-tune what the link actually goes to if we wanted to go to for example the permalink or we might want to have it so you can click and you'll open up in a light box various different reasons but it would be nice to have that extra level of control okay so that's the basics of creating the layout we'll just select this and we'll just give it a bit of space around there so we come to our layout we can add some margins top and bottom or all the way around if we want to so you can see we can put 50 all the way around or we can just simply delete that unlink them and say we want to put 50 top 50 bottom simple as that okay so once we've done that we next thing we need to do is come into the settings section and we want to come in to our theme styles page settings and template settings if we come into template settings this is where we can set our conditions so we'll open up the conditions option and currently there's no condition set choose the option and we can start conditions on top of each other so again this works in a very similar fashion to most page builders that allow you to do templating elementor those kinds of things we can expand this out and say where do we want to use this well we're going to set this it's an archive it's going to set it to archive then we can choose what archive type it's going to be we can expand that out and you can see we've got all archives it becomes a global template for this post type author categories and tags and so on so we click post type that gives us a third option which now allows us to choose from the post types we have posts pages and our custom post type of recipes we'll add that condition inside this and now we've set the condition up for when this is going to be used inside our overall site structure so we can just save this now so we're going to come up and just hit save and that's basically our template created that's our archive template created for our recipes our custom post type not a lot we can do inside there kind of still pretty basic at the moment but again hopefully these are things that will be expanded upon as the plugin as the theme as the whole builder actually progresses and moves forward so i've gone ahead hopped over to the front end of the site and i've added the recipes custom post type into our navigation and if we click you'll see this is now using the custom template we created for the archive side of things if we click on the image that'll take us over into a template area that's kind of not been set up we haven't configured that yet so we'll deal with that now and this is where we do get a lot more control over how we can insert data what data we can use the design aspect and all those kinds of good things let's hop back into our template section we're going to add a new template we're going to name this recipe single template and we'll just set this to be a content type of template and we'll just hit publish on there so let's just edit this with bricks open that up in the editor and then let's start building things so like i say this is where we do get more control now if we scroll through we'll find because we're creating a single post template we now have a section of different elements we can use to reference typical data so for example your excerpt your metadata so on and so forth so first thing we're going to do is we're going to simply drop in an image drag and drop that into our design and you see it's now asking us to either choose an image browse and splash for an image or we can select dynamic data and this is where i if you ask me brix really does shine when it comes to working with dynamic data it is insanely simple to start referencing things so for example we can select an image we can browse and splash or we can choose dynamic data and you can see that just pulls up all the dynamic data that we can reference throughout our entire site to do with an image element so we've got featured image the image for this part of acf and you can see section under acf and also our gallery which we'll take a look at a little later so for this example this is using the featured image option and we can choose that now nothing is showing up at the moment and the reason being is it doesn't know where to pull the data from so we're going to do is we're simply going to save this we're going to hop over into our settings section into our template settings and we've got populate content expand that and you can see content type we can choose from lots of different things so we know this is a single post or page it's not an archive so we're going to click on single post page and we're going to tell it where to look in this example what post we want to use and there's my sample recipe just has some sample data inside there we'll choose that apply preview and that should now show things up and you go it'll reload the builder and it should then show us the new dynamic data and we can see there's the featured image for this particular custom post so really easy to do and you can now get stuck in and start editing all the various different features so you can stretch this you can set what you want to link it to in this example it's a featured image we don't want to link it to anything you can drop in captions you can style things on this we can adjust the layout and all those kinds of good things i'm not going to worry show when you've got all that you can get stuck in indesign and display things how you want to so that's the first part we're going to do is we're going to just select this section and we're going to give this a bit of space at the top and bottom which excuse me i've got a bad habit of jumping into the wrong place to do this i'm going to set 50 top 50 bottom that gives us a space above and below in the section so that's pretty cool so now we can just start adding in the extra data that we want so let's come back and add our elements in we say we're going to grab this pinned element which is a post title we're going to drag and drop that underneath there and that pulls in the post title we can style this we can set the type the style prefix all those kinds of things and obviously you've got the styling options then for everything inside there as well so all really cool now if you're wondering how i've gone about having this little pinned element at the top let me just show you how easy this is if you're working with templates a lot it can be quite nice to just pin the elements you want to keep on using at the top of the editor so let's just say we want to just have this metadata we'll just hover over any of these give it a second and this little pin icon pops up all we need to do is wait for that click pin scroll to the top and you can see there's our pinned elements really really nice one of those things that i think so many more page builders really should start doing this kind of thing especially when you get a lot more widgets or elements into your design let's just drag and drop that underneath there and if there's any options inside there you can see it'll pull that data in so we'll select it and we'll just make sure everything is set up on there as well so now we have all the options for what metadata is actually going to display author date publish modified comment count and so on so let's just say you don't actually use comment counts well we can delete that from there and that's gone you want to edit any of these change them add prefixes or suffixes format in days so you can see this was done two hours ago for example or three days ago or something again quite cool i want to reorder these we simply just drag and drop these around all really easy to do add more metadata in click and choose from any of the options we have again i would like to see the ability to reference dynamic fields inside you just to give us more control over what metadata is going to be displayed but again this is still a really early build of brix builder okay so that being done let's grab the content now and let's take a look at how we can add that in so same thing again we're going to simply come down to our single and you can see there's all our options our taxonomies post content and source let's grab the post content drop that underneath there and there's our content style that whatever you want to do with it all the options are there for us so that's really easy that's just referencing pretty much standard wordpress data but we can do a lot more we can come in and we can say we want to add a gallery in for example and this is a custom field that's done through acf so drag and drop that underneath it we'll drop that in you can see we've got all the same kind of options we can choose our dynamic data and again we can just expand that how easy is this click on gallery boom job done our gallery is now inserted we now can control the size of the image is going to be used we'll say we'll use this medium we can choose whether you want this in a grid masonry or metro or quite cool let's just leave this set at grid you can choose your image ratio square i think looks quite nice in this example but you can choose from any of the options that are there and you can adjust the image height the number of columns and so on so let's just set this to four we can adjust some spacing put a little bit of space around each of our images so 10 that'll do what we want to link them to what we're going to say in this example we're going to link them to a light box do you want to add a caption you can drop that enable that option inside there really really easy so that's how easy it is to grab that kind of data we've got some other data inside you so we've got something as simple as just another image so let's just say we didn't want to use our featured image in this example well we can just expand this back out and we'll just choose the image field and that will pull in the image which is just an acf field inside our meta fields assigned to our custom post time really really simple to do so now that we've built our single post template we've got all the content we want inside there repeating the same process that i've just shown you we can just simply come back up to the settings into our template settings into conditions again and we can apply our condition so we're going to add a condition we're going to say this is going to be an option for a post type we'll select that what's the post time it's recipes and if you want to add another condition into you want to use this template in more than one place you could do just that we'll simply save this option and we'll just hop back out of this edit back into wordpress and we've finished working with that side of things so now we can just hop over into our sample site we'll refresh this page we should now be using our template we just created and there you go there's our template there's our image gallery we can step through all those images inside there you can see it's using the metadata the title the custom image instead of the featured image all set up coming to recipes you can see there's our single recipe we'll click on that and it'll take us through that's really how easy it is to start adding acf data directly inside the brix builder so that's the kind of thing you'd be accustomed to if you used any other kind of theme builder with wordpress that links up the dynamic data really good starting point from brix builder but there's more we can also use content acf normal data you've got as part of wordpress inline in other words you don't have to drop a widget in and then just have the content from that custom field inserted you can insert this into the actual content itself let me show you what i'm talking about let's grab this text section and you can see this just puts in a normal text block and again very similar to what you've seen inside tools like elementor however you'll notice we get the little lightning bolt and what this allows us to do is insert inline dynamic data what we're talking about let's delete that from there and let's just say hey well i want to reference the name of the person that's logged into the site so we're going to put hey space and then we're going to grab the little dynamic icon and we can see we've got things like post author site archive terms acf data and so on so we can reference data inside here as well so we're going to say say hey there let's just put that inside there if you enjoyed this post by and we want to reference the author's name the person that actually wrote this article click on the little dynamic icon author post author name click on there push this little short code this little sort of macro inside there and we'll just put why not check out the other great articles okay so we've created but then it says we've created a dynamic piece of information inside there based upon the template that's being used based upon the author of the particular item that we're looking at so let's just save this let's hop back over to our sample page and we'll refresh this now at the moment it's using my sort of sign-in details which obviously isn't what i want in this example but you can see that dynamic data has now been pulled in there if we want to we can reference that so we can just highlight that if we wanted to and we'll make it bold just so it stands out a little bit re-save that reload this section this page and you see that now makes it bold but you can reference any kind of data anything at all you can grab you can just simply grab the data from here acf fields included as well terms archive details you can grab the title of the archive title of the site the author the post title loads and loads of data you don't even have to select it from there you can literally start typing this in yourself so you can see we can just put the curly braces author underscore name close the curly braces and we'll just re-save that and just refresh you see that pops it at the end of the section as well so complete control over the inline content you want to use from dynamic data and you can say you can just simply type this in yourself if you want to as well so you can get really creative using this and you don't have to mess about with just sort of faffing about with things like spans and divs and all those kinds of things and messing about with css positioning so you can have things in line with each other this just makes it really really easy and again it's great to see that from a version one of a product like this we have that level of control and that level of integration with dynamic data all i want to see now is some of the things that i think will take this to the next level for example we need to have conditions we need to be able to have conditions inside the that say if this field is empty for example don't show anything at all you know if you've got a field like area like this where you've got the the gallery and you may have no images then nothing will show up but if you're using things like prefixes and suffixes and you want to have that as part of your dynamic content you need to have control that if nothing is inserted into that area then there's a condition set up that says don't show this at all completely ignore it so that's something is really really important i think we need to have the second thing we need to have is full control over the loop you can see at the moment this is our loop like i said when we took a look at creating the archive it's really pretty simple at the moment we can literally only include standard wordpress data we can't include any acf or dynamic data so i really would love to see that i've sent some information over to thomas one of the key developers behind the brix builder explaining giving some examples of the kinds of things i'm looking at i'm really hopeful that this was something that will include before too long because i think once you have those kinds of things then you can start creating great looking listing websites and bricks builder from the get-go can be something that can be used for creating maybe not as advanced sites as you can create currently with elementor some of the tools like jet engine and so on but it will be a great starting point and open up and with the speed that you wish you can work with the brix builder i think this is one area that if they can focus on adding this in it's going to be a real boost for this builder from the right right at the beginning of its lifespan so that's how easy it is to get started working with brix builder and dynamic data now at this point it's still somewhat limited in what you can do in comparison to some of its more established peers on the market but it's a really strong start and once they release the ability to build custom loops or add additional meta fields into the existing posts element it's going to provide a really solid starting point now drop the relevant links into the description below and if you found this video useful or why not hit that thumbs up button if you didn't get value from the video though feel free to hit the thumbs down button twice as that works pretty well too my name is paul c this is wp tets and until next time take care

Channel: WPTuts

Views: 5,657

Keywords: WPTuts, brick builder, bricks builder wordpress, bricks builder dynamic data, bricks builder acf, bricks builder meta box, bricks builder PODS, how to use dynamic data in bricks builder for wordpress

Id: WuToW-fvdiw

Length: 21min 22sec (1282 seconds)

Published: Tue Apr 06 2021