FREELessons: 9Length: 48 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Modifying the Layout

VisBug also has several tools for adjusting the layout. You can tweak the margin and padding with keyboard shortcuts, you can reposition elements to new locations, and you can even modify an element’s flexbox properties. When you’re done, use the “Guides” tool to check everything is lined up nicely.

See how you can tap into VisBug’s layout modification tools in this lesson.

2.4 Modifying the Layout

Hey, welcome back to Visbug Quick Start. In this lesson, we're gonna look at all the ways that you can modify the layout of your sites using Visbug. There's actually quite a few different tools in Visbug that you can use to modify your layout. And they can really handy for tweaks adjustment to make sure that you get everything tuned just so. But the first one that we're gonna look at is the Guides tool, which is up here, and this is really just about allowing you to check your alignment. As I hover over each element, you can see that it gives me a little dotted line to show me the outside constraints of each element. And it's just helpful when you wanna make sure that things are lined up properly. The next tool that we're gonna look at is the Move tool, which is this one here. You can activate it by hitting the V shortcut key. This lets you select an element and move it among its siblings, or change its level up to the parent level or down to the child level. So first up, just gonna select this element here. You can see that it has a label inside 1 and then it has siblings next to it, 2 and 3, so I'm gonna move it across in between 2 and 3. And I can do that just with the arrow keys, so I hit to the right, and you can see that the whole div has moved itself over, and then I can move it back again. So just right and left. I can also change what level things are on as a parent or a child. So if I select this item for example. Just like we did before, it can move amongst its siblings. But if we hit the up key, I can pop this element out of its current parent and put it onto that same level. So now it's on the same level as the one box, which was its parent. Now, I can move this in between the other siblings on the new level that it's at. And if I wanna pop it back into the box that it was, then I can hit the down key. And that just pops it right back inside that element that it was in before. So I'm just gonna pop it out again by hitting the up arrow key. And the way that down arrow key works is it will push the element inside whatever the next sibling is. So if I move this over one, now if I hit the down arrow key, it's gonna pop this element inside the two box. There you go, you can see that that is now inside the two box instead. Then I can pop it back out again with the up arrow key. So you can really do a lot of manipulation with the position of each one of your elements. All right, so I'm just gonna refresh that. Now we're gonna look at the Position tool, which is this one here, you can activate it with the l key. The Position tool just basically allows you to modify the absolute position of an object. So I can grab any object, so this one, and I can just drag it to wherever I want. If you drag a parent object, it will take all of its children with it. But you can, Grab a child element and move that relative to its parent. All right, we'll just refresh that and reset again. Next up we're gonna check out the margin tool, which is this one here, and you activate it with the m key. As the name suggests, this tool allows you to modify the margins of any element. So, let's select this box here. The way it works is you hit the arrow key in the direction of the side that you want to change the margin for. So if I wanna change the top margin for this box, then I hit the up arrow key and that increases that top margin. If I hold down shift, then it will go in 10 pixel increments to move faster. Now I can do the same thing on any side. So I could do it on the left side, right side, and the bottom side. If I wanna decrease the padding, the shortcuts are all the same, except you hold down the Alt key. So Alt+Up to decrease the top margin. Alt+right to decrease the right margin. Alt+down to decrease the bottom margin. And Alt+left to decrease the left margin. If you wanna change all the sides at the same time, then you hold down control. And you just hold down the up key to increase all the sides or you hold down the down key to decrease all the sides. So, let's clear that with Alt+Delete. Then you also have the padding to Which is exact the same as the margin tool. Or like in hit paint and bring out the padding tool. The shortcuts are all the same but they fit the padding instead of the margin. So increase the top padding with the up arrow, increase the bottom padding with the down arrow. The right padding with the right arrow. Left padding with the left arrow. And again, if you wanna affect all sides at once, hold down Control, and hit up to increase the padding, hit down to decrease the padding. And if you want to effect individual sides decreasing their padding, hold down Alt. And then hit the arrow key that corresponds with the side that you wanna decrease the padding for. So clear that with Alt+Delete. Now there's just one more modification tool, which is really cool, and that is this Flexbox Align tool up here. In this page that you get with the course, this is the modifying layout.html page. This dotted line around here represents a flexbox container. And we're gonna select that with this flex box tool active. Now there a few things that I can do to modify the way that flexbox is working here. One of the things that I can do is I can set the alignment. All I have to do is use the arrow keys. So if I hit right, then I'm moving the alignment over to the center and then the right. Then back the other way, then I can do the same thing with the vertical alignment by hitting down. So you can see, that's the box there, it's changing its alignment. So that's just straight up arrow keys controlling the alignment there. You can also control distribution. So now if I hold down Shift and I hit the right arrow key, you can see that the boxes in our flexbox here are being spread across the available space. Then I can hit shift left to go back again. We can also control the direction that flexbox is running in, whether it's running horizontally or vertically. We do that by holding down the control key. Then if you want more of your flex box items to run vertically, you just hit down button and now they're all stacked on top of each other. And if you want it to go to horizontal, then you just hit Control and the left button. So with this we'll be working on the top level flexbox container, but it also works on child elements as well. So if I select this box here, then I can effect these children. So for example, if I wanna have them stacked horizontally, then I can hit Control+left. I can then also combine that with the selection tools that we talked about before. So I can hit Tab to go over to the next box and I can change the alignment on that one in the same way. Then if I hit Shift+Enter, I can go back up to the parent. And now we're gonna get slightly different results when we modify the layout here. So that one is really helpful. Sometimes it can be a bit difficult to wrap your head around how flexbox works and which settings you should be applying. So with this tool, you can just jump in. And just throw different settings at the design and see which one works. You're not gonna mess anything up, you can just change things up as much as you want. And then when you finish, you can just refresh and go back to exactly how things were. And of course, just a reminder that any of the changes that you make here. You can always grab the Inspection tool, click. And then you'll be able to copy the code for the changes that you've just made using Visbug and put those back into design. All right, so that [INAUDIBLE] everything you need to know about Visbug's layer tools. In the next lesson, we're gonna check out what you can do with images using VisBug. VisBug makes it really easy to replace any image that's in the site design and I'm gonna show you how to use it in the next lesson. I'll see you then.

Back to the top