How to Create Custom Shapes in Elementor

Updated: October 24, 2019

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 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.

Leave a Reply

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

Pin It on Pinterest

Share This

Share This

Share this post with your friends!