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

Action Plan

Step 1: Separate Sections Using The Shape Divider


Complete The Following Tasks

Learn how to add shape dividers between sections.
Click Edit Section and in the sidebar go to Style > Shape Divider.
Select Top or Bottom and choose a Type.
Adjust the Color to match the section above or below (if necessary).
Adjust the Width and Height on desktop, tablet, and mobile.
Experiment with the Flip, Invert, and Bring To Front settings.
You can use the Arrow, Split, Book, or Triangle shape dividers to direct users down your page so they know to keep scrolling.
You may need to add or remove padding to the sections touching the shape divider in order to keep a consistent padding on your page.

Watch Our Video Tutorial

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. It can also help the usability of your pages by directing users to keep scrolling down the page. Elementor’s shape divider feature will set your design apart from other websites.

Step 2: Create A Background Design Using The Shape Divider


Complete The Following Tasks

Learn how to create background designs using the shape divider
Add a shape divider (such as Mountains) to a dark section on your page.
Change the shape divider Color to black (#000000) or white (#ffffff) and reduce the opacity to about 10-20%.
While black and white will work in this example, it's even better to choose a dark or light color that's the same shade as your section's background color.

For example, if you are using a blue background in your section, you could try changing the shape divider Color to dark navy (instead of black) and then reduce the opacity.
Adjust the Width and Height on desktop, tablet, and mobile.
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.