One of the design elements offered by Elementor is Spacer, which is intended to add a blank space between elements. Turns out, with a little trick, you can also use this element to create custom shapes to make your design looks more attractive. This post will show you how to create custom shapes in Elementor by taking advantage of the Spacer element.

Since the Spacer element is available on both the free version and the pro version of Elementor, you can apply this trick no matter the Elementor version you use.

Basically, to create a custom shape in Elementor, all you need to do is set the custom border radius. With the same idea, you can also get a custom image shape like we covered in this post. One important thing to note, not all geometrical shapes can be created with this trick. You won’t be able to create a triangle shape and parallelogram.

To demonstrate this trick, we will be using this Elementor template. We will add some custom shapes on the top section of this template. Following is the original look of the template before we modify it.

• To get started, create a new post/page on your WordPress dashboard and edit it with Elementor. Load the template above by clicking the folder icon.

• Add a Spacer element by dragging it to the canvas/editor. You can place it anywhere.

• Set the high of the space. You can also set this later according to the shape you want to create.

• Go to the Advanced tab and set the background on the Background section.

• Still on the Advanced tab, go to the Custom Positioning section and change the Width to “Custom” and set the value you want. If you want to create a square or circle shape, you need to set the same width value as the high value. Also set the Position to “Absolute”.

• Still on the Advanced tab, go to the Border section to change the border radius values. If you want to create a square or rectangle shape, you don’t need to change the border radius values. Conversely, if you want to create a circle shape or fully custom shape (irregular shape), you can change the border values until you get the result you want.

• Move the shape you have just created by dragging it to the area you want to place it.

If you want to add multiple custom shapes on a single page, you can simply duplicate a shape you have created to save you time. Just don’t forget to tailor the border radius values as well as the size (high and width).

Following is the screenshot of the template we use in this example after the modification.

Final words

Elementor is a great tool to create a website without coding. Thanks to this tool, anyone can be a web developer even if they have no programming knowledge. You can also use Elementor to create a WordPress theme without coding. If you are new to Elementor, you can read our Elementor articles here to learn moe about this page builder plugin.