{"id":27869,"date":"2019-07-17T07:43:54","date_gmt":"2019-07-17T07:43:54","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=27869"},"modified":"2025-12-30T06:57:39","modified_gmt":"2025-12-30T04:57:39","slug":"create-custom-shapes-without-using-code","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/","title":{"rendered":"How to Create Custom Shapes in Elementor Without Using Code"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"27869\" class=\"elementor elementor-27869\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ddce6d5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ddce6d5\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-faccb73\" data-id=\"faccb73\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fc5ad9b elementor-widget elementor-widget-text-editor\" data-id=\"fc5ad9b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In this article, you&#8217;ll learn how to create cool colorful shapes to liven up your Elementor designs without having to use image files or custom code.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b411c63 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b411c63\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7825f53\" data-id=\"7825f53\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ca39600 elementor-widget elementor-widget-heading\" data-id=\"ca39600\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to Create a Solid Circle Shape<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a6c7a6 elementor-widget elementor-widget-text-editor\" data-id=\"1a6c7a6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Open up the Elementor design where you want to add your shapes and let&#8217;s get started.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b6b2489 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b6b2489\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4ce903c\" data-id=\"4ce903c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-10a82dd elementor-widget elementor-widget-heading\" data-id=\"10a82dd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Add a Spacer Widget\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d656923 elementor-widget elementor-widget-text-editor\" data-id=\"d656923\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To begin, add a regular Spacer widget to the spot where you want your shape to appear. Then, go to the <strong>Advanced<\/strong> tab and set the Spacer widget&#8217;s background color to the color that you want your shape to be:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9d35ce elementor-widget elementor-widget-image\" data-id=\"a9d35ce\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-custom-shapes-1-r4q6xf89sbhfsqam9af50eqh0mu3fr3a7atoi0jt5s.jpg\" title=\"elementor-custom-shapes-1\" alt=\"elementor-custom-shapes-1\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-823d024 elementor-widget elementor-widget-text-editor\" data-id=\"823d024\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Then, go back to the <strong>Content<\/strong> tab and change the Spacer&#8217;s height to 90 px.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-74f06bc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"74f06bc\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f5369fc\" data-id=\"f5369fc\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a4c7924 elementor-widget elementor-widget-heading\" data-id=\"a4c7924\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Set Up Custom Positioning<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49d4643 elementor-widget elementor-widget-text-editor\" data-id=\"49d4643\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, find the <strong>Custom Positioning<\/strong> option in the <strong>Advanced<\/strong> tab and set the <strong>Width<\/strong> equal to <strong>Custom.\u00a0<\/strong><\/p><p>Then, set the <strong>Custom Width<\/strong> to the same height that you chose in the <strong>Content <\/strong>tab. For example, if you set the Spacer&#8217;s height equal to 90 px, you&#8217;d also make the custom width 90 px.<\/p><p>This should give you a solid square:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b6893e elementor-widget elementor-widget-image\" data-id=\"1b6893e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-custom-shapes-2-r4q73ehb9do3nflycdgpdef11vd5efttcw7vedonjs.jpg\" title=\"elementor-custom-shapes-2\" alt=\"elementor-custom-shapes-2\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ae37f9 elementor-widget elementor-widget-text-editor\" data-id=\"9ae37f9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Then, go back to the <strong>Content<\/strong> tab and change the Spacer&#8217;s height to 90 px.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1c6392d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1c6392d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5a4b3dd\" data-id=\"5a4b3dd\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1c8ddeb elementor-widget elementor-widget-heading\" data-id=\"1c8ddeb\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Add Absolute Positioning<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0498988 elementor-widget elementor-widget-text-editor\" data-id=\"0498988\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To position your shape, set its <strong>Position<\/strong> equal to <strong>Absolute<\/strong> in the <strong>Custom Positioning<\/strong> section. Then, you can drag it to the exact spot where you want your shape to appear.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6969499 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6969499\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-33b1b6c\" data-id=\"33b1b6c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9928b38 elementor-widget elementor-widget-heading\" data-id=\"9928b38\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Add a Border to Make it a Circle\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d435dc elementor-widget elementor-widget-text-editor\" data-id=\"4d435dc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To turn the square into a circle, go to the <strong>Border<\/strong> section in the <strong>Advanced<\/strong> tab and set the border for all sides equal to 50% (<em>percent &#8211; not pixels<\/em>):<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-886d461 elementor-widget elementor-widget-image\" data-id=\"886d461\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-custom-shapes-3-r4q75sygq4yhbk4cbeudqslfpbix2ld4cs8jju4fnw.jpg\" title=\"elementor-custom-shapes-3\" alt=\"elementor-custom-shapes-3\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d64088 elementor-widget elementor-widget-text-editor\" data-id=\"2d64088\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This ensures that it will always remain a circle, even if you change its size.<\/p><p>And that&#8217;s it! You just created your first shape.<\/p><p>Now, let&#8217;s dig into some other examples&#8230;<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0cb3f06 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0cb3f06\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-88df555\" data-id=\"88df555\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-76cc4c7 elementor-widget elementor-widget-heading\" data-id=\"76cc4c7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to Create a Non-Solid Circle Shape<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc01732 elementor-widget elementor-widget-text-editor\" data-id=\"bc01732\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, let&#8217;s create another circle, but with just a border, rather than a solid fill.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-77fa237 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"77fa237\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0aa36c5\" data-id=\"0aa36c5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c88829f elementor-widget elementor-widget-heading\" data-id=\"c88829f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Duplicate Existing Circle\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2c4fbd elementor-widget elementor-widget-text-editor\" data-id=\"e2c4fbd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To get started, use right-click to duplicate your existing circle shape and then move it to a new spot on the page.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cfb767d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cfb767d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8a42010\" data-id=\"8a42010\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4501aa0 elementor-widget elementor-widget-heading\" data-id=\"4501aa0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Add Solid Border and Clear Background Color\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1adef1a elementor-widget elementor-widget-text-editor\" data-id=\"1adef1a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, go to the <b>Advanced <\/b>tab and give the circle a solid border \u2014 3 px is a good starting point. Then, change the border color to the color that you want your shape&#8217;s outline to be.<\/p><p>Then, clear the background color so that you only see the border, which creates the effect we&#8217;re looking for:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18b5772 elementor-widget elementor-widget-image\" data-id=\"18b5772\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-custom-shapes-4-r4q6y4lwwug6i79r53e2dqbx21d07kw1asfsghi6cs.jpg\" title=\"elementor-custom-shapes-4\" alt=\"elementor-custom-shapes-4\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-89fc895 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"89fc895\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-92e3f5d\" data-id=\"92e3f5d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8bab712 elementor-widget elementor-widget-heading\" data-id=\"8bab712\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Make it a Perfect Circle\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1318fc1 elementor-widget elementor-widget-text-editor\" data-id=\"1318fc1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After adding the border and clearing the background, you might see that the shape is a little &#8220;squished&#8221; and not a perfect circle.<\/p><p>To fix that, you need to add <strong>double<\/strong> the border width to the <strong>Custom Width<\/strong> that you set in the <strong>Custom Positioning<\/strong> section. So for our example:<\/p><ul><li>The border width is 3 px<\/li><li>The custom width is 90 px<\/li><\/ul><p>So to make it a perfect circle, you need to add another 6 px to the existing <strong>Custom Width<\/strong> (2 x 3 px) for a total of 96 px.<\/p><p>This same formula applies no matter what your dimensions are.<\/p><p>For example, if you wanted to make the circle smaller, you could set the Spacer equal to 50 px in the <strong>Content<\/strong> tab and then change the <strong>Custom Width<\/strong> to 56 px. Again, that&#8217;s the base 50 px plus double the border width.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-de9c8ab elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"de9c8ab\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5beb0b8\" data-id=\"5beb0b8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0a5f95e elementor-widget elementor-widget-heading\" data-id=\"0a5f95e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to Create a Rectangle\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ccaec4 elementor-widget elementor-widget-text-editor\" data-id=\"3ccaec4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, let&#8217;s look at how to create a rectangle shape without a solid fill.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-da58fdd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"da58fdd\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-55fa816\" data-id=\"55fa816\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1c3b892 elementor-widget elementor-widget-heading\" data-id=\"1c3b892\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Add a Spacer Widget and Set Background Color\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5418ae elementor-widget elementor-widget-text-editor\" data-id=\"c5418ae\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Add another Spacer widget and set the background to a solid color in the <strong>Advanced<\/strong> tab.<\/p><p>Then, go to the <strong>Content<\/strong> tab and set the space to 220 px. We&#8217;re choosing 220 px because it matches the height of the heading widget in our example:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fce09e0 elementor-widget elementor-widget-image\" data-id=\"fce09e0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-custom-shapes-5-r4q6xrg695y5znsv9xpaetngqn5v7tfskzazqm1oqs.jpg\" title=\"elementor-custom-shapes-5\" alt=\"elementor-custom-shapes-5\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-46f68c1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"46f68c1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f35bca7\" data-id=\"f35bca7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b9e2c21 elementor-widget elementor-widget-heading\" data-id=\"b9e2c21\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Configure Custom Positioning\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd52798 elementor-widget elementor-widget-text-editor\" data-id=\"fd52798\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, go back to the <b>Advanced Tab<\/b> and set the <b>Width <\/b>equal to Custom in the Custom Positioning section. Then, set the custom width equal to 30 px.<\/p><p>To fix the shape&#8217;s position, change the <b>Position<\/b> dropdown to <b>Absolute <\/b>and set its <b>Vertical Orientation<\/b> to <b>Bottom<\/b>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2eb06b7 elementor-widget elementor-widget-image\" data-id=\"2eb06b7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-custom-shapes-6-r4q705xbpx8jnsb98z2ys7tve3bmvyz3kvbnw2hh10.jpg\" title=\"elementor-custom-shapes-6\" alt=\"elementor-custom-shapes-6\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fdf5b17 elementor-widget elementor-widget-text-editor\" data-id=\"fdf5b17\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For better <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"How To Create A Responsive Website: Step-By-Step 2025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"31871\">responsive<\/a> design, change the <strong>Offset<\/strong> units to <strong>Percentage<\/strong>.<\/p><p>Then, you can drag your rectangle to exactly where you want it to appear.<\/p><p>To create the effect we&#8217;re looking for, you&#8217;d then duplicate the Spacer widget to add another rectangle like this:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18013cc elementor-widget elementor-widget-image\" data-id=\"18013cc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-custom-shapes-7-r4q7714vncmyh8c65fxuhzg3mfh64d8i6uwd3uaxiw.jpg\" title=\"elementor-custom-shapes-7\" alt=\"elementor-custom-shapes-7\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6793999 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6793999\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-79a4da0\" data-id=\"79a4da0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c0cef9b elementor-widget elementor-widget-heading\" data-id=\"c0cef9b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to Create a Square\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abacbfc elementor-widget elementor-widget-text-editor\" data-id=\"abacbfc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you want to create a square, you can follow the exact same steps that you used to create a circle \u2014 just don&#8217;t add the <b>Border Radius<\/b>!<\/p><p>Similarly, you can also create squares without a solid fill by adding a solid border and removing the background color.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f8adbaf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f8adbaf\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c9bef24\" data-id=\"c9bef24\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bb79048 elementor-widget elementor-widget-heading\" data-id=\"bb79048\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Start Adding Shapes to Your Elementor Designs<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8489fff elementor-widget elementor-widget-text-editor\" data-id=\"8489fff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To create even more shapes, you can just duplicate your existing shapes and play around with the sizes, colors, and borders.<\/p><p>Plus, with Custom Positioning, you can make your shapes appear anywhere on the page.<\/p><p>Give it a try today and add some life and creativity to the pages that you build with Elementor.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Custom shapes add life and creativity to your website. In this article, we&#8217;ll show you how to create custom shapes to boost your designs, without having to use image files or custom code.<\/p>\n","protected":false},"author":50988,"featured_media":27903,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,32],"tags":[79,173],"marketing_persona":[47],"marketing_intent":[49],"class_list":["post-27869","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create Custom Shapes in Elementor Without Coding<\/title>\n<meta name=\"description\" content=\"Custom shapes add life and creativity to your website. Learn how to create custom shapes to boost your designs, without needing image files or custom code\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Custom Shapes in Elementor Without Coding\" \/>\n<meta property=\"og:description\" content=\"Custom shapes add life and creativity to your website. Learn how to create custom shapes to boost your designs, without needing image files or custom code\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-17T07:43:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-30T04:57:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.07.15-Custom-Shapes.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Colin Newcomer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Colin Newcomer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/\"},\"author\":{\"name\":\"Colin Newcomer\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/8df3c6697ea8e60fd1416e98a7ff0e21\"},\"headline\":\"How to Create Custom Shapes in Elementor Without Using Code\",\"datePublished\":\"2019-07-17T07:43:54+00:00\",\"dateModified\":\"2025-12-30T04:57:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/\"},\"wordCount\":836,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.07.15-Custom-Shapes.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Blog\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/\",\"url\":\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/\",\"name\":\"How to Create Custom Shapes in Elementor Without Coding\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.07.15-Custom-Shapes.png\",\"datePublished\":\"2019-07-17T07:43:54+00:00\",\"dateModified\":\"2025-12-30T04:57:39+00:00\",\"description\":\"Custom shapes add life and creativity to your website. Learn how to create custom shapes to boost your designs, without needing image files or custom code\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.07.15-Custom-Shapes.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.07.15-Custom-Shapes.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/category\/blog\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Custom Shapes in Elementor Without Using Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/8df3c6697ea8e60fd1416e98a7ff0e21\",\"name\":\"Colin Newcomer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/42aa991c5e5152c551c3ca3aa09e84d6e08a3a40420e566d930ab289160b09bc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/42aa991c5e5152c551c3ca3aa09e84d6e08a3a40420e566d930ab289160b09bc?s=96&d=mm&r=g\",\"caption\":\"Colin Newcomer\"},\"description\":\"Colin is a freelance writer for hire specializing in WordPress and digital marketing. Grow your business with in-depth, conversational blog posts.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/colinn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Custom Shapes in Elementor Without Coding","description":"Custom shapes add life and creativity to your website. Learn how to create custom shapes to boost your designs, without needing image files or custom code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Custom Shapes in Elementor Without Coding","og_description":"Custom shapes add life and creativity to your website. Learn how to create custom shapes to boost your designs, without needing image files or custom code","og_url":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2019-07-17T07:43:54+00:00","article_modified_time":"2025-12-30T04:57:39+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.07.15-Custom-Shapes.png","type":"image\/png"}],"author":"Colin Newcomer","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Colin Newcomer","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/"},"author":{"name":"Colin Newcomer","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/8df3c6697ea8e60fd1416e98a7ff0e21"},"headline":"How to Create Custom Shapes in Elementor Without Using Code","datePublished":"2019-07-17T07:43:54+00:00","dateModified":"2025-12-30T04:57:39+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/"},"wordCount":836,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.07.15-Custom-Shapes.png","keywords":["Build","Video"],"articleSection":["Blog","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/","url":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/","name":"How to Create Custom Shapes in Elementor Without Coding","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.07.15-Custom-Shapes.png","datePublished":"2019-07-17T07:43:54+00:00","dateModified":"2025-12-30T04:57:39+00:00","description":"Custom shapes add life and creativity to your website. Learn how to create custom shapes to boost your designs, without needing image files or custom code","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.07.15-Custom-Shapes.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.07.15-Custom-Shapes.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/create-custom-shapes-without-using-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/elementor.com\/blog\/category\/blog\/"},{"@type":"ListItem","position":3,"name":"How to Create Custom Shapes in Elementor Without Using Code"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/8df3c6697ea8e60fd1416e98a7ff0e21","name":"Colin Newcomer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/42aa991c5e5152c551c3ca3aa09e84d6e08a3a40420e566d930ab289160b09bc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/42aa991c5e5152c551c3ca3aa09e84d6e08a3a40420e566d930ab289160b09bc?s=96&d=mm&r=g","caption":"Colin Newcomer"},"description":"Colin is a freelance writer for hire specializing in WordPress and digital marketing. Grow your business with in-depth, conversational blog posts.","url":"https:\/\/elementor.com\/blog\/author\/colinn\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/27869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/50988"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=27869"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/27869\/revisions"}],"predecessor-version":[{"id":149158,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/27869\/revisions\/149158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/27903"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=27869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=27869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=27869"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=27869"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=27869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}