Shapes with Elementor: How to create them

shapes with elementor
Shapes help designers add interest and organize content in a visually appealing manner. But more than that, shapes can effectively be used to communicate a brand’s vision, identity, and goals, and ultimately, drive conversions.
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

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

Open the Elementor design where you’re going to include the shape, and add the regular spacer widget in the spot where you want the shape to appear. Make it any height you’d like, just remember number because you’ll be using it in step 2. Afterwards, click on Advanced and make the shape of the background color of your choosing.

 

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!

Join the templace newsletter

Every week, you will be receiving the greatest tips, design inspiration and all the goodies related to Elementor.

Previous and next POSTS

Do you want powerful hosting?

Kinsta’s hosting solution will give you an incredible loading time, bar none. With their amazing server infrastructure, attentive customer support and just great user experience all-around, hosting your website with Kinsta will be a delight.

  • Blog
  • Project Application
  • Agency Plans
Want to learn about Elementor, web hosting, page speed optimization or web design? Click the button below to view all the articles!
Are you looking to build a new website for your business? One that will stand out amongst the competition? Click the button and start your project now!
Are you an agency owner overworked with web design clients? No need to worry about that anymore! Take a look at my agency plans for website design & development.
backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want