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 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 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 margin 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 going to 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 percent 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. now this is perfect so 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 confident then you can use the navigator so if you right click anywhere inside of elementor 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 a name if you want to so this section for example is a story so you 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 hide 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 turned gray you can go to advanced you can go to responsive and you can click on hide on mobile and this will just hide this whole thing on mobile you can also do that on tablet if you want to so that is also pretty cool what you also can do which is pretty cool is switch 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 reverse columns so if there are two columns inside of this intersection which is true for this website let's take a look over here in this intersection two columns right go to mobile and 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 this text 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 desktop so that is also pretty nice 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 want to do is understand the basics and then add your own variation on top of it so what you need to know is that elementor wasn't really built for designers it's more for like half designers i 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 padding and styling already in certain elements so for example every column already by default has a little bit of padding which is actually very frustrating because as you can see in this design i've not changed the padding over here so if you drag in an intersection and you put in some elements for example a text 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 advanced you need to unlink the padding to actually move it to the sides so as you can see right here in this design this main column already has the padding the standard padding and i need to always unlink it in order to make sure that it's actually on the 1140 grid so the whole width of the website so if you don't do that then you are risking that your parts 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 make sure that you delete the padding inside of the main columns and put them at zero what i also suggest is when you make a new section is that you always apply 60 pixels on the top and the bottom and zero 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 white space to work with and this is nice to work in otherwise everything is cramped but also in a good design there's always some white space in each section this is also the same for tablet and mobile but then you also need to apply padding 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 aligned to the sides of the screen which doesn't look very professional so what you want to 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 zero pixels in padding this 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 the panning over here 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 white space because most screens are wider than 1140 pixels so that is why i do that so now how to deal with the padding inside of the sections and what to do with all of the elements so let's pick this example this is 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 add betting on the top and the bottom normally i would say at least 60 but for this design i've picked 90 because i wanted to have a little bit more white space i wanted to make it feel luxurious so if you do that then you don't have to apply margin top on the tours text on the top and also you don't have to mess on the button and that is nice because you're always gonna 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 to text and to only use that on elements that actually need that space so in this example what you want to do is make sure that there is margin on the images grid so you put the margin on the grid on the three column layout because that three column layout always needs a little bit of white space 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 margin bottom on the text but put it on the three column layout because that always needs white space it's the same for buttons of course you you need a little bit of white space for a button but elementor already has applied a lot of padding in a lot of places already so if you drag in a title it already has padding 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 the text you're 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're gonna make it a lot easier for yourself so i hope that this video cleared some things for you up and i hope that it gave you more confidence to create more creative things inside of elementor now i will create more videos in the future where i actually show you step by step how to build a custom design like that but for now i think we've covered the main theory and i hope that you are as happy with this video as i am i worked really hard on it especially in all the illustrations so um if you liked it then please let me know by hitting the like button for example and if you want to see more videos about how to start and maintain your own web design business than living on pixels is the place guys thank you for watching and i hope to see you in the next video [Music] you

Channel: LivingWithPixels

Views: 187,597

Rating: 4.9815898 out of 5

Keywords: elementor wordpress, wordpress elementor, elementor tutorial, elementor pro tutorial, livingwithpixels elementor, elementor tutorial for beginners, elementor, elementor wordpress tutorial, elementor basics, wordpress elementor tutorial, wordpress basics, how to use elementor, elementor for beginners, using elementor in wordpress, elementor sections, elementor section, elementor sections and columns, elementor inner section, elementor layout, elementor layout design

Id: 0nm03bulRsQ

Length: 30min 28sec (1828 seconds)

Published: Sun Oct 18 2020