0:00:00
What’s up everybody welcome back to the channel. I’m glad that you are back for another training. This one is gonna be a good one I am very excited about it We’re gonna be talking about bricks keyboard shortcuts something that is going to dramatically improve your user experience And your workflow and I’m gonna be honest with you when I first came to bricks I felt like I was clicking around a lot more than I was used to and a lot more than I should have been clicking around So I started looking for ways to improve the workflow in bricks and I came across the keyboard shortcuts And I was like, okay, I’m gonna start practicing them. I’m practicing these keyboard shortcuts And I can tell you this is going to absolutely speed up your workflow And it’s also going to make the process of building in bricks a lot more enjoyable All right, so let’s go ahead and dive right in these are the top 12 what I think are the top 12 keyboard shortcuts inside of bricks shortcut number one Select parent or first child elements using command shift left right All right, so I have these sections selected Notice that there’s a container here container here container here These are children of my section I also have some elements in here a heading text a card with the thing inside of it another little label inside of it These are parents and children, okay?
0:01:21
If I use command shift left right I’m gonna hold shift command and I’m gonna hit right Notice that it selects the first child element, which is a container now if I hit right again It’s gonna select the child of that element which is this heading and if I hit right again Nothing is going to happen if I hit left It’s gonna select its parent which is that container and if I hit left again It’s gonna select the section being able to quickly go from you know Basically down in the DOM tree which is from parent to child to child very quickly like that It is very beneficial and I’m gonna show you in just a second an area where it might actually be critical So let’s just do it one more time parent to child to child now I know you can just hover and click hover and click hover and click, but I want you to see something I have a blank container right here. I’m gonna go ahead and add a block to it and I’m gonna go ahead and add that block And because a block is a hundred percent width and because there’s nothing else in the container I can’t actually select the container anymore, right? When I click I can only select the block, but if I hit shift command and left I now have selected the parent even though I couldn’t even physically click on it inside of the builder Now yes, I could have gone over here and found it in the structure panel But a lot of times you know on a large page You’ve got to you know kind of hunt around a little bit for the thing you want if you can just click here shift command left and select the parent Much much much faster much easier much more enjoyable now There’s a companion shortcut that goes along with this because I know you’re asking well Why can’t I just select all of them? How do I get to the other elements that are in this section?
0:03:10
That’s what we’re gonna bring in shortcut number two which is select adjacent Sibling elements so this uses the up and down arrows we were using left right before now We’re gonna be able to use up and down and I’m gonna walk you through this So again, I have the section selected holding shift and command. I’m gonna hit right that is gonna select the first child element Which is the first container? But I don’t want to keep going and select the next child which is that heading I actually want to select this container down here. That’s where I’m gonna move to down arrow right so I can now jump to the next Adjacent sibling to that container right there if I hit down again I’m gonna select that bottom container and now I can easily go between these Effectively they are parent elements, but I they are adjacent to each other. They’re siblings So I’m able to use the adjacent siblings shortcut. I don’t even think bricks calls it this But this is what we call things in CSS adjacent siblings. So that’s why I named it adjacent sibling selector Now if I want to select this middle one and now I want to select a child of that I switch back to the right and left arrow so I hit right and I now select the child But if I hit right again, it’s gonna select the child of that. I don’t want that I want to select the adjacent sibling card So I just switch back to using the down arrow so down and up can get me through these cards And then I can go into any card if I want to right very quickly with the keyboard These are important keyboard shortcuts. You’re not gonna use them all the time But there are times where they come in very handy. So you’re going to want to know them shortcut number three Cycle through breakpoints with command B You can see that I have a grid right here and I just want to see if my grid is Stacking properly at the breakpoint that I’ve asked of the stack at if you look right here I have a grid in one class that means it should be stacking at the in breakpoint So what I’m gonna do is I’m gonna hold command and I’m gonna hit B and what B is gonna do is it’s gonna give me this Tablet view automatically now you could always come up here and just click the breakpoint that you want But if you’re talking about quickly cycling through watch this command B B B Right, I can quickly cycle through all of my breakpoints. I can even get back to my normal Desktop view here But again, I can hit command B and then I can look over what it looks like on tablet hit it again and Here like I don’t have to travel up to the top of the screen to do this especially guys look at this I need my mouse to be able to scroll so if my mouse comes up here I then have to move it back to the scroll area back up here back to the scroll area back up here That’s a lot of inefficiency if I keep my mouse here command B and then I can cycle right then command B And I can cycle command B and I can keep scrolling up and down. I can do whatever I want. I can cycle through all the way So cycling through breakpoints with command B is a really good shortcut to have Shortcut number four is duplicate and element This is another really this is probably when I use the most because duplicating an element makes things very very efficient So let’s say I have six cards here. I actually want nine of them So I’m gonna select the last one actually I could select any of them because they’re all the same and I’m gonna hit shift Command D to duplicate it you see it adds another one. I hit it again It adds another one. I hit it again. It adds another one very quick. It’s much faster than copying and pasting Especially if you have like a section here. So I just grab this whole section shift command D now I have another section right below it. Okay, so this is again like I said one of the shortcuts I use most often it is very very powerful really speed things up Let’s go shortcut number five undo and redo. So here are four cards I’m gonna duplicate and make six cards, but then I decide you know what?
0:07:15
I don’t really want to do that. I’m gonna command Z and I’m gonna make those go away if I change my mind again I can shift command Z and bring them right back. All right. We all know what undo redo is It’s like in everything since Microsoft Word on the very first gooey computer We all know what undo redo is but having it in a builder is Very important and very useful. All right. Let’s move on to shortcut number six toggle setting search field This one is very very important and it’s so powerful to the workflow guys so When especially when you’re learning the builder, okay? When I you know I’m still even learning the builder like where is everything at so I click on card and I’m like I want to add a five pixel blue border to this card so I got to go to the style tab and I’m like Oh no, oh work like in the layout tab already all right So I got to get out of the layout tab then I got to find the border tab here It is and then I can start actually doing my thing and then if I want to add something else I got to go find it and be clicking around as it’s a lot of searching It’s a lot of hunting and pecking kind of thing. I want to avoid that if possible So what I am going to do is I’m gonna select my card right here and Again, this is what I want to add the five pixel blue border to I’m gonna hit shift command F now I want you to look right up here in the top left hand side of the screen It’s gonna open a little search box and I can just type in border and look it finds it now I can just quickly add my five pixel border make it solid and then I can do a blue color as my border color All right, so now I have my five pixel blue border What if I wanted notice that that stays open by the way?
0:08:56
This is one little caveat of it So when you go click on something else it’s gonna have border selected So you might want to just clear the search, but if you want to now do something like transform I want to transform the box. I don’t want to go look around in here for transform I just type transform and it just gives me the setting right there and then I can clear it out when I’m done If I remember to do that which you know as you practice these workflow hacks You’re gonna get better and better and more efficient, but shift command F And just remember this you don’t hit it every time it toggles it on and then it just kind of sits there and it’s there For the rest of time while you’re building so you don’t have to keep hitting this keyboard shortcut over and over and over again Once it’s open you just use it for what you need it transform find it Okay, clear that out now I want to go add margin to this box I type in margin it gives me the settings right there so very very quick on Just getting to different aspects of Styling for elements. Okay Shortcut number seven add a new element via search here is another one and I’m gonna say this guys if you take your mouse from now on from this point forward All right, I’m gonna pick on you a little bit and then you you guys can call me out if you see me doing this too I want you to hold me accountable But if you take your mouse and you go up here and click on this plus sign you are a chump you are a chump my friend Because when you’re adding elements to a page It’s a lot of up here click down here up here click down here anytime you want to add stuff to the page I want to add an image right here to this thing Look at how this is at the bottom of the builder So I got to go all the way to the top to click this plus sign and then I got a type in image So I went from mouse to keyboard. Okay, now I’m going back to mouse to select image and finally I have an image added And then I can click on it and I can start editing it that is a lot of mouse work, right?
0:10:50
It’s a lot of mouse work. It’s a lot of mouse to keyboard back to mouse very inefficient stuff So like I said if you do that you’re a chump from now on command shift E command shift E look at that It not only opens the add an element panel but the mount the The typing indicator is already in the search box. All right, so let’s do it again watch I’m gonna hit I’m gonna click on that shift command E and immediately I can start typing image and then I can go click on the image and I can add it there now Hopefully what would be nice is if I type in image and it’s an exact match to the element It could automatically select it and then I would never have to use my mouse I could just hit enter and it would add one to the page that would be absolutely phenomenal But even though that’s not happening it’s still bad. I don’t think it’s happening. Let’s do image inner no doesn’t happen Oh, but I can tab. Oh check that out my friends look at that and I can add another one and another one and another okay All right, so we’re learning something as we go about efficiency. So this is fantastic. Let me let me delete some of these here So we’re gonna delete delete delete delete delete delete Okay Delete let’s just go back to where we were let’s start fresh I want to add that image without touching my mouse shift command E type image tab inner Oh I Love it guys. I absolutely love it. Okay Man, let’s let’s go to the next one shortcut number eight add classes to an element This one this one let’s all pause for a second as the creator of automatic CSS if you asked me Hey Kevin out of all 12 of these shortcuts. Which ones your favorite you know it’s gonna be this one You know it’s gonna be this one. So check this out. I’m gonna clear off the classes that are already on this I want to turn this little container into a three column grid With a medium gap and I want that grid to stack at the M breakpoint So what do we have to do we have to add classes now the question is are you gonna be a chump and here’s the thing You got to hold me accountable again Are you gonna be a chump and go all the way up here and click on that class box and type of class? So you went Mouse all the way up there now we’re mouse the keyboard, okay?
0:13:17
And I didn’t want to I just added that incorrectly. Let’s go ahead and delete that all right perfect So now grid three I’m going back to the mouse to click again And then I’m doing great in one and then I’m going back to the mouse to click again and I’m doing gap of him And yeah, I mean we’re using utility classes. This is very fast But we don’t want to be doing all that mouse keyboard work, okay? We only want to stick with the keyboard and we want to keep our mouse in the workflow area as much as we possibly can So again, I’m gonna remove these and we’re gonna take a look at keyboard only classes so check this out and selecting the element I want command inner oh my gosh You see the class panel just opened I can start typing right away. Maybe I do grid three and then I hit inner Now you’re like cool Kevin. That’s great for adding the first class But what do we do now? We just hit command enter again and it does it again And then you can do gap of him and then hit command enter and you can do grid in one and now without touching my mouse without moving my mouse I have my three column mobile responsive grid simply by adding those utility classes. Let’s check it again just so I can do it without Explaining this is what the workflow would look like if I was just doing it out of the box building a website Grid three gap M Grid M1 I need my double dash there never touch the mouse only keyboard work I get those classes added very very quickly and it’ll even be a little bit snappier for you when you do it because I’m Screen recording it always just it adds a little slight little bit of lag when I’m screen recording So it’s not quite as fast as it would be if I was just building and not recording my screen But you can see that like if I want to do this image right here hit command inner bam We got the class panel open and then I can do it like a width of XS on there I can change the width I can do whatever I want to do Just the ability to add classes that quickly and without touching the mouse doing all this clicking scroll back and forth Absolutely amazing. All right shortcut number nine We’re gonna take a look at wrapping an element in a div or a block so This is ultra-chomp mode you add something to the page or to a card like this and you’re like you know what?
0:15:38
I actually should have put this in its own container Well, what do you do? So your ultra-chomp mode so you come up here and you click the little plus sign Then you add a div and you add that in there and then you’re like all right. I don’t want to drag that in all right and Okay, finally it’s in there, but that was a lot of work right so let’s undo that So we’re back to having just text right there I want to wrap that with the div just do I have a keyboard shortcut that I can use yep command shift P So I’m gonna do shift command P and then it’s wrapped right there and then watch this not only Right and you can see in the structure panel over here Maybe let me close all of this and close everything okay? We are in shortcut number nine So I am going to select my container and then my block and then you can see that there’s a div and the text is inside the div So this is the div that was added it wrapped the text with the div when I hit command shift P Now after I do that watch this let me let me get rid of that Let me take this back out of here. Let’s start over from scratch And I want to see the workflow with combining some other keyboard shortcuts So check this out shift command P wraps it with a div that I hit command enter to open my class panel Then I do a pad of M then I hit command enter again. I do a bg Of base hit command enter again. I do a text of base ultra light Look at what’s happened on the page my friends. I wrap that in a div I changed my base background color and then I changed my text color all without touching bricks I was just using my keyboard right? I never touched anything really inside of bricks It was just keyboard shortcuts and typing classes got me all of that work And I’m just you know randomly showing stuff But think about you’re actually building a site here being able to wrap stuff quickly add classes Select a parent element add classes to that doing all of this with a keyboard and not touching the builder Not having to go around and find things with the mouse. This is this is a phenomenal phenomenal Okay, shortcut number 10 delete an element. We’re gonna like blast through this It’s very simple very simple shortcut Except very important thing for you Mac users It does not say that you need to hold the function key in the bricks guide It just says command delete so I was like command delete command delete wasn’t it going away?
0:18:09
Hit up my friend, you know long time bricks user a lot longer than me. He was like try function function command Okay, so function command delete. Oh my gosh. We can delete elements So I was having to right click and then choose delete like a chump. I don’t want to do that anymore, right? Watch this shift command D duplicate duplicate duplicate and then I’m like, you know what? Oh that last one did it a little too many times function command delete gone, okay? So delete an element with function command delete. Let’s take a look at shortcut number 11 toggle preview mode command P there you go and What’s the great benefit about this is that you drop that ugly WordPress admin bar as well? And this is another thing where you’ve seen me in tutorials preview things on the front end That is what I am used to coming from the oxygen world oxygen did not have a builder preview mode So it’s just what came natural to me and it’s what I’ve been doing over and over and over again But not anymore you are gonna see me and again hold me accountable. I don’t want to be a chunk, okay? Go into let’s just chuck it on the front end. Hey, how about we just hit command P and we take a look Right and the benefit is we don’t even have that ugly WordPress admin bar which on the front end You’re not going to be able to get rid of so this is a much better preview I’ve checked it against the front end. I can’t really find any differences If we find any differences then we may have a reason to preview things on the front end But as it stands right now I’m good with command P. I mean that is just a very quick way to get in and out And you know it is what it is great little shortcut. Let’s check out number 12 the last one and Guys this one I’m gonna be honest with you This one was one of the things I hated about bricks It was like if I was gonna choose something to hate about bricks. It was this and it’s this I hit Shift command E to add a new element because I’m not a chump. I’m not gonna go I’m not gonna touch that plus sign guys not gonna touch it shift command E opens to add an element and look I type image tab. I can hit enter now. I want to check something here Okay, so It doesn’t I’m actually dead. It did work. Oh my gosh. Oh my gosh. Okay. All right. I’m gonna do this This is it’s guys is getting even better as we go. Here’s here’s what I used to do I used to like a chump click the plus sign then I type this in then I click image like a chump Okay, click image and then I was like where’s my style panel?
0:20:45
I want to edit the image that I just added to the page like that’s why I added it so I could go edit it But bricks doesn’t do that bricks is like do you want to add another one? Like yeah, I want to add like 50 images when I haven’t even styled them yet. No thanks So I’m gonna delete that one What you have to do after you add it is go find it and click on it and now you can edit it That’s a lot of mouse work again. Let’s let’s watch this in replay. Okay, we get that live replay mode So chump clicks the plus sign Chump types image and then mouse clicks the image and then chump goes from all the way up here All the way down here to click on this and then all the way back up here to do stuff We don’t want to be doing all that because we’re not chumps all right, so watch this I’m in the area I want to be to add my new element shift command E opens the element I type image I hit tab I hold the shift button down and I hit enter and Not only is the image added. It’s already selected ready to be edited That is the keyboard shortcut is just holding shift when you add a new element now you can do the same thing and We’ll call this we’ll call this semi-chump mode All right, where you hit shift command E You type in image and then you come up here and hold shift and click the element Effectively does the same thing, but we’re gonna call that semi-chump mode because you shouldn’t be using the mouse if you don’t have to use the mouse Right, so I am going to keyboard shortcut delete that let’s watch the workflow in action one more time Shift command E opens the element type image hit tab hold shift hit enter I get my image added and it’s already selected and ready to be edited. Okay, let me go back to camera for this Guys if you’re finding this stuff valuable. I need you to do something right now hit subscribe Hit the notification bell all right You don’t want to rely on seeing these posted in the bricks Facebook group and all that stuff you want direct access You want a main line digital ambition trainings into yourself, okay into your brain So you’ve got to hit the subscribe you got to hit the notification bell and I will again preface this This learning these shortcuts will slow your workflow down in the very very very beginning But as you learn them and as you practice them and as you get better at them They are going to dramatically increase not just your workflow But the enjoyment level of using bricks nobody likes being a chunk Nobody likes clicking around a thousand times and moving their mouths all across the screen You got to be more efficient with this stuff. I got to be more efficient with this stuff We’re going to hold each other accountable because we’re not chunks, okay?
0:23:32
All right, that’s it for me. I hope you I hope you guys like this drop comments below. I’m out peace
