I’ve seen people asking about making this type of layout quite frequently on the Divi Facebook groups, and it’s a layout that I often use in my designs. Parallax is extremely easy to implement with Divi, and this layout effectively splits the page in half vertically whilst using a background image and text on one half of the screen, with the other half displaying the background image.

With good quality imagery, this layout can look beautiful and engaging for your visitors.

You can see a live demo of this layout here.



 

How To Create a Split-Screen Parallax Section (with the Back-End Editor)

 

Firstly, open up a page with the Divi Builder.

Insert a normal section with a 1/2 1/2 column:

 

 

Next, open up the Section Module Settings (blue bar) and enter the following:

Custom Padding: Top 0px, Bottom 0px

Save & Exit.

 

Next, open up the Row Module Settings (green bar). Under General Settings, enter the following:

Make This Row Fullwidth: Yes

Use Custom Gutter Width: Yes

Gutter Width: 1

Custom Padding: Top 0px, Bottom 0px

 

 

The Advanced Design Settings is where all the fun happens.

Firstly, we need to upload a background image to our row. Next to the Background Image field, select Upload and Image and select yours.

 

 

Scroll down and enter the following settings:

Use Parallax Effect: Yes

Parallax Method: CSS

 

We can apply a colour overlay to one half of the row by using the Column settings at the bottom of this tab. Column 1 relates to the left-side of the row, and Column 2 relates to the right. We’ll go ahead and darken the left-side of the row, and this will also be where we put our text a bit later on.

Column 1 Background Color: rgba(0,0,0,0.45)

Column 1 Padding: Top 200px, Right 50px, Bottom 200px, Left 50px

 

 

Save & Exit.

 

Next up we need to insert our text module. On the left column, insert a Text Module.

Because the background of this column has been set fairly dark, let’s choose Text Color: Light.

I’ve simply used placeholder text and a H2 title for this example:

 

 

Save & Exit.

 

Your layout should now look like this:

 

 

And on the front-end, you should have something that looks like this (with a parallax scroll applied to the image!):

 

 

How easy was that? We didn’t even need to use any CSS, just the native Divi settings.

We can even take this layout further and create an alternating chequered effect. We can do this by:

  1. Duplicating the Row we’ve just made
  2. Moving the Column 1 Background Color over to Column 2 Background Color
  3. Moving the Column 1 Padding settings over to Column 2 Padding
  4. Moving the Text Module over to the right-hand side.

And this is the result:

 

 

I hope you’ve found this layout tutorial useful. Please share your examples in the comments below, and feel free to give any feedback or suggestions! As always, don’t forget to Subscribe below to ensure that you don’t miss out on future tutorials!

P.S. This is a back-end editor tutorial. I may also post a Visual Builder tutorial for this layout, if there is a demand for it 🙂 let me know in the comments!

Tim


BMC logoBuy me a coffee

 

You May Have Missed These...

The following two tabs change content below.
Founder of Inline|Creative and Digital Content Producer at IMG Artists. Freelance WordPress web designer, blogger, and musician.

Pin It on Pinterest

Share This