Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Some of my most popular tutorials have been the series on Sectional Borders and separators.

This is #1 in a series of cool sectional dividers inspired by the techniques used on tympanus.net.  I even went in and implemented a few on my own website just for fun and to get in some practice http://montereypremier.com/portfolio/

There were just a few things I had to adjust that are unique to Divi and I missed it the first time around. Since so many others were having the same issue, I thought I would attempt to make a novice-friendly step by step tutorial for creating diagonal lines between sections in Divi.

 

Click Here To View Live Demo

 

Lets Get Started

 

First thing you need to do is assign a unique CSS Class to the section you would like the shadowed diagonal line to be on top of.

1. Open the section settings

001

 

2. Give it the following CSS Class: diagonal-shadow

 002

 

 

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

Add this CSS.


/*------------------------------------------------*/
/*------[Shadow Diagonal Lines - Quiroz.co]-------*/
/*------------------------------------------------*/

    #et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */

	.diagonal-shadow::before,
	.diagonal-shadow::after {
		position: absolute;
		content: '';
		pointer-events: none;}

	.diagonal-shadow {
		z-index: 1;
		padding-top: 6em;
		background: #2072a7;}

	.diagonal-shadow::before, 
        .diagonal-shadow::after {
		top: 0;
		left: -25%;
		z-index: -1;
		width: 150%;
		height: 75%;
		background: inherit;
		-webkit-transform: rotate(-2deg);
		transform: rotate(-2deg);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;}

	.diagonal-shadow::before {
		height: 50%;
		background: #535353;
		-webkit-transform: rotate(-3deg);
		transform: rotate(-3deg);
		-webkit-transform-origin: 3% 0;
		transform-origin: 3% 0;}

 

On some occasions this trick might pull the border up a little too close to the content in the section above it. To remedy this, just add a divider to the last row of the section above it and set its height at about 50.

To change the shadow color just change this piece right here.

003

 

I also hope to cover some of the other section separators in the near future so make sure you are signed up with the newsletter to know when the next article is posted.

I love providing these tutorials for free but for those of you who use these to your financial gain, might you consider buying this poor guy a coffee? 😉

 

You Can See My Live Example Here

 

 


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2018 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest