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 Add Shape Dividers In Elementor

Action Plan

Step 1: Separate Sections Using The Shape Divider


Why This Step Is Important

The shape divider option is one of the coolest features in Elementor. Using shape dividers is a great way to add fun transitions between each section of your page. This cool feature will set your design apart from other websites.

Watch Our Video Tutorial For This Step

This video will walk you through how to add shape dividers inbetween solid sections and sections with background images in Elementor.

Vide Summary

  • In the Elementor editor go to Edit Section > Style > Shape Divider (0:18)
  • Choose “Top” or “Bottom” and pick your shape divider “Type” (0:30)
  • Reverse a shape divider by turning on the “Flip” toggle (0:50)
  • Adjust the height on desktop, tablet, and mobile (0:50)
  • Change the color of the shape divider since the default is white (2:13)
  • Adding shape dividers to sections with background images (3:27)
  • Make sure the shape divider color matches the section above or below it (4:41)
  • You may want to add padding to the section when using a shape divider (5:10)

(I added a shape divider between two sections)

Step 2: Create A Background Design Using The Shape Divider


Watch Our Video Tutorial For This Step

Video Summary

  • In the Elementor editor go to Edit Section > Style > Shape Divider (0:20)
  • Choose a color for your shape divider and add transparency using the transparency bar (0:58)
  • Adjust the width and height of the shape divider on desktop, tablet, and mobile (1:20)
  • You can always use white (#ffffff) or black (#000000) and adjust the transparency (1:38)
  • Using colors in your color scheme will give a richer feel (2:17)
  • Add a shape divider background to both the top and bottom of the section (2:28)

(I added a shape divider background)

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.