Margin and Padding Basics in Elementor

hi all it's zip from elementor in this tutorial i'll go over margin and padding basics and show you how they can be used to build creative designs just like the one you see here as you most likely know margins and paddings are used to create space between elements and directly impact the layout as well as the look and feel of your site creating a natural flow for the user to navigate through the content is important especially when looking to increase conversions by guiding the visitor down a page therefore it's important to know what these two properties do and how they affect your design there are important differences which we'll go over in this tutorial and once you understand them you'll be able to make better design decisions let's make a start we will be working with this section which has two equally sized columns i've set the section's height to fit to the screen and the column position is set to middle so the columns appear in the center this will make things easier to follow during the tutorial there are three widgets in the right column the heading text editor and button widgets let's drag an image widget into the left one as you can see there already is some default space between the image and the column we'll get to that in a bit for example purposes i'll refer to the image widget as the element and the actual image as the content just to keep things clear let's start off by giving the image widget a border this will help us see how the margin and padding properties behave the border surrounds the element's content next in advanced i'll add some padding as you can see it adds space inside the border padding is used to create space around the content inside the defined border this applies to widgets columns and sections alike more on that soon you can see that padding grows the element's size and shrinks the content inside and vice versa padding goes around all four sides of the content and you can target and change the padding for each side when the values are linked all sides get the same value to set them individually simply click to unlink them i'll decrease the padding on the right a bit and increase the left linking them together again automatically sets them back to the 70 pixels we set before the border surrounds both the padding and content let's give the image widget a background color and see what happens the padding is affected by the styling of an element such as the background color you see here now let's give the image widget some margin and see if it behaves differently it adds space outside the border margin is used to create space around the element outside the defined border also margin isn't affected by the styling of the element such as a background color but it is affected by the styling of the container it's in in this case the column let's give it a background color so you can see if both background colors are the same though things can get confusing especially when designing without borders by the way it's important to know that in the editor the section column and widget handles and outlines aren't the borders as you can see the margin we added to the image widget appears inside the blue outline of the widget this might be confusing at first because when we remove the margin and the padding they seem to be the same these principles apply to columns and sections as well let's give the column a border so you can see heads up things might get more confusing before the penny drops no worries at the end of this tutorial you know the ins and outs of it all let's also add some margin and padding as you can see it behaves the same as with the image widget okay so let's recap what we have over here this is the image which is the widget's content outside it is some green padding it's green because of the widget's background color the pink border separates the padding from the margin which is purple because of the column's background color the columns padding and the image widget's margin seem to be the same because of it and lastly the column's margin will get the same color as the section's background don't panic if you're still confused i'll show you some more examples so things become crystal clear now that we know the basics let's reset all of the styling and go over some practical applications for using margins and padding soon we'll check out the mobile responsive settings as well like i mentioned before you can see that there's some space between the image widget and the column elementor adds this to keep things organized by default let's remove it so that the image widget takes up all of the column space pop quiz is that the column's margin or the padding well then it's the padding because it's the space inside the column's defined border let's unlink it as you can see all values are set to zero so no padding is set allowing the image widget to fill up the space i'll go ahead and select the image for the design now let's see how margins and paddings can be used to position the widgets in the column on the right often the same visual layout can be achieved by using margin and padding so when do we know what to use as a rule of thumb margin is used to space an element in relationship to other elements on the page for example to create space between the heading text editor and button widgets we can add some margin at the top and the bottom of the text editor widget padding on the other hand is used to create distance between the content and border of an element this way we can adjust the appearance of the element itself just like you see when we add some padding on the right over here it's important to note that for beginners using margin and padding can be confusing because both are parts of your element even if you don't include a border especially when the section column and widget backgrounds are the same color by adding a border things start to clear up a bit let's add one to this text editor we can see that the border surrounds the content which is the text and now the top and bottom margins we added to the widget are easier to identify also by adding a background color we can see that the margins aren't affected by the element styling but the padding is there are many creative ways to use paddings and margins so keep these basics in mind when playing around with them let's remove the background color and border and back in the advanced drop down check out the margin and padding these responsive handles indicate that the values also can be adjusted for tablet and mobile devices currently they are set for desktop let's enter the mobile responsive mode and see how the margin and padding behave as you can see they are left blank indicating they inherit the larger device's settings which in our case are the values we set for desktop let's first get rid of the padding on the right by unlinking the values we reset them all to zero then simply add the desired padding for mobile same goes for the margin unlinking removes the values inherited from the desktop it's important to make sure you check all padding and margin settings on desktop tablet and mobile and remember if they are left blank they will inherit the larger device's settings okay we're almost done here just a few more tips to see how elementor can be used to help you make better design decisions i'll go ahead and delete the text editor widget and instead of using margin or padding to position the heading and batten widgets i'll enter the column settings and in layout set the vertical align there are many options to choose from so make sure you check out the dedicated video i've linked in the description below to understand what each one does for this example i'll set it to middle so all widgets in the column automatically vertically align to the middle lastly if you want to position elements outside their container you can use negative margins they allow you to move widgets and columns above below other nearby elements on the page which can improve your designs when used accordingly let's say you want to move this heading widget to the left a bit outside the column so it overlaps with the image in the column on the left all you need to do is add a negative margin to the left side of the heading widget as you can see the content moves towards the left onto the column next to it let's also add a background color likewise adding a negative top margin to the image widget for example moves it upwards a good example to use this technique is to improve conversion rates by breaking up straight lines this way visitors will see the image first and no to keep scrolling down the page this only works for margins though because negative padding would cause the border to collapse into the content which in turn would make the content area smaller than the content which doesn't make sense let's add some padding though to increase the space around the content like i mentioned earlier tablets and mobile responsive modes automatically inherit any negative margins you set for your desktop designs so make sure you check them when making mobile edits another thing to pay attention to when using negative margins is the z-index the heading widget automatically appears on top of the image widget in the column on the left but what if your design requires something else by adding a z-index value to an element you can make sure it appears on top of another element so let's say we want the image to appear on top of the heading all you need to do is go to the image widget's advanced tab and in z-index adjust the value i'll set it to 1. you can use these z-index values to layer different elements on top of each other the largest value will appear on top note that this can be done for widgets columns and sections alike for example if you want the heading to appear on top again simply go to the heading widgets advanced tab and adjust the z-index value i'll set it to 2. it appears on top because it's the larger value okay let's complete the design i'll increase the font size a bit and align the button to the center and that's it now you know what margins and paddings are and how they affect elements on your site use them together with other elemental settings such as vertical alignment negative margins and the z index to create your own stunning designs just like the ones you see here like always have fun playing around and don't forget to subscribe to our youtube channel for more tips and tutorials ciao for now

Channel: Elementor

Views: 28,736

Keywords:

Id: YhmwlWb8amY

Length: 12min 51sec (771 seconds)

Published: Wed Nov 25 2020