How to add shape dividers like Elementor’s with the WordPress block editor

If you’re an Elementor user, adding shape dividers to web pages is easy. It’s a key feature of the page builder and something many people use within their designs.

Shape dividers are useful for separating content on a web page without interrupting the user journey. They are used extensively within design because they work so well.

What if you want to use a shape divider on a website using the WordPress block editor? Will you be able to add one like you can with Elementor?

If you don’t want to use Elementor and prefer the WordPress block editor, this article is for you!

Elementor shape divider vs Spectra shape divider

Let’s quickly discuss Elementor and Spectra shape dividers.

Elementor shape divider

Example of Elementor Shape Divider

The Elementor shape divider feature comes with a list of beautiful shapes that allow you to separate page sections.

The shape divider feature comes with the free version of Elementor. You can add different shapes to the top and bottom areas of the section.

You can add color and set the width and height of the shapes. You can also flip and invert the design.

If the section content hides by the shapes, you can enable the Bring to Front option to bring the content to the front of the shape design.

Spectra shape divider

Spectra shape divider

The Spectra shape divider offers all the same tools and benefits as Elementor.

It has the same graphical shapes as Elementor and you’ll get a couple of new shapes.

The list of Spectra shape dividers is as follows.

1. Tilt

Tilt shape dividers

2. Mountains

Mountains shape dividers

3. Wave Brush

Wave Brush shape dividers

4. Waves

Wave shape dividers

5. Waves Pattern

Waves Pattern shape dividers

6. Triangle

Triangle shape dividers

7. Drops

Drops shape dividers

8. Clouds

Clouds shape dividers

9. ZigZag

ZigZag shape dividers

10. Pyramides

Pyramides shape dividers

11. Triangle Asymmetrical

Triangle Asymmetrical shape dividers

12. Tilt Opacity

Tilt Opacity shape dividers

13. Fan Opacity

Fan Opacity shape dividers

14. Curve

Curve shape dividers

15. Curve Asymmetrical

Curve Asymmetrical shape dividers

16. Curve Reverse

Curve Reverse shape dividers

17. Curve Asymmetrical Reverse

Curve Asymmetrical Reverse shape dividers

18. Arrow

Arrow shape dividers

19. Arrow Split

Arrow Split shape dividers

20. Book

Book shape dividers

Like Elementor, you can add different shapes and manage their width and height.

To make the section more attractive, you can invert or flip the design and force your shape to be in front of other objects.

Let’s have a quick look at the shape divider feature summary of two popular page builders:

FeaturesElementor shape dividerSpectra shape divider
Number of shape dividers1820
Add custom colors
Manage width and height
Invert the shape 
Flip the design
Bring shape to the front feature

As you can see, all those shape divider features you used Elementor to access are now accessible in Spectra. For free!

How to divide page sections using shapes like Elementor

Now it’s time to show you how to use Spectra shape dividers on your website.

First, make sure that you’ve installed and activated the Spectra plugin on your WordPress website.

We’ll create a page where we import a ready website template. Later, we’ll show a real-life example of adding shapes and separate website page sections.

Let’s get started:

We’ve created a new page. Hit the Template Kits button to access the Spectra templates library.

Create a new page and go to Template Kits

Select a suitable template for your website.

Select a template

Click the Import button.

Import the template

The template will be imported into the page.

Template imported

Click on the container first where you want to add shape. After that, go to the Style > Shape Dividers area.

Click container and find Spectra Shape Dividers

We want to add a shape divider right after the banner section.

We’ve selected Curve Asymmetrical as the Type from the 20 different graphical shape options.

Add Curve Asymmetrical Shape Divider

Change the default Color as required.

Change shape color

Like us, you can set the height of the shape and enable the Flip feature to make the design visually attractive.

Flip the shape

If you want to manage the width and other settings, you can customize it as per your website design.

We want to add more shapes to the other part of the web page.

This time we use the triangle shape at the top position of the section.

We’ve also changed the color and customized the height.

Add Triangle shape

We would like to add another shape to the bottom area of the same section.

Select the bottom option and choose the Tilt shape.

We also invert the shape design and change its color.

Change the shape divider color

Let’s see how the website looks with the new Spectra Shape Dividers.

Shape divider FAQs

Let’s answer some common questions we often hear regarding the Spectra shape divider.

What is a shape divider?

Shape dividers are graphics shapes. They used to separate one section from another on a web page so a reader knows the next section is separate from the one they just read.

What can I use instead of a shape divider?

You can use custom design shapes, color backgrounds and borders instead of a shape divider. Any graphical device that signals to the reader they are moving to a different area of the page without interrupting the user journey will work.

How do I add a shape divider in WordPress?

You cannot add a shape divider with WordPress without third-party blocks. You can add a divider to your website using WordPress Spacer and Separator blocks.

What is the difference between a shape divider and a spacer in Elementor?

The difference between a shape divider and a spacer in Elementor is that a shape divider adds graphical shapes to separate web page sections. A spacer creates white space between sections.

Wrapping up

Dividing web page sections with the WordPress block editor is made easier with Spectra.

Spectra gives you the shapes and settings which let you add stunning shapes and divide web page sections, just like Elementor does.

All controlled from within the WordPress block editor and with none of the downsides using a third party page builder like Elementor presents.

In this article, we’ve talked about Elementor and Spectra shape dividers. We’ve also demonstrated how you can apply them in the right way. Now it’s your turn. Are you going to try our new Spectra shape dividers?

Share your ideas in the comment section below.

Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!

Leave a Comment

Your email address will not be published. Required fields are marked *

Build Ultra High performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.