How to Create Custom Shapes in Elementor Without Using Code

Custom shapes add life and creativity to your website. In this article, we'll show you how to create custom shapes to boost your designs, without having to use image files or custom code.

In this article, you’ll learn how to create cool colorful shapes to liven up your Elementor designs without having to use image files or custom code.

How to Create a Solid Circle Shape

Open up the Elementor design where you want to add your shapes and let’s get started.

1. Add a Spacer Widget

To begin, add a regular Spacer widget to the spot where you want your shape to appear. Then, go to the Advanced tab and set the Spacer widget’s background color to the color that you want your shape to be:

Then, go back to the Content tab and change the Spacer’s height to 90 px.

2. Set Up Custom Positioning

Next, find the Custom Positioning option in the Advanced tab and set the Width equal to Custom. 

Then, set the Custom Width to the same height that you chose in the Content tab. For example, if you set the Spacer’s height equal to 90 px, you’d also make the custom width 90 px.

This should give you a solid square:

Then, go back to the Content tab and change the Spacer’s height to 90 px.

3. Add Absolute Positioning

To position your shape, set its Position equal to Absolute in the Custom Positioning section. Then, you can drag it to the exact spot where you want your shape to appear.

4. Add a Border to Make it a Circle

To turn the square into a circle, go to the Border section in the Advanced tab and set the border for all sides equal to 50% (percent – not pixels):

This ensures that it will always remain a circle, even if you change its size.

And that’s it! You just created your first shape.

Now, let’s dig into some other examples…

How to Create a Non-Solid Circle Shape

Next, let’s create another circle, but with just a border, rather than a solid fill.

1. Duplicate Existing Circle

To get started, use right-click to duplicate your existing circle shape and then move it to a new spot on the page.

2. Add Solid Border and Clear Background Color

Next, go to the Advanced tab and give the circle a solid border — 3 px is a good starting point. Then, change the border color to the color that you want your shape’s outline to be.

Then, clear the background color so that you only see the border, which creates the effect we’re looking for:

3. Make it a Perfect Circle

After adding the border and clearing the background, you might see that the shape is a little “squished” and not a perfect circle.

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.

How to Create a Rectangle

Next, let’s look at how to create a rectangle shape without a solid fill.

1. Add a Spacer Widget and Set Background Color

Add another Spacer widget and set the background to a solid color in the Advanced tab.

Then, go to the Content tab and set the space to 220 px. We’re choosing 220 px because it matches the height of the heading widget in our example:

2. Configure Custom Positioning

Now, go back to the Advanced Tab and set the Width equal to Custom in the Custom Positioning section. Then, set the custom width equal to 30 px.

To fix the shape’s position, change the Position dropdown to Absolute and set its Vertical Orientation to Bottom:

For better responsive design, change the Offset units to Percentage.

Then, you can drag your rectangle to exactly where you want it to appear.

To create the effect we’re looking for, you’d then duplicate the Spacer widget to add another rectangle like this:

How to Create a Square

If you want to create a square, you can follow the exact same steps that you used to create a circle — just don’t add the Border Radius!

Similarly, you can also create squares without a solid fill by adding a solid border and removing the background color.

Start Adding Shapes to Your Elementor Designs

To create even more shapes, you can just duplicate your existing shapes and play around with the sizes, colors, and borders.

Plus, with Custom Positioning, you can make your shapes appear anywhere on the page.

Give it a try today and add some life and creativity to the pages that you build with Elementor.

About the Author

Colin Newcomer
Colin Newcomer
Colin is a freelance writer for hire specializing in WordPress and digital marketing. Grow your business with in-depth, conversational blog posts.

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 877,316 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

13 Responses

  1. Thank! Good tips!

    …The concept of ‘pixel’ is so diverse: the resolution of the picture, the resolution of the monitor, and the dimension in site building …
    What size of a pixel is meant in this article?

    1. @ Sergey,

      I’m pretty sure pixels are calculated as exact measurements, meaning their size doesn’t really change when the browser renders the site.

      Eg. 220px on a tablet will be the same pixel size as 220px on a desktop.

      The only difference is the density of those pixels on the display. Percentage measurements are what I would consider to be a lot more diverse, as based on your device, display and many other factors, the experience can change significantly.

        1. Two ways to added a text in the Spacer element. By Using the Heading or the Paragraph element and write your text, then go to the Advanced section of the text and set the Custom positioning to “Absolute” and then drag the text manually to inside the Shape you just created. Then from there set the size of either the text or the shape to fit together.

          Or secondly, do the shape not using the spacer but do the shape with the Text element itself by going through the same procedure to do the shape while you already have the text in there. Hope this helps.

  2. Why not just add a shape tool to create a rectangular shape that we can then turn into a circle or oval by just changing shape size and border radius once? Instead of having to set 2 different values to keep your shape from looking squished. And all these other steps and remembering to carry the 4 and divide by the square root of pi.

    Moved over to WordPress and Elementor from a designer-oriented non-Wordpress website builder. Way too glitchy with lackluster support, but they have this basic tool. Would be great to see it on Elementor.

  3. So simple, yet so powerful when paired with absolute positioning. This has helped us create websites with fewer assets and easier to manipulate designs.

  4. Would have loved to see you deal with the tablet and mobile versions of this design, as well. With all of that absolute positioning, it seems like there’d be a lot to have to tweak at each breakpoint. Is that not the case?

  5. this is good stuff, on warning is chek responsiveness as you might have to make adjustments there. but this is a great way to add some pop to the sites

Leave a Reply

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

Want to learn how to build better websites?

Join 877,316 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.