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.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!