Published on Sep 10, 2019

[Video] Elementor’s Shape Dividers in Oxygen

Sridhar Katakam

This screencast shows how shape dividers in Elementor can be implemented in Oxygen.

Code in the above example:

PHP & HTML:

<div class="elementor-shape elementor-shape-bottom" data-negative="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path class="elementor-shape-fill" opacity="0.33" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"></path>
<path class="elementor-shape-fill" opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"></path>
<path class="elementor-shape-fill" d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"></path>
</svg>
</div>

CSS:

.elementor-shape[data-negative=false].elementor-shape-bottom, .elementor-shape[data-negative=true].elementor-shape-top {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.elementor-shape-bottom {
bottom: -1px;
}
.elementor-shape {
overflow: hidden;
position: absolute;
left: 0;
width: 100%;
line-height: 0;
direction: ltr;
}
#section-2-276 .elementor-shape-bottom svg {
width: calc(127% + 1.3px);
height: 108px;
}
.elementor-shape svg {
display: block;
width: calc(100% + 1.3px);
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
svg:not(:root) {
overflow: hidden;
}
#section-2-276 .elementor-shape-bottom .elementor-shape-fill {
fill: #ffffff;
}
.elementor-shape .elementor-shape-fill {
fill: #fff;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}

Update:

If you wish to control the width and height of the shape dividers at smaller widths, you can add media queries like this and tweak according to your needs:

@media only screen and (max-width: 992px) {
#section-2-276 .elementor-shape-bottom svg {
height: 62px;
}
}
@media only screen and (max-width: 768px) {
#section-2-276 .elementor-shape-bottom svg {
height: 42px;
}
}

Note: Here is Mike’s page on the same topic.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right