Sections, Columns, Margin & Padding EXPLAINED - Elementor WordPress for Page Layout

1. Sections, Columns, Margin & Padding EXPLAINED: The most confusing thing when I started in elements or was understanding the difference between columns, sections, intersections, batting, and margin. I was very confused because there are a lot of things that you need to know before you are able to create amazing designs like these examples, as you can see right here. Now after more than two years of working in element or I wanted to make a video for everybody that still has questions about sections, columns, padding, and margins. In this video, I will explain the theory of how it works and how you can create more complex and cool-looking designs. I worked really hard on this video, so I hope that you will like it and let's just get started now. 2. Columns and sections: So let's first talk about the difference between columns and sections. I've illustrated the section with a blue outline over here and there's always an S inside of it. And you can see those two rectangles, which means that sections can be placed on top of each other, like you can see in this example over here. So sections are kind of like the big blogs that build up the length of a page. So if you take a look at my portfolio website, for example, which again c is one big section over here. This could be a section, disk could be a section, this could be a section. So these are the main blogs that build up a page. Now columns are always inside of sections, and I've illustrated them right here with the purple dotted line and a c inside of it. And here I've placed the rectangles on the site because columns can only be stacked horizontally. And any content that you're going to put in your website is always inside of a column. You cannot place content inside of a section. You always need a column to put something inside of it. So every witchy, you drag out of elements or you're going to put that in a column that is part of a section or an intersection, but more on that later. So what you can also see in this example is that the column is not as white as the section. This section right here is full screen and the column is not. This is important because everybody has a different screen. So if the screen becomes bigger than this section will stretch up and the columns will stay the same by default element or main columns or 1140 pixels wide. And the sections are as white as the screen gets. And those 1140 pixels are of course, on a desktop. So let me show you an example here. This is one of the client websites that I have designed. And as you can see right here, does hold. Our board is 14 hundreds wide, but the main content, like all the elements, as you can see from the menu to all the images are all insight of this main grid. And this main Great is 1140 pixels wide. And that makes this assign perfect for elements or so. You have some elements in the website that are wider than that. For exemple header images like overhear, but for images and background colors, it doesn't really matter if it becomes a bit bigger or a big, smaller, but the content needs to stay on eights place. So that's why all the columns have a fixed width. 3. Inner sections: Okay, so let's go back to the columns. Like I said before, the columns can be stacked horizontally so they are next to each other. So let's say that you want to make two rows of columns, something like this. That is not possible. Why not? Well, because columns can only be next to each other and not above each other. That's why if you want to create a design like this, you have to do something like this. So you have to place the other columns inside of another section. And then if you decrease the spacing between all of these items that you can make them close to each other. But this is not always what you want. Because for example, this is one main section that has a title, a text, and some images. This kind of design is probably something you're going to use on different pages. So you want to be able to copy this whole part is whole section with one click. So then if you use this option, you have two sections or even tree if you also put the title in a different section, which is not very practical for copy and pasting to other pages. So that's where intersections come in. So let's go back to an empty section with one column inside of it. What you need to do is then insert an intersection. Then in that intersection, there are two other columns because by default, if you drag in an intersection, then it automatically has two columns. So let me show you what I mean. If you create a normal section, So a main section, you will only get one main column, this column. And this is a section. If you drag in an intersection like this inside of that column, you will always get two columns inside of that intersection. So that is what you can see right here. And with this design, you can stack columns on top of each other in one main section. So for example, if you wanted to create this design, then the structure behind the scenes in elements or looks a little bit something like this. So you've dragged one intersection inside of it. You've duplicated one of those inner columns. So then you have three columns inside of that intersection. And then because sections and intersections can be duplicated on top of each other, you just make a duplicate. And now you have two intersections with both three columns. And in this way you have a sixth grade inside of one big section that you can copy to another page. Or for example, big this whole section up and then drag it a few positions up on the page. And the beauty about columns is that you can adjust them. So for example, if you want a design that looks a little bit something like this, you can do that. You just delete one of those columns and you change the width of the column. So let's see a real example here. So here we have one intersection inside of a main section. When a column, you can easily duplicate this right-click and then duplicate. If you then duplicate this one, you have those two inner columns. If He then the lead one column, again that you can see now they become Center, but you can drag like this and put it at 33.3. And in this way, you have something that looks a little bit more custom to. I've used that on my own website. As you can see, this is part of my About page. And if you click on this, you can see that this is the main column, then there is an intersection with two columns, and here are three columns, but I've just left one column empty. And that makes it looks like this. Very nice. So now you know that you can stack sections on top of each other and columns next to each other. But this also means that you can duplicate the main column, as you can see right here. So if you do that, then you have two columns with both two intersections inside of them. So with this, you can create something that has a lot more possibilities. I've done that for example, with this website, which is a magazine website, as you can see right here. Here is my main section. Then there is this column over here and this column over here. And inside this column, there's also another intersection, as you can see right here. In this way, you can create a much more complex design than just the normal basic layouts. 4. Margin and padding: Okay, so now we've covered this first part. Now let's talk about margins and paddings. Because if you understand margins embeddings, you can customize the design to make it look really creative to create overlap effects and things that just look way more cooler. So let's get started. Like I said before, the content is always inside of a column and you always have space inside of an element and outside of an element. Like for example, if you have a nice coat, there's also special padding on the inside. That's how you can remember it, right? So the padding is the insight, the margin is the outside, so that's everything outside of a specific element. So a column also has an outside and an inside. And the insight space is the batting and the outside is the margin. And this is also true for dissection, the insight batting and outside margin. And this also is the same for the other elements. So if you apply 30 pixels of margin bottom to the top elements, and in total there will be 60 pixels between the button and the element above it. So now it's going to become fun. Let's go to a few realistic examples. So you can see the simple design over here, title, tags, button, a background, and an image. So let's say that we want to create a design that looks like this, where you have this cool overlapping effects. So first let's take a look at what's already happening here. The left column over here with the texts in it has a padding of 30 pixels on all sides. That's why there's enough space around the elements. So let's first put the image a little bit down. So how you do that is by adding margin on top because that will push the image down. Then if you want to push the image to the left, you need to apply margin left, but then a minus one. Here it's minus 150 pixels and they will drag the image to the left. And then we have a problem with our text as you can see. So what you then need to do is add more padding on the inside of the left column where the text is. So that means that the right padding of that left column will be more than the top, left and bottom. And then you will get a design like this. 5. Practise examples: So let's first start with a simple design. I've tried to recreate a few designs that you maybe have seen in the video. How to know if your design can be built in element or on VR pressed, as you can see right here, I have managed to create this simple design. So let me show you how this is made. Or first of all, you can see that there is a main section over here. This is a section. Then there is a main column here in the background, and then there is an intersection just for these two texts layers. Then there is another intersection which contains D three column. And then for these images, these images have an already applied shadow that I created in Adobe XD, but without any styling, it would look like this. So what I need to do right now is I need to change a few things in the margin because we want to change the outside of this dish. So in order to change this, what you can do is just click on the minus left and then let's see what happens. And as you can see right now, this image directed to the left. So I'm going to put this at 60. Now we want to move it to the top so we're not going to use top or we're going to use minus stop. In that way it moves to the top. For example, let's try minus 80. That's already a little bit better. Let's try this. Let's try 140. This is already overlapping the column right now. And then I only need to do a little bit to the bottom may be minus 70. And yes, as you can see, this already looks breeding ice is flowing effect by the way, if you want to know, that's part of the hover effects that you can find right here. It's called Bob. So that's pretty cool. Let's go onto the next one. Okay, so this is a little bit more complicated. So what have I done here? Again, we have the main section over here. We always start with the main section. Then we always start with a main column, which is this one over here. And then what happens over here? There is an intersection. So I've just dragged one intersection inside of the main column, and this intersection has two columns, 12 in the right column, there's one image in the left column, there is an image, a tidal text, two buttons, and a background color. So by default, a column doesn't have a background color. So you can set up the background color right here as you can see. So that is what I've also done for the background column as you can see. And in this way we have three layers on top of each other. And what I've also done to create this is gift this intersection a width because by default it's going to be full width inside of the main container. So that is 1140 pixels. But we don't want that because we want something that's a little bit thinner sometimes. That is where I used the content width. So you can give a width to all of the content inside of a section. You can also do that by the way, for your main section, if you would like. But that is already set at Box. And as I said before, box is always 1140. Now there's one more thing that I want to show you in this design and that is that there are two buttons next to each other. And this is not done with another intersection because you can only place one intersection inside of a main section, but you cannot plays an intersection inside of an intersection. So you're going to go that deep. If you drag in an intersection like this, as you can see, it will try to put it under that main intersection. But not inside of this intersection, that's not possible. So what I did here is a little trick. So I've just imported a Button and I went to advance and then positioning. And then in positioning, this is normally on default. You can put it at inline. And then if you put this button also on inline, Then the items can be placed next to each other. And then the only thing that I did is add a little bit of padding over here or margin to create a little bit of space between these two buttons. And I've applied a cool hover effect. So as you can see, not very complicated to create, but it looks really cool. Now let's go onto the next one, which is the most interesting one. So I've recreated this design because in the previous video we took a look at this and this looks really creative. So what I've done is by photoshop myself in this image here is some proof to recreate this whole design. So how is this build up? Again, it's actually not that complicated, so it's just one main section. Then there is one main column, as you can see over here, that contains everything. The only thing that it doesn't contain is this background image over here, but that is just a background image of the main section. So what I've done, if you go to stele background, I've set up a background image that has this visual corner than if you put the position at bottom left, then the camera will always start from here. And then I've put this as cover, so it always stretches to screen, so the screen becomes bigger or smaller, it will adjust. And it is where you have a cool background that interferes a little bit with the design. So then inside of here, there are two intersections. This is the first one, and it just contains this text and this image. This is just an image that I've uploaded, right? Because I've created that in Photoshop. So an image and text and there's just a little bit of padding, top padding on the inside of this column, as you can see over here, AD. And there's a lot of betting on the right to make sure that this text breaks inside of this column. Then there is the second in our section, which is this one. And this one has a lot of negative margin so that it can overlap the intersection that you can see right here. So if you delete this margin, this is how it actually is. Two columns layout in an intersection, three columns layout in an intersection. And then I just dealt this initiation LA, Hey, move up minus 180 pixels. And then I put the z index at two. And a z index is kind of like the same thing as layers inside of a Photoshop or Adobe ksi or any creative tool. So the more on top it is, so the one with the highest number is on top of everything. So here I have only two layers, so I've made this two and then this is one, but you didn't have to put this at one. It automatically, I think it's one or 0 by default, so that's it. And here in this column, there's just a background. Again, as you can see, a simple background and betting on the insight 50 on all sides so that it creates space on the inside over here. Then the social media icons that are created, which are vertical or just an icon list without texts in it. So normally there is tax over here. I just deleted that text is just a list and then I have aligned it to the right as you can see, and place it in this column. And then the only thing that I did, which I didn't show you yet, is I put TIF vertical alignment on the bottom because you can use padding and margin for everything if you want to. But that is not best practice because if you just want to put something at the bottom, then you have to guess with all those pixels is not a very nice workflow. So what you can do then is just put the vertical alignment at the bottom and then all the elements will start from the bottom. And then you can add a little bit of banning if you want to, but that makes your life a lot easier. So that AC vertical alignment option, okay, so now you know the basics, the most important things, you understand the difference and you can probably create some more custom designs right now. But there are still a few things that you need to know so that you don't run into unnecessary problems. 6. Other things you need to know: So the first thing that I wanted to show is that column widths can change if you create a new column and sometimes that's not what you want. So for example, if I change the width of this column, then the size of this logos going to change and you wanna keep your design consistent. If you're done with something Dan, you wanna keep it that way. So in this example, this column is 19.3% and then it's perfect for the logo. So then if I create a new column like this, at a new column, then you can see that all of a sudden everything changes. That's not what I want. So then you can go back to your column, set the width over here back to your 19.3. And in this way, you're gonna keep the same design as you want. Of course, you can also just use your mouse like this and change it up. But it is a feature that you use very often. Also, for example, with this D3 columns over here are all thirty-three point three. So there's also a little trick over here that's called structure. If you don't want to type in the numbers, here are a few basic layout and choose from. So it three-column layout is this first one. Then it automatically has that with, like I said before, you can give columns and background as I've done over here. I've done that with a color, but you can also give it a background image. So for example, what a design like this, you can give the whole column a background image and then you can still place items on top of it because it's not a very good practice to just use an image and then add texts over here and an ad negative margin to the text to make it on top of your image. But you can also set up an image as a background. And then every element you put inside of this column will automatically be on top. So that is how that works too. If you can use the backgrounds feature over here, that's better than using negative margins to make things on top of each other. Okay, now here's one thing that I don't really like about element or, and that is when you have a design like this with a three column layout, you want 20 pixels in between all of those sections. How can you do that? I haven't found a solution yet. So the most obvious thing that I see most people do is just give every column a Sweeney pixels, right? For example, or charity or whatever you want. But the problem with this is that there is some space over here, which means that your website is not perfectly aligned to the grid. And this can make your design look less professional because it's not very good aligned. And another solution that I see some people do is just add padding on the left over here, like this. Let put it on the left and then just delete the padding on this middle one. But then the problem is that this block is bigger than the other two, so that also doesn't work. So what I always do is I do a little bit of math. So let's say that you want 20 pixels between those columns. What I then do is I just go to the margin and for example, I do 14 over here and seven over here, also seven over here, and then 14 over here, because seven plus seven. 14. So that means that this block is 14 pixels less wide, but that's also true for this block and this block. And in this way, it's perfectly aligned to the grid. And there is 20 pixels, actually 21 inbetween, so it's not perfect. You can also boot 66 over here if you want that, but then this box, it's two pixels less wide, so it's also not perfect. So I don't really have a solution for this. Unfortunately, if you want 30 pixels in width, then it's easy. You just put 20 over here, Sen. Sen and sweaty. Now this is perfect. Again, if you have a better solution than this, please let me know because I'm not sure, but this is the best solution that I could find for this problem. And if this still is a little bit too much for you and you don't really feel confidence, then you can use the navigator. So if you're right-click anywhere inside of elements or you can get the navigator over here and here you can see everything. So you can see the hierarchy. This is the main section, this is the column, and then it also will be selected. So in this way, you can almost never lose where you are because you can simply see the hierarchy over here and you can even give every section and name if you want to. So this section, for example, is a story, so you can just double-click on the name, you type in story, and you can click on them and then really easily navigate through the website. And you can even drag and change the position of each section. Over here. It really makes your life a little bit nicer, which you can also do, which is really cool is height elements on mobile. So now we've only talked about desktop, but let's say on mobile, I don't want to show these two images because I don't know which one to choose and I just want to hide them. So what you can do is you can go to mobile mode. You can click on your main section. I've already done it as you can see, because it turns gray. You can go to Advanced, you can go to responsive, and you can click on height on mobile. And this will just hide this whole thing on mobile. You can also do that on tablet if you want to. So dad is also pretty cool, but you also can do, which is pretty cool, is switched positions. So for example, if I want to first show the images on mobile and then the text, which is something that you want. A lot of times on mobile, you can go to that same window over here and then click on rivers columns. So if there are two columns inside of this intersection, which is true for this website is take a look over here in this intersection two column, right? Go to mobile. Make sure to put this on. Yes. And then it will first show the images and then the text. And then you can see that you need to add a little bit of padding over here to live, to give it a little bit of room, but those are details. And then the last thing for responsive modes, which I want to show you is that you can reset the settings on mobile if you want to without affecting the desktop. So for example, I have 60% of padding on the right over here, which puts all these texts on the left. Then if I go to mobile, normally it would look like this. Now, I can just unlink this and adjust the padding for mobile. Without that, it will affect the padding on desktops or data is also pretty nice. 7. When to use what: Okay, now let's go to the last part of this video which is called so when to use what? Because padding and margin still is kind of similar, right? So what you wanna do is understand the basics and then add your own variation on top of it. So what you need to know is that elements or wasn't really built for designers. It's more for like half designers had don't want to spend a lot of time on the details. So they have tried to help us, but they have applied a lot of bedding and styling already inserted elements. So for example, every column already by default has a little bit of padding, which is actually very frustrating. And because as you can see in this design, I have not changed a bending over here. So if you drag in an intersection, then you put in some elements. For example, attacks over here, something like this. You can see that there's a little bit of space between here and here. And this is because there is already an applied padding inside of each column. So if you go to advance, you need to unlink the padding to actually move it to the size. So as you can see right here in this design, this main column already has the padding, the standard fanning, and I need to always unlink it in order to make sure It's actually on the 1140 grid. So the whole width of the website. So if you don't do that and you are risking that you're part are not aligned to the logo inside of your header, but also inside of your header. Make sure to do that. Otherwise, there's always this little space on the left which will make everything a little bit more narrow. So if you want to make your designs pixel-perfect, makes sure that you delete the batting inside of the main columns and put them at 0. When it also suggests is when you make a new section, is that you always apply 60 pixels on the top and the bottom and 0 on left and right. So let's create a new section. I'm going to create a simple section over here and just always give it a little bit of padding on the top and the bottom over here so that you always have some whitespace to work with. And this is nice to work in. Otherwise everything is cramped. But also in a good design, there's always some whitespace in each section. This is also the same for tablet and mobile, but then you also need to apply betting on the left and on the right, because otherwise there will be no betting on the left and the right and all the elements will be aligns to the sides of the screen, which doesn't look very professional. So what you wanna do is you want to apply at least 15 pixels, I would say to the left and the right, and also 60 on the top and the bottom. And again in the column 0 pixels embedding is the same on tablet. On tablet almost always pick 20, but I would say 15 is the minimum. So let's now make it realistic what this will do if you take a look at my website and you actually open the navigator so we see what we're doing. We're here in this main section, right? If we go to advanced, you can see defending over your left and right. If I delete that, then it looks like this doesn't look very professional. So you want to give it a little bit of space on mobile and tablet and not on desktop. Because on desktop there, there's already enough whitespace because most screens are wider than 1140 pixels. So that is why I do that. So now how to deal with the bedding insight of the sections and what to do with all of the elements. So let's pick this exemple. There's a real project that I've done. So here you can see there, there's a subtitle, a main title. There are some elements which is a three-column layout and there's a button. And this is all one main big section. So what I would do, first of all, is at betting on the top and the bottom. Normally, I would say at least 16, but for this design, I've picked 90. But because I wanted to have a little bit more whitespace, I wanted to make it feel luxurious. So if you do that, then you don't have to apply margin top on the tour stacks on the top and also you don't have to mess on the button. And that is nice because you're always going to use the buttons and the text in a lot of other places. So my advice is to always try to avoid adding bottom margin to buttons and two texts and to only use that on elements that actually need that space. So in this example, what you wanna do, make sure that there is a margin on the images grid. So you put a margin on the grid on a three column layout, because that three-column layout always needs a little bit of whitespace, but that's not always the case for the title. The title doesn't always need a 50 pixels at the bottom. So don't put the 50 pixels on March in bottom on the text, but put it on the three column layout because that always needs whitespace. It's the same four buttons. Of course, you need a little bit of white space for a button, but elements or already has applied, a lot of bedding in a lot of places are ready. So if you're dragging a title, it already has betting. So you don't really need to worry about that. Let me show you what I mean. So as you can see right here, I haven't applied anything to the title or the button, but there is already a little bit of space, so you don't really have to worry about that. Just try to avoid it on text and buttons and put the big margins on things that you don't use that often because it texts you are going to use that often. You want to just copy that and paste it. You don't want to have to deal with the margin and the padding that you have applied on a different page. So by using this method, you are going to make it a lot easier for yourself. 8. Thank you: So I hope that this class gives you some confidence now in element or that will allow you to create more creative designs with elements. Or now I have a lot of plans to create more classes that will show you how to create actual designs with element or. But for now we've covered the main theory which will give you a main foundation for understanding how this all works. So I hope that you're also happy that you've watched this class. I worked really hard on this glass and I really enjoyed it. So if you wanna see more classes of me, then you can click on my profile. I have a lot of other classes that will help you to grow or start your own web design business. So thank you for watching. And if you have any questions, then you can leave them down in the discussions below. Thank you.