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.
Creating 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).
The Bottom Line
The Spacer widget of Elementor is a widget used to add extra space beneath or above an element. But with a bit creativity, you can also use it to add some decoration to your website. For example, you can turn into a geographical shape by utilizing inline positioning.
