Completely Free Course

Or log in with email below...

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free

or

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Already Registered? Log In Here

Day 3: Improve Your Design

How To Adjust Padding And Margins In Elementor

Action Plan

Step 1: Adjust Padding And Margins


Complete The Following Tasks

Learn how to adjust padding and margin.
Make sure you know the difference between padding and margin.
Padding is the spacing found inside of an element (widget, column, or section).

Margin is the spacing found outside of an element (widget, column, or section).

If the background color is the same on the inside and outside of an element, then you probably won't be able to tell the difference between padding and margin and you can technically use either option.
Try to keep the default padding we use in our section templates as much as possible.
The default padding in our sections are as follows:

Desktop: 100x50x100x50
Tablet: 80x30x80x30
Mobile: 50x10x50x10

The default padding in our columns can vary between templates.
Learn how to add margin (or padding) above or below a widget instead of using a Spacer Widget.
If you want to add more spacing above or below a widget, simply adjust the top or bottom margin (or padding) of the widget instead of dragging in a new Spacer Widget.

Note: We use Spacer Widgets in all of our templates because they are much easier for beginners to understand.
Learn how to adjust the width of certain widgets by using left and right padding.
Sometimes you don't want a widget (such as a Form Widget or Video Widget) to stretch the full width of a column.

Adding left and right padding can help reduce the width of these widgets.
Learn how to combine multiple inner sections by adding padding in-between each inner section.
When creating pages, typically you want to alternate the section background colors as you add sections to your page.

However, what if you want to create a page that uses a single background color (such as all white)? In this case, you will need to learn how to combine inner sections and add padding in-between each inner section.
Make sure to check all padding and margin settings on desktop, tablet, and mobile.
Note: If padding or margin values are left blank they will inherit the larger device's settings.

For example, if I have the top padding set to 100px on desktop, and on tablet it's left blank, the tablet top padding will automatically use the 100px unless I manually enter a different value.

Watch Our Video Tutorial

Step 2: Use Negative Margins


Complete The Following Tasks

Learn how to use negative margins.
Negative margins allow you to move widgets and columns above or below other nearby elements on the page.

This technique can be used to improve your design and also break up any straight section borders so users know to keep scrolling down the page.
Add a negative top margin to a widget (such as an Image Widget) on desktop, tablet, and mobile.
Sample negative top margins could be:

Desktop: -200
Tablet: -150
Mobile: -110
Add a negative top margin to a column on desktop, tablet, and mobile.
Sample negative top margins could be:

Desktop: -200
Tablet: -150
Mobile: -110
Learn how to add a Z-Index value to make sure an element appears on top of another element.
Go to Advanced > Z-Index to adjust the value of a widget, column, or section. You can use Z-Index values to layer different elements on top of each other. The largest Z-Index value will appear on top.

For example, if I have two widgets, one with a value of 10, and one with a value of 5, the widget with a value of 10 will appear on top of the widget with a value of 5..
Adjust the padding of the sections above and below the element with a negative margin so that your padding looks consistent.
You Earned A Badge!

Watch Our Video Tutorial

Continue To The Next Tutorial Below

Day 3

Improve Your Design

Your Progress
0

How Can This Be Free?

All of our tutorials are supported by the small affiliate commission we receive when you purchase SiteGround Hosting and Elementor Pro. We are not associated with SiteGround or Elementor in any way.