Select Page

Earlier today I saw a couple of people asking how to create a diagonal parallax effect with Divi. One of the posts referred to a CodePen. It made me curious enough to see how hard it would be to do.  Here is how I did it.

Check out my demo 

**This is adapted from a Codepen created by MikeMooreDev to work with Divi. 

Add the CSS in the Page Specific CSS area in the top area of the Divi Builder   

html { height: 100%;}
body { margin: 0; padding: 0; height: 100%; font-size: 16px; font-family: Arial;}
p, h1 {text-align: center; }
h1 {margin: 0; padding: 200px 0; font-size: 5em;}
.diagonal {overflow: hidden; position: relative; transform: skewY(4deg);}
.diagonal .background {background-image: url(""); background-position: 0 0; position: absolute; top: -50%; bottom: -50%; left: 0; right: 0; transform: skewY(-4deg);}
.diagonal .content {position: relative; z-index: 1; transform: skewY(-4deg); }

NOTE: Remember to Change the url for your image.

Add a standard section to your page with a one column row and add a Code Module withe the following code:

<script type="text/javascript">
jQuery(document).ready(function($) {
var top;
  $(window).scroll(function() {
    top = ($(window).scrollTop() * 0.4) + 'px';
    $('.diagonal .background').css({
      'background-position': '0 ' + top

Add a second row and in the Row Module Settings set  “Make This Row Fullwidth” to Yes and “Use Custom Gutter Width” to Yes. Change the Gutter Width to 0.


Add a text module and add the CSS Class “diagonal”.

In the text tab of the text module add the following:

<span class="background"></span>
<div class="content">

 Note: Only work in the text tab.  By switching back and forth the <span> tags will get stripped out and the styling will be lost.

And that’s the basic steps!  I hope you find this useful.  This is my first tutorial that I have created.  Any feedback on how to make it easier to follow would be appreciated!