COLUMNS GRIDS STRUCTURE

"Now, I'm going to show you the third icon along, which is columns. In this case, I'll start with the two-column layout. You can see here these are all evens. And these are actually two columns by fractions, and these are three columns by fractions. Okay. We're just going to start with a straight two. And you can see here, it's automatically added to our inner blocks. We've got two columns, and it has automatically put the inner padding into this block, and then it's got a child component ready for us to go. Well, that's pretty nice.

Now, I can add my components as I would like. Pretty basic stuff there, but watch what happens here. I can go back to my column, and I can now just turn this to any of these. In this case, we're going to build out a three column, aren't we? I'm just going to select three column, and it changes it for us. But what I want to do now is capitalize on that work as I said in the introduction.

So, I'm going to clone this one now, and in the back here I'm going to change the background, so outer frame, pencil icon. Going to go to my background Colours, and I've got a setup that you're probably familiar with now. I'm going space cadet, and I'm going, as a gradient, this blue. And then, I'm actually using this as 130 on the gradient angle. I can use the gradient angle to find something that I like, but I can hone in and be very specific. I've decided I'm using 130, so I'll just close this now. And now, as quick as that, we've got two layouts for the price of one. I'm now going to turn this three column into a grid. I'm just going to clone this one.

We've got our original there, that we're going to add to the layouts drawer at the end. And now, in this one, I'm going to put it back to design mode, and now you'll see the beauty of the column tools. We looked at this slightly before the column tools, but now if I click the clone icon on here, I can just look at these, I can move up and down. I've got two images on the top and the bottom here. So, that's the beauty of using these parent columns because we can move our rows, if you like, of our grid up and down.

Now, what we'll do in this case is make a decision. I'm going to delete this image because we've got an image below here. I'm actually going to turn this into a two-thirds video and one-third shop. I can do this in the columns tool. This is what I want here, two-thirds, one-third. But if I was just to click this one straight away, when you change this, this has got three columns and this has got two, so it always deletes the last one. The last one has to go.

We want to keep the shop one. This is where we can use our rotate. Watch this. If I hit rotate, but we still want to keep the video there, don't we? I'm just going to click rotate one more time. Now, our image is over on the left. I'm confident now. I can now put this to two-thirds, one-third, and now we've got our video as the hero and then the shop to the left. So, this might be talking about the product, and then we've got buy it over here, which could be a cool way to use this particular layout.

At this point now I could say, "Yeah, I'm happy with that." I'll actually clone this one. Okay. Now, we've got our variant, and then I'm going to make our dark version capitalising on the work that we've done in three very quick moves. Now, we're looking really nicely there. If you recall from the introduction, I actually said that we're going to have another map here.

What we'll do in this case, we'll keep the slider, we'll remove the image altogether, and we'll have a map two-thirds and a slider one-third, in which case let's go and have a look at that. I'm going to use the clone tool to create another variant. And now, let's go and have a look at this so I could hit. Now, we want to get rid of the image, so I'm just going to use the rotate. The image is still in here. Again, use the rotate. And so, that's where we want to do.

Now, I'm going to change this to the two-thirds, one-third, and now we have our map. We want our map to be on the other side. What we want to do now is use the rotate and now our maps on the other side. I'm going to pop that into business mode. Now, that's looking good. What do we want to do next? Capitalise on the work that we've done, so I'm going to hit the clone icon. And now, I'm going to put this into our dark, knowing my settings, always being consistent."