Completely Free Course

Connect with Facebook

or

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 Course

Connect with Facebook

or

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy.

Already Registered? Log In Here

Module 2: Customize The Design

How To Adjust Padding And Margins In Elementor

Action Plan

Step 1: Adjust Padding And Margins


Watch Our Video Tutorial For This Step

This video will walk you through how to adjust the padding and margins for widgets, columns, and sections in Elementor. We will also discuss the default padding in our Elementor Template Blocks and how to combine multiple sections with the same background color.

Video Summary

  • Default padding used for all sections in our Elementor Template Blocks (0:17)
  • Default padding used for all columns in our Elementor Template Blocks (1:13)
  • Use the spacer widget to add spacing above or below widgets (1:51)
  • Add a margin above an image widget (2:19)
  • Change the width of a form field by adjusting the padding (3:57)
  • Add margin between two inner sections (5:03)
  • The difference between padding and margin (5:40)
  • Combine two white template blocks by dragging the inner section into another template block and adjusting the section margin (8:03)
  • Combine two white template blocks by adjusting the section padding (9:32)
  • Edit the section width (11:00)

(I adjusted the padding and margins for a column and widget)

Step 2: Use Negative Margins


Watch Our Video Tutorial For This Step

This video will walk you through how to use negative margins to make an image or column overlap another section or flow off the page.

Video Summary

  • Use a negative margin to move a video widget so that it overlaps two sections (0:17)
  • Adjust the z-index value so that the video appears on top of a section (0:50)
  • Always check tablet and mobile margins (1:12)
  • Add a margin to the top of a section to create more space below the video widget (2:00)
  • Problem: The video now overlaps our sticky header menu since we added a z-index value (3:10)
  • Add a higher z-index value to the sticky header menu so that it always appears on top (3:30)
  • Use a negative left margin to have an image widget flow partially off the page (4:30)
  • Use a negative margin to have an entire column overlap two sections (5:30)
  • Having widgets or columns overlap sections lets the user know they should keep scrolling down the page (8:37)

(I added negative margins to an image widget and a column)

Continue To The Next Tutorial Below

Module 2

Customize The Design

Module 2 Progress
0

Your Achievements

You have earned 0 badges

How Can This Course Be Free?

Our course is 100% free forever because of our special partnerships with SiteGround Hosting and Elementor Pro.