Search
Close this search box.

How to Add Shape Divider to Create a Beautiful Section in Elementor

When working with Elementor, you can add sections. Section itself is one of the design elements offered by Elementor and other page builders at large. It is the largest container to host columns and widgets. In Elementor, you can add a new section by clicking the plus button on the canvas area of the Elementor editor.

Elementor allows you to style a section. You can add a background, set a border radius, add a shape divider and so on. In this post, we will show you how to add a shape divider in Elementor.

A shape divider is great to add a cool separator between sections within a page. You can add a shape divider on the top side of the section or the bottom side. Elementor offers 18 shapes you can choose from when adding a separator on a section. Elementor uses SVG files for the shapes, making them adjustable without reducing the image quality (sharpness).

How to add shape divider in Elementor

The implementation of shape dividers can actually be found on some Elementor templates, including the templates created by the Elementor. To add divider on your own page, create a new page or post and edit it with Elementor. On the Elementor editor, add a new section by clicking the plus button on the canvas area.

To demonstrate how a shape divider works, you can change the background of the section. To do so, click the section handler to turn it into an editing mode and go to the Style tab on the left panel. Set the background on the Background option.

Add some widgets to enlarge the section. For a test, you can simply add a Spacer and set its height to about 300.

Click the section handler once again to turn it into an editing mode and go to the Style tab. Open the Shape Divider option and select a shape from the dropdown menu on Type section. You can also set the height as well as the width of the divider. To set the shape color, click the color selector on the Color section.

By default, the divider is added to the top side. To add a shape divider on the bottom side of the section, simply click the BOTTOM tab and select the shape you want, set the color, set the height as well as the width.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Haven’t used Elementor Pro yet?
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.