Completely Free Course

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

or

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

Already Registered? Log In Here

Day 3: Improve Your 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

Day 3

Improve Your Design

Your Progress
0

Your Achievements

You have earned 0 badges

How Can This Challenge Be Free?

Our "Website In A Weekend" challenge is supported by the small affiliate commission we receive from SiteGround Hosting and Elementor Pro. Other than this, we are not affiliated with Elementor or SiteGround in any way.