This screencast shows how Thrive Architect’s shape dividers can be manually implemented in Oxygen.

Watch the video to get some context on the codes below.

Code Block’s HTML:

<div class="tve-page-section-out"><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 1000 154.9" style="enable-background:new 0 0 1000 154.9;" xml:space="preserve" data-position="bottom" data-ct="38071" decoration-type="Waves 03" class="svg-shape-bottom" width="100%" preserveAspectRatio="none" data-css="tve-u-169d1dc70bc">
<style type="text/css">
	.p169d1dc70b9{opacity:0.2;}
</style>
<path class="p169d1dc70b9" d="M1000,90.6c-60.3-52.9-150.8-69.7-226-41.2c-23.2,8.8-44.8,21.4-68.6,28.4c-35.2,10.4-72.9,7.8-109.3,2.7
	c-19.1-2.7-38.1-6.1-56.2-12.6c-33.4-12-62.1-39.8-95.8-51c-44.2-14.7-84-19-138.7-6.1c-45.4,10.7-103.6,66-175.1,60
	C72.8,66.1,0.5,0,0.5,0v151.9H1000V90.6z"></path>
<path class="p169d1dc70ba" d="M1000,139.1C939.7,87,845.6,91.8,770.1,120.9c-59.9,23.1-92.4-21.6-173.7,0C499.9,146.6,474.7,66.4,412,52
	c-117.5-27-202.2,63.9-263.4,71.9C38.1,138.4,0,64,0,64v90.9h1000V139.1z"></path>
</svg></div>

Code Block’s CSS:

[data-css="tve-u-169d1dc70bc"] {
	height: 177px;
	bottom: 0px;
	fill: rgb(255, 255, 255);
}

@media only screen and (max-width: 992px) {
  
	[data-css="tve-u-169d1dc70bc"] {
		height: 120px;
	}
  
}

@media only screen and (max-width: 768px) {
  
	[data-css="tve-u-169d1dc70bc"] {
		height: 80px;
	}
  
}

Sitewide CSS:

.tve-page-section-out {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
}

.svg-shape-bottom,
.svg-shape-top {
	position: absolute;
}

Here’s a different video on the same topic by Supa Mike:

https://oxygen4fun.supadezign.com/ThriveDividers-to-Oxygen.mp4

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
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: