Custom Shape dividers were one of the main features when I built the website for the Edmonton festival Winterruption (Case study here).
Elementor provides a tutorial on how to add shape dividers to the existing set, but there are some important considerations to keep in mind. The custom dividers must be in SVG format, but they also need to be properly structured. The original files I received didn’t work until I reviewed the shape dividers from the theme and adjusted the new files accordingly. Here’s how I changed them:
SVG Formatting
The shapes I received in the brand package were SVGs exported from Adobe Illustrator. While Illustrator is a powerful tool, its SVG export settings include metadata and formatting different to what I needed in this particular case. When I tried to use them as custom shape divider following the Elementor tutorial, they did not show up until I made several adjustments.
For that I looked at the existing shape divider that are part of the default Elementor settings. Here’s an example:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path class="elementor-shape-fill" d="M738,99l262-93V0H0v5.6L738,99z"></path>
</svg>
In comparison, here’s an example of the received SVG that I wanted to used as a custom shape divider:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 595.28 133.03" style="enable-background:new 0 0 595.28 133.03;" xml:space="preserve">
<path d="M571.2,105.89H22.7l-0.35-79.18c0,0,4.58,0.23,6.62,1.09c1.52,0.65,3.07,1.28,4.5,2.1c5.91,3.4,11.99,3.32,18.21,1.06
... <!-- Path data continues -->
</path>
</svg>
In order to make this work, I had to change a couple of attributes:
The viewBox lead to some whitespace around the item (But what exactly is an SVG view box?) which should fit seamlessly instead, and some of the metadata added a bit of bloat.
I simplified the SVG and adjusted its viewBox and added the preserveAspectRatio=”none” attribute to ensure that the SVG stretches to fit its container without preserving its original proportions to work with responsive designs.
This is the result:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 810 74.999997" preserveAspectRatio="none">
<path d="M571.2,105.89H22.7l-0.35-79.18c0,0,4.58,0.23,6.62,1.09c1.52,0.65,3.07,1.28,4.5,2.1
... <!-- Path data continues -->
</path>
</svg>
Shape Divider Options
To use the “invert” option, make sure you have a copy of the SVG shape flipped vertically. You can create this easily by adding the following styles to the SVG tag:
style="transform: scale(1,-1) translateX(-50%)"
f you don’t provide an inverted shape, be sure to change the ‘has_negative’ parameter to “false” (or remove it entirely); otherwise, the custom shape won’t display (see parameters in Elementor tutorial).
Optimizing SVGs
In order to make the custom shape divider work best, it makes sense to reduce the SVG shape to the right size.
✅ Use this:
❌Not this:
Under the “style” tabin the Elementor editing menu
Unfortunately, I’m still a bit of an SVG noob, so I had to work with what I had and instead adjusted the shape divider height in the Elementor options and container margins to ensure the dividers didn’t overlap with the section content. If you don’t set a fixed height, the shape divider will grow proportionally to the browser width. The larger the height compared to the width, the harder it is to adjust to all screen sizes without cutting into the content.
Shape Dividers for Small Containers with Textured Backgrounds
If you have a container over a textured background, you can’t place the shape divider inside the container because it doesn’t offer a transparent option. To solve this, I added two transparent containers—one at the top and one at the bottom—and applied the shape dividers there, removing the container margins so they seamlessly connected with the middle container.
There might be a way to use an SVG shape to cut off the top or bottom of an image or background, which is what I tried out in another theme (soon to be published).
I didn’t explore that fully for this project, though—have you? Let me know what you’ve discovered!
Also, here is a pretty shape divider from the default Elementor settings: