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

the most confusing thing when i started in elementor was understanding the difference between columns sections intersections betting and margin i was very confused because there are a lot of things that you need to know before you were able to create amazing designs like these examples as you can see right here now after more than two years of working in elementor 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 so let's first talk about the difference between columns and sections i have 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 blocks that build up the length of a page so if you take a look at my portfolio website for example what you can see is one big section over here and this could be a section this could be a section this could be a section so these are the main blocks 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 side because columns can only be stacked horizontally and any content that you're gonna 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 widget that you drag out of elementor you're gonna 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 wide as the section the 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 then the section will stretch up and the columns will stay the same by default elementor main columns are 1140 pixels wide and the sections are as wide 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 this whole artboard is 1400 wide but the main content like all the elements as you can see from the menu to all the images are all inside of this main grid and this main grid is 1140 pixels wide and that makes this design perfect for elementor so you have some elements in the website that are wider than that for example header images like over here but for images and background colors it doesn't really matter if it becomes a bit bigger or a bit smaller but the content needs to stay on its place so that's why all the columns have a fixed width 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 then 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 this whole section with one click so then if you use this option you have two sections or even three 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 inner sections 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 inner section and then in that inner section 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 is a column and this is a section if you drag in an inner section 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 elementor 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 grid inside of one big section that you can copy to another page or for example pick 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 with 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 you then delete one column again as 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 so 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's 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's this column over here and this column over here and inside this column there's also another intersection as you can see right here so in this way you can create a much more complex design than just the normal basic layouts okay so now we've covered this first part now let's talk about margins and paddings because if you understand margins and paddings 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 inside 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 inside space is the batting and the outside is the margin and this is also true for the section the inside batting and outside margins and this also is the same for the other elements so if you apply 30 pixels of margin bottom to the top element 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 this simple design over here title text 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 effect so first let's take a look at what's already happening here the left column over here with the text 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 so here it's minus 150 pixels and that 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 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 elementor on wordpress as you can see right here i have managed to create this simple design so let me show you how this is made so 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 a intersection just for these two text layers then there is another intersection which contains these three columns 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 gonna put this at 60. now we want to move it to the top so we're not going to use top but we're going to use minus stop and that way it moves to the top so 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 maybe -70 and yes as you can see this already looks pretty nice this 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 on to 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 a main section then we always start with a main column which is this one over here and then what happens over here there's an inner section so i've just dragged one intersection inside of the main column and this intersection has two columns one two in the right column there's one image in the left column there's an image a title 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 give 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 so that is where i use the content with so you can give a whiff 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 11 40. 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 place an inner section inside of an inner section so you cannot 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 advanced 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 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 the cool hover effect so as you can see not very complicated to create but it looks really cool now let's go on to the next one which is the most interesting one so i've recreated this design because in a previous video we took a look at this and this looks really creative so what i've done is i photoshopped myself in this image here is some proof to recreate this whole design so how is this built 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 style background i've set up a background image that has this this visual in the corner then 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 the screen so when your screen becomes bigger or smaller it will adjust and in this way you have a cool background that interferes a little bit with the design so then inside of here there are two inner sections 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 a text and there is just a little bit of padding top padding on the inside of this column as you can see over here 80 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 intersection 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 tell this initiation like hey move up minus 180 pixels and then i put the z index at two and the set index is kind of like the same thing as layers inside of a photoshop or adobe xd 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 don't have to put this at one it automatically i think it's one or zero by default so that's it and here in this column there is just a background again as you can see a simple background and padding on the inside 50 on all sides so that it creates space on the inside over here then these social media icons that i created which are vertical are just an icon list without text in it so normally there's text over here i just deleted that text it's 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 the 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 it's 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 padding if you want to but that makes your life a lot easier so that is the 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 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 logo is going to change and you want to keep your design consistent if you're done with something then you want to 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 add 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 and set the width over here back to your 19. 3 and in this way you can keep the same design as you want of course you can also just use your mouse like this and change it up but this is a feature that you use very often also for example with this these three columns over here are all 33. 3 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 a tree so a three column layout is this first one then it automatically has that width like i said before you can give columns 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 with 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 text over here and then add 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 so if you can use the background 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 elementor and that is when you have a design like this with a three column layout and 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 20 pixels right for example or 30 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 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's 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 7 over here also 7 over here and then 14 over here because 7 plus 7 is 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 in between so it's not perfect you can also put six and six over here if you want that but then this box it's two pixels less white 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 10 10 and 20.