SHAPE DIVIDER
FOR OXYGEN BUILDER
There are many ways to add shape dividers but I think this one is the easiest one.
Step 1
Add a new section + whatever you want inside
Step 2
Add a Code Block (inside the section) and in the PHP&HTML panel, add your SVG datas :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 407.65" preserveAspectRatio="none"><path d="M751.32 187.47C613 235 462.72 218.9 318.61 225 200.89 230 48.86 251.53 0 407.65h1000V0c-64.23 92.19-152 154.24-248.68 187.47z" opacity=".25"/><path d="M777.61 210.75c-123.72 42.52-258.09 28.11-387 33.57-105.24 4.46-241.2 23.68-284.89 163.33H1000V43.1C942.56 125.54 864.09 181 777.61 210.75z"/></svg>
Step 3
The following CSS is the basic CSS for most of the shapes I provide. You just have to replace the section id.
To adjust the size, you can change the height or/and the width, and to change the color, you just have to modify the fill.
#section-7-25 {
position: relative;
overflow: hidden;
}
#section-7-25 svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
fill: #D72D46
}To put the shape on top, replace bottom:0 by top:0.
To reverse the shape horizontally and vertically, add transform:scale(-1,-1);
#section-26-271 {
position: relative;
overflow:hidden
}
#section-26-271 svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
fill: #FF5252;
transform:scale(-1,-1);
}How to make banners
Instead of using section, we can use some Divs, and change the CSS. Here are two examples :
BANNER DESIGN
Inside a banner, as a "background", it's exactly the same CSS :
#div_block-37-271 {
position: relative;
overflow: hidden;
}
#div_block-37-271 svg {
position: absolute;
bottom: 0;
left: 0;
width: 120%;
height: 220px;
fill: rgba(0, 0, 0, 0.22)
}BANNER DESIGN
Under the banner, we have to remove the overflow:hidden (or it won't be visible) and the bottom must be negative :
#div_block-49-271 {
position: relative;
}
#div_block-49-271 svg {
position: absolute;
bottom: -150px;
left: 0;
width: 100%;
height: 150px;
fill: #8ED7C7;
transform:scale(1,-1);
}