0:00:00
What is up everybody welcome back to the channel I am extremely excited today number one. I’m in my new basement office, which is it feels fantastic. I’m only half moved in as you can see there’s like a plug hanging out the wall. We got a hole in the wall here where there’s a water cutoff valve that needs to get a plate over it. And the echo echo it’s unbearable, especially if you’re wearing headphones you can probably hear. I’m waiting on acoustic panels to arrive. My rug is still in shipping. So when that stuff gets here and the room actually gets treated the sound is going to get a lot better. But here’s the thing basically what I’m saying is it’s not an ideal recording environment. But bricks just released a brand new feature called conditions and this is the second thing that I’m really really excited about because it is a feature I’ve been waiting on since I started using bricks. And now it is finally here and I know there’s a lot of you in the bricks community who are probably like man this sounds fantastic. But number one how do I use it and number two what would I use it for what is a good use case. Well there is one technique that I use on almost every single website. This is a very practical technique and it requires conditions and that’s what I’m going to teach you in this video today. So let’s go ahead and hop in we’re going to screen share here is the basic situation. You have a footer so I’m going to go to bricks templates.
0:01:24
I’m going to go to footer edit with bricks and I’m going to use my new product frames to pop in a footer here. So I’m going to go to templates for moat templates and I’m going to choose footer echo. This is our frames library here. Frames is a live wire framing tool inside of bricks and I’m going to click insert element on footer echo. And you see I get footer echo loaded right in as my new footer and you can see that in footer echo we have a call to action area embedded in the footer. And this is a very standard tactic technique in UX design. Basically as somebody is reaching the end of the page you want to make one last ditch effort to say hey take the action we want you to take. So footer echo allows you to have this call to action right here inside the footer and because it’s in the footer it’s going to automatically show up on every single page. However we don’t always want it to show up on every single page and we can’t just hide the footer on a page by page basis because we actually want these things to show up. We only want to hide the CTA part and I’ll show you let me save this exactly what type of page we might want to do this on. So I’m going to go into pages and I’m going to go to my contact page we’re going to edit with bricks here. I’m going to use frames to add a contact section right here so I’m going to add this one and I’m going to hit save so simple as that we now have a little contact page action here. And this is exactly you can see the use case right here they are on the contact page there about to fill out this form. Why in the world would we still be telling them to contact us or to take this action right it often doesn’t make sense it’s redundant it’s confusing to the visitor so on the contact page they’re already taking the action we want them to take. We don’t want to keep telling them to take that exact same action so we would want to hide this so the way that we can easily do this check this out and this is the way you would want to do it.
0:03:32
You click edit page and somewhere on here there should be like a little toggle an option button something that says hide the footer cta and we may want to hide other things on the site conditionally as well that’s why conditions are so absolutely powerful. So I’m going to show you exactly how to set this up we’re going to use metabox you can use the free version of metabox you can use the free version of advanced custom fields so this requires no paid plugins whatsoever. I’m going to go into custom fields in metabox I’m going to add a new field group I’m going to call this let’s say page element visibility page element visibility because remember work right now we’re showing or hiding the footer cta but we might show or hide something in the header show or hide something else in the footer a lot of different options for us so this is for more than just the use case of the footer cta so I’m going to give it this name. And I’m going to go to settings and I’m going to sign these custom fields to pages only that’s the only thing I want to show up on now you could assign it to post as well but I’m just going to sign these to pages I’m going to go ahead and hit publish next thing I’m going to do under fields I am just going to add a radio field this is a basic option there are other ways you can do this too right you can use a check box you can use a switch but the switch you have to have the advanced version right. So the radio is the most basic and I’m going to open that up and I’m going to call this footer cta and it’s already in page element visibility like that group so I don’t need to really add any other words we’re just saying hey this is the footer cta and then what are my choices my choices are show or hide right that’s the two options very very clear anybody can understand it and under default value I’m going to make the default value to show it because I want it to show it. So I’m going to show on every page by defaults but we also want the option to hide it. All right I’m going to inline these as well so they’re right next to each other now if you don’t want to do that they’ll stack on top of each other either way I’m going to go ahead and actually I’ll stack them let’s just keep it default let’s keep it nice and easy I’ll leave them stacked. So footer cta show or hide default is show I’m going to go ahead and hit update and now when I go to edit the contact page check this out we have the option right here footer cta show or hide notice that show was on by default so that’s how I’m going to leave it I’m going to leave it like that. Now what we have to do is actually set up the condition in bricks and this is so so so easy so I’m going to go to bricks templates I’m going to open my footer because that’s where my element is that I want to show or hide and I’m going to select this container now here’s one just let’s go on a little tangent real quick a lot of people ask me all the time because they see in my trainings they see me group items together in containers and they’re like Kevin that adds an extra DOM element to the page why are you. You doing that it’s like they say it’s less efficient but actually it’s more efficient yes it does add an extra DOM element not a big deal but it adds a lot of it adds an insane amount of efficiency for one first of all you have to think of these things as like think of everything on a website as either is it an individual element or is it a component of elements like a group of elements and this is very clearly like a component a group of elements. The heading the text the button they all go together and so grouping them into a container makes perfect sense because now I can drag the entire thing somewhere else I don’t have to drag each individual item and then in the case of conditions which we’re doing right now I can add a condition to the container instead of having to add a condition to each individual element which is just sloppy and messy and it not efficient so. Yes it is smart to add the extra DOM element and group things together. On my container and in bricks 1.5.4 you are going to see a brand new little button up here and it says conditions we’re going to go ahead and click that and we’re going to add a condition. Now the way that this works is your telling bricks when to show this element right so if the conditions are met the element will be shown if the conditions are not met the element will be hidden and not just hidden actually completely removed from the code so you will not see any remnants of this on the front end which is exactly what we want. Here is our condition number one we know that I’m using custom fields so I’ve got to pull the data dynamically from the custom fields right so I’m going to use I’m going to choose in this first drop down for condition dynamic data right here so I’m going to choose dynamic data then in the dynamic data field which appears next I can choose the actual custom field from metabox which was we remember footer CTA check that out right there footer CTA.
0:08:45
Now I have to decide what am I doing with the data so remember what our two options are it was show or it was high so I wanted to show all the time I wanted to and let me just put here you can put hide or you can put show that’s going to be the value and then you’re determining the like the rule set so is it equal to is it not equal to that’s what this one means are we going to use contains and there’s a lot of different types of things. And there’s a lot of different ways to achieve the same thing now I personally like to use kind of like an inverse so I use not equal to so if it’s not equal to hide then I want to show it right so it’s going to show it if it’s not equal to hide if it’s equal to hide then it’s going to hide right so I’m going to leave this exactly as I have it now so. Dynamic data food or CTA is not equal to hide and we’re going to go ahead and hit save I am dyslexic so I hope I’m working that correctly in my brain we’re about to find out so now what I want to do is I want to actually go to this page okay so here I am on the contact page and look at this I can see the footer CTA I’m going to edit the page and I’m going to say you know what on this contact page it really makes sense of a footer CTA I’m going to hide it. And I’m going to go ahead and hit update and then I am going to view the page and look at that it is gone my friends just like that and then if I want to bring it back I just hit show update and refresh there it is again so makes it very very easy to conditionally show or hide specific content like this you can do it on a page by page basis this is a tremendous use case and if you just start brainstorming you’re going to find a lot of other use cases a very very similar to this for conditionally showing or hiding different types of content on different pages but this let me go back to camera was your introduction to conditions and bricks builder something that I am really really really excited about again you saw me using frames here at get frames dot I.O. if you want more information on frames. And I will be back very soon again I’m waiting on my acoustic panels my carpet all or not my carpet my rug a bunch of stuff to get this office to be a hundred percent but I am really excited to be back I was just on vacation now back with new equipment new office new I’m rejuvenated so we are going to be pumping out a lot of content in the very near future make sure you’re subscribed make sure you hit the like button and drop a comment if you found this valuable I’ll be back very very soon. Peace.
