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

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: