How to Create Custom Shapes in Elementor

Updated: May 24, 2021

In web development, the geographical shape is another basic thing you need to understand other than color theory. Each geographical shape represents different meanings. Circle, for instance. This shape represents harmony and safety.

Elementor has no specific widget to create a custom shape, but you can make use of the Spacer widget if you need to add a custom shape on the web page you are working on. This article will show you how to create custom shapes in Elementor using the Spacer widget.

How to create a custom shape in Elementor using Spacer widget

Some Elementor widgets — including Spacer — have an option to set the border radius values. You can use this option to create a custom shape in Elementor.

By default, when adding Spacer widget, you will have a rectangle shape with a height of 50px. You can change this default setting to create a square, circle, or rounded shape. Please note that not all geographical shapes can be created with Spacer widget. You won’t be able to create a triangle or parallelogram. Here is how to create a custom shape in Elementor using Spacer widget.

  • First off, create a new page on WordPress and edit it with Elementor. You can either create the page from scratch or load a template instead.
  • Add Spacer widget by dragging it to the canvas/editor. You can place it anywhere.
  • Set the high of the space. You can set this later according to the shape you want to create.
  • On the left panel, 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. You only need to change those values if you want to create a circle shape or fully custom shape (irregular shape).
  • Move the shape you have just created by dragging it to the area you want to place it.

Repeat the steps above to create other custom shapes. Or, you can simply duplicate a shape you have created to save you time. Just make sure to tailor the border radius values as well as the size (high and 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.