Shapes with Elementor: How to create them

If you want to get more creative and add some pizzazz to your designs with some custom shapes, then this article is the right, because I’m going to teach you how to create all kinds of shapes with Elementor and in a really easy way because while it’s going to be involve code, it’s super simple and a resource will be included below. So, let’s fire away.

To start adding shapes with Elementor, you will need to perform the same two steps:

1. Add the spacer widget

2. Set the position and width

Now, still on the Advanced tab, go to Positioning, and set the width to custom (from the dropdown) with the number of the same height amount. With this, you should have a square to work with that you can then turn into a circle or any other shapes you’d want, but more on that later.

Then, set the position to absolute so you can drag the shape all around the page to the exact spot where you want the shape to be in your design.

Recommended reading: 5 Different Border Effects For Links And Buttons

Turning it into a circle

Ok, so you already got how to make the square, now I’m going to teach you in this shapes with Elementor tutorial is the circle. The circle is super simple because all you need to work with is the borders. In the Advanced tab, go to Border choose percentage and make all borders 50%, like in the image below:

If you then want to make it a non-solid circle, all you have to do is remove the background and then play with the borders by making them solid, adding a border width and a color, like this:

You will probably notice that the circle is a little squished, and the people from Elementor have the perfect solution for this. After all, they did also write a tutorial about this but only including a few shapes. This is from their website’s tutorial:

To fix that, you need to add double the border width to the Custom Width that you set in the Custom Positioning section. So for our example:

• The border width is 3 px
• The custom width is 90 px

So to make it a perfect circle, you need to add another 6 px to the existing Custom Width (2 x 3 px) for a total of 96 px.

This same formula applies no matter what your dimensions are.

For example, if you wanted to make the circle smaller, you could set the Spacer equal to 50 px in the Content tab and then change the Custom Width to 56 px. Again, that’s the base 50 px plus double the border width.

For the example of this tutorial, I’m working with a height of 120px, a custom width of 120px and a border width of 5px. So, the width would have to be increased to 130px.

Here’s the Elementor tutorial for creating custom shapes

While that tutorial has some incredible information, there is a way to make many more shapes by using the website Clippy. This 3rd-party website is a clip-path generator that you can copy and paste to the CSS of your shape. clip-path is a CSS property that allows you to make complex shapes in CSS by actually clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

Making a triangle

For the triangle, you can use the same square from before with the difference that on the Advanced, you’re going to have to add a CSS class or ID based on the shape you want to make. Then on the Advanced tab, go to Custom CSS and copy and paste this code:

.triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

The Pentagon

The cool thing from Clippy is that you can get crazy with the shapes you can make on your Elementor designs. For example, a pentagon. You’d think that it’d be difficult to create a pentagon, but just by copying and pasting this code:

clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

Is super simple.

Final Words

This is a good way to create shapes because you don’t have to use images that would add more requests to load and affect performance. By using this method, you can even use as many shapes as you want and all you’d have to do is right-click on the shape and click duplicate. As easy as that.

And, with the absolute positioning you added on step two you can place them around anywhere on your page.

Hope that learning how to create shapes with Elementor will make your inspire you creatively to make some interesting designs. Try it out today!