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

Updated: October 8, 2022

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 WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.