The Preview

Since you’re already ON this website.. look up at the upper left corner of the header. Yeah

Right there.

 

Then someone asked me how I did it. So here’s the tutorial on that.

 

The Video

The Code

#main-header {
	overflow: hidden;
	position: relative;
}
#main-header:before {
	content: "";
	position: absolute;
	display: block;
	top: -76px; /* Play around with the value to get what you want */
	left: -106px;  /* Play around with the value to get what you want */
	width: 260px;  /* Play around with the value to get what you want */
	height: 145px;  /* Play around with the value to get what you want */
	background: #d00;  /* Play around with the color to get what you want */
	transform: rotate(-45deg);  /* Play around with the value to get what you want */
	transition: .3s all ease-in-out;
}
/* This is for the header on scroll */
#main-header.et-fixed-header:before {
	top: -76px; /* Play around with the value to get what you want */
	left: -106px; /* Play around with the value to get what you want */
	transition: .3s all ease-in-out;
}
To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.
(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

Pretty simple, right?

PS. If you use a gradient background, sometimes it looks blurry, and I don’t like blurry objects. So I think it’s a low-skill level method.

 

Need to learn CSS?

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!

Photo by Joanna Kosinska on Unsplash