How to Create Custom Shapes in Elementor

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. If you are new to Elementor, please refer to our separate article to learn how to use Elementor.

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.
  • Go to the Advanced tab and set the background on the Background block.
  • Still on the Advanced tab, go to the Layout block 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.
  • Still on the same settings block, set the Position to “Absolute“.
  • Still on the Advanced tab, move to the Border settings block 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 our project. Read our affiliate disclosure.
Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?