[Video] Shape Dividers for Oxygen by Supa Mike

Mike, the unofficial Oxygen’s design hero has shared a collection of shape dividers from Elementor and Divi as a user library for Oxygen in Facebook here.

You can preview these shape dividers and get the key needed to use them in Oxygen here.

In the screencast below you can see how one of these can be added in Oxygen including working out the CSS for responsiveness.

Below is the custom CSS I’ve added inside the shape divider Section’s Code Block to make a particular shape divider responsive:

@media only screen and (max-width: 1120px) {

	.shapedivsection1 svg.shapediv1 {
		height: 150px;
	}

}

@media only screen and (max-width: 768px) {

	.shapedivsection1 svg.shapediv1 {
		height: 100px;
	}

	#section-27-2 {
		height: 200px;
	}

}

@media only screen and (max-width: 480px) {

	#section-27-2 {
		height: 100px;
	}

	.shapedivsection1 svg.shapediv1 {
		height: 50px;
	}

}

Note: We do not need to prepend the selectors with body if the CSS is being added inside the Code Block.

Here’s a tip by David Browne:

If we wrap the svgs inside a div, move the CSS onto that div, then all the customising can be done with the Oyxgen UI on the div instead of being inside code block. The svg still needs to have fill, but we can do fill: inherit, then do fill: currentColor inside div, then the user can even control the color using the normal color UI in Oyxgen.

so then the user is just changing the height, color, transforms using visual controls.

Mike on how to change the orientation of the shapes and move them to the top:

in the Code Block / CSS, you see the line :
transform:translateX(-50%) scale(1,-1);

To reverse the shape vertically, change the scale to :
scale(1,1)
to reverse the shape horizontally, change to :
scale(-1,-1)
tp reverse vertically AND horizontally:
scale(-1,1)

By default the position is at the botton of the section.
To put it at the top:
change botton:0 to top:0