Column and Rows Basic Layout
Ready to get started?
Hi, in this video, I'm just going to show you how to work with rows and columns.
Rows and columns are the main way in which you can compose the layout of your pages. So when you're logged into your website, you'll see the admin toolbar at the top here if you're logged in, and you'll see edit with front-end page builder link at the top there.
So click that and that'll open up the page builder. And when you're in the page builder, if you scroll down to this section here, for example, I can demonstrate what we're talking about here.
So we've got one row here which is split up into three columns. Now if you open up the row here click into the Layout settings and pull this up here a bit, you can see there are different layouts. You've got a full-width layout and you can see it changes to full width. You've got half and half. You've got two-thirds and one-third and so on and so forth.
That will create these columns inside that row in order for you to compose your layout. In this example, I'm just going to do half and half.
I'm going to update that and then close this row layout bit. Now we've got two columns in this row. In this first column, we have two text boxes. What I'm going to do is I'm going to duplicate this text... Sorry, no, I'm not going to duplicate that. I'm just going to drag it over here. I'm going to click and drag this text box over here. I'm going to see if I can place it inside this column here. There you go.
You can see that in this particular case, there are gaps at the top and bottom of this, which you might like or maybe you'd prefer if it is more aligned. What's happening here is this row is centre-aligned.
What it's doing is it's aligning all the contents of this row centrally in the middle. What we want to do is we want to go into the row settings and we want to scroll down to equal height and column content alignment and change that to default. You can change that to top, middle, or bottom, but we're going to change that to default. That will then make these two columns aligned at the top. But now it's created this gap at the bottom, which again, you might like, but if you didn't like that, then what you could do, you could add more copy into this text block.
Or what you could do is you could open up this text block and say, Open up, copy this text here, remove it from here, save that, close that, open up this text block and paste the text into there, and then save changes, close that. Now that's done that. Then what we could do, we could open up this text block and we could just put a paragraph in there. There you go. That looks a bit nicer.
The other things you can do if you wanted to, all the text here in the columns is left-aligned. You could make it center-aligned perhaps. You could go into the column settings here, click the little column settings icon and centre the content there by moving that toggle, and that will centre that.
We could do the same for this one. What we could do as well is you'll notice that this row has padding at the top and bottom. So if we open up the row settings, we can see a few things. We can see that the padding is 6 % at the top and 6 % at the bottom, so we could make that 3 %. If you click this little padlock, it will duplicate that at the top and bottom, or we could undo that and have different paddings at the top and bottom.
But let's say top and bottom is 3 %. So that makes the padding less now. What you could also do is you could change the padding in the column. So for example, if we click the column settings, we could have column padding of say four %, and we could do the same for this one. There you go.
Now I'm going to do... I think that's enough from the basic way of using rows and columns. In another video, I'll show you how to add background colours, background images, and that type of thing.
Column and Rows Basic Layout
Ready to get started?
Ready to get started?
Hi, in this video, I'm just going to show you how to work with rows and columns.
Rows and columns are the main way in which you can compose the layout of your pages. So when you're logged into your website, you'll see the admin toolbar at the top here if you're logged in, and you'll see edit with front-end page builder link at the top there.
So click that and that'll open up the page builder. And when you're in the page builder, if you scroll down to this section here, for example, I can demonstrate what we're talking about here.
So we've got one row here which is split up into three columns. Now if you open up the row here click into the Layout settings and pull this up here a bit, you can see there are different layouts. You've got a full-width layout and you can see it changes to full width. You've got half and half. You've got two-thirds and one-third and so on and so forth.
That will create these columns inside that row in order for you to compose your layout. In this example, I'm just going to do half and half.
I'm going to update that and then close this row layout bit. Now we've got two columns in this row. In this first column, we have two text boxes. What I'm going to do is I'm going to duplicate this text... Sorry, no, I'm not going to duplicate that. I'm just going to drag it over here. I'm going to click and drag this text box over here. I'm going to see if I can place it inside this column here. There you go.
You can see that in this particular case, there are gaps at the top and bottom of this, which you might like or maybe you'd prefer if it is more aligned. What's happening here is this row is centre-aligned.
What it's doing is it's aligning all the contents of this row centrally in the middle. What we want to do is we want to go into the row settings and we want to scroll down to equal height and column content alignment and change that to default. You can change that to top, middle, or bottom, but we're going to change that to default. That will then make these two columns aligned at the top. But now it's created this gap at the bottom, which again, you might like, but if you didn't like that, then what you could do, you could add more copy into this text block.
Or what you could do is you could open up this text block and say, Open up, copy this text here, remove it from here, save that, close that, open up this text block and paste the text into there, and then save changes, close that. Now that's done that. Then what we could do, we could open up this text block and we could just put a paragraph in there. There you go. That looks a bit nicer.
The other things you can do if you wanted to, all the text here in the columns is left-aligned. You could make it center-aligned perhaps. You could go into the column settings here, click the little column settings icon and centre the content there by moving that toggle, and that will centre that.
We could do the same for this one. What we could do as well is you'll notice that this row has padding at the top and bottom. So if we open up the row settings, we can see a few things. We can see that the padding is 6 % at the top and 6 % at the bottom, so we could make that 3 %. If you click this little padlock, it will duplicate that at the top and bottom, or we could undo that and have different paddings at the top and bottom.
But let's say top and bottom is 3 %. So that makes the padding less now. What you could also do is you could change the padding in the column. So for example, if we click the column settings, we could have column padding of say four %, and we could do the same for this one. There you go.
Now I'm going to do... I think that's enough from the basic way of using rows and columns. In another video, I'll show you how to add background colours, background images, and that type of thing.
Column and Rows Basic Layout
Ready to get started?
Ready to get started?
Hi, in this video, I'm just going to show you how to work with rows and columns.
Rows and columns are the main way in which you can compose the layout of your pages. So when you're logged into your website, you'll see the admin toolbar at the top here if you're logged in, and you'll see edit with front-end page builder link at the top there.
So click that and that'll open up the page builder. And when you're in the page builder, if you scroll down to this section here, for example, I can demonstrate what we're talking about here.
So we've got one row here which is split up into three columns. Now if you open up the row here click into the Layout settings and pull this up here a bit, you can see there are different layouts. You've got a full-width layout and you can see it changes to full width. You've got half and half. You've got two-thirds and one-third and so on and so forth.
That will create these columns inside that row in order for you to compose your layout. In this example, I'm just going to do half and half.
I'm going to update that and then close this row layout bit. Now we've got two columns in this row. In this first column, we have two text boxes. What I'm going to do is I'm going to duplicate this text... Sorry, no, I'm not going to duplicate that. I'm just going to drag it over here. I'm going to click and drag this text box over here. I'm going to see if I can place it inside this column here. There you go.
You can see that in this particular case, there are gaps at the top and bottom of this, which you might like or maybe you'd prefer if it is more aligned. What's happening here is this row is centre-aligned.
What it's doing is it's aligning all the contents of this row centrally in the middle. What we want to do is we want to go into the row settings and we want to scroll down to equal height and column content alignment and change that to default. You can change that to top, middle, or bottom, but we're going to change that to default. That will then make these two columns aligned at the top. But now it's created this gap at the bottom, which again, you might like, but if you didn't like that, then what you could do, you could add more copy into this text block.
Or what you could do is you could open up this text block and say, Open up, copy this text here, remove it from here, save that, close that, open up this text block and paste the text into there, and then save changes, close that. Now that's done that. Then what we could do, we could open up this text block and we could just put a paragraph in there. There you go. That looks a bit nicer.
The other things you can do if you wanted to, all the text here in the columns is left-aligned. You could make it center-aligned perhaps. You could go into the column settings here, click the little column settings icon and centre the content there by moving that toggle, and that will centre that.
We could do the same for this one. What we could do as well is you'll notice that this row has padding at the top and bottom. So if we open up the row settings, we can see a few things. We can see that the padding is 6 % at the top and 6 % at the bottom, so we could make that 3 %. If you click this little padlock, it will duplicate that at the top and bottom, or we could undo that and have different paddings at the top and bottom.
But let's say top and bottom is 3 %. So that makes the padding less now. What you could also do is you could change the padding in the column. So for example, if we click the column settings, we could have column padding of say four %, and we could do the same for this one. There you go.
Now I'm going to do... I think that's enough from the basic way of using rows and columns. In another video, I'll show you how to add background colours, background images, and that type of thing.
Column and Rows Basic Layout
Ready to get started?
Ready to get started?
Hi, in this video, I'm just going to show you how to work with rows and columns.
Rows and columns are the main way in which you can compose the layout of your pages. So when you're logged into your website, you'll see the admin toolbar at the top here if you're logged in, and you'll see edit with front-end page builder link at the top there.
So click that and that'll open up the page builder. And when you're in the page builder, if you scroll down to this section here, for example, I can demonstrate what we're talking about here.
So we've got one row here which is split up into three columns. Now if you open up the row here click into the Layout settings and pull this up here a bit, you can see there are different layouts. You've got a full-width layout and you can see it changes to full width. You've got half and half. You've got two-thirds and one-third and so on and so forth.
That will create these columns inside that row in order for you to compose your layout. In this example, I'm just going to do half and half.
I'm going to update that and then close this row layout bit. Now we've got two columns in this row. In this first column, we have two text boxes. What I'm going to do is I'm going to duplicate this text... Sorry, no, I'm not going to duplicate that. I'm just going to drag it over here. I'm going to click and drag this text box over here. I'm going to see if I can place it inside this column here. There you go.
You can see that in this particular case, there are gaps at the top and bottom of this, which you might like or maybe you'd prefer if it is more aligned. What's happening here is this row is centre-aligned.
What it's doing is it's aligning all the contents of this row centrally in the middle. What we want to do is we want to go into the row settings and we want to scroll down to equal height and column content alignment and change that to default. You can change that to top, middle, or bottom, but we're going to change that to default. That will then make these two columns aligned at the top. But now it's created this gap at the bottom, which again, you might like, but if you didn't like that, then what you could do, you could add more copy into this text block.
Or what you could do is you could open up this text block and say, Open up, copy this text here, remove it from here, save that, close that, open up this text block and paste the text into there, and then save changes, close that. Now that's done that. Then what we could do, we could open up this text block and we could just put a paragraph in there. There you go. That looks a bit nicer.
The other things you can do if you wanted to, all the text here in the columns is left-aligned. You could make it center-aligned perhaps. You could go into the column settings here, click the little column settings icon and centre the content there by moving that toggle, and that will centre that.
We could do the same for this one. What we could do as well is you'll notice that this row has padding at the top and bottom. So if we open up the row settings, we can see a few things. We can see that the padding is 6 % at the top and 6 % at the bottom, so we could make that 3 %. If you click this little padlock, it will duplicate that at the top and bottom, or we could undo that and have different paddings at the top and bottom.
But let's say top and bottom is 3 %. So that makes the padding less now. What you could also do is you could change the padding in the column. So for example, if we click the column settings, we could have column padding of say four %, and we could do the same for this one. There you go.
Now I'm going to do... I think that's enough from the basic way of using rows and columns. In another video, I'll show you how to add background colours, background images, and that type of thing.