Select Page

Welcome to my very first blog post on my brand new website. Today I thought I would take a bit of time out to walk you through how to add the slanted overlay to any section within Divi.

So, to add this pretty neat effect to the row you need to firstly find the row (blue) you wish to apply the effect to. Once you’ve got the row, click on the three horizontal lines to open the options panel for that row. Click on the ‘advanced’ tab and enter banner in the CSS ID field and save the page.

That’s the hard bit done.

Now, navigate to either the CSS file for your child theme or if you’re using Divi’s own CSS options then you can navigate using the WordPress menu Divi > Theme Options.

Scroll to the bottom of the options page and you will see ‘Custom CSS’. Copy and paste the following code into there:


#banner:after {
content:"";
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
background-image:
linear-gradient(
65deg,
rgba(0,0,0,.4) 50%, rgba(0,0,0,0) 50%
);

}

Now click ‘Save Changes’ and refresh the page you added the ‘banner’ tag to.

It’s looking good eh!

So, what if you wanted to change the angles or maybe your text is behind the slanted overlay. To change the angles just adjust the linear gradient from 65deg to anything you like. I recommend playing around here (who knew angles could be fun).

If your text is caught behind the slanted overlay, I used this bit of code to make sure it came forward


#banner .et_pb_row_0.et_pb_row {
z-index: 2;
}

Enjoy!

MORE RAMBLINGS

Envato Elements

Envato Elements is a subscription based website offering “33,000+ inspiring, hand-crafted templates & assets.” for just $29/mo!

read more

Why I Went Freelance

Running a business was time consuming, and took my time away from my family. Freelancing allows me the freedom to do as I please, when I please.

read more