Headway makes it easy to add parallax to your WordPress powered site. The written tutorial is first and at the end is a screencast that goes over creating a sample design so pick your poison! Finally, at the very end, find the layout I created as a downloadable file. Use as a reference or a starting point!

Jump to:

• Written Tutorial
• Screencast Tutorial
• Download Layout

Part One: Grid Mode

Step One: Create desired numbers of wrappers in Grid Mode

I’m using 5 to re-create the design in this tutorial.

Step Two:  Add text blocks in each wrapper

Make sure to add the desired text in each text block.

Step Four: Change wrappers to fluid

Right click on the wrapper and choose “Change Wrapper to Fluid”

Part Two: Design Mode

Step Five: Add background image(s) and set to parallax

Select the wrappers you need to add images to, right click and choose Edit This Instance.  Then in background settings, add an image and change the following settings:

Repeat: No Tiling

Position: Center Center

Size: Cover (Only if your image is not big enough to fill or you want to make sure it fills no matter the screen size)

Parallax: Enable

Parallax Ratio: Change to desired ratio

Step Six: Style the other wrappers and the text

Wrappers:  Instead of adding an image, you can also just add a background color like in the sample design

Text:  Make sure you select “Edit this instance” unless you want all text blocks throughout the site to be styled the same.

Step Seven:  Remove default margins and (optional) box shadows on wrappers

Go into the Design Tree and click on Structure and then select Wrapper.  Then click on the Styles tab and click the Trash icon next to each of the margin and (optional) box shadow settings.

Step Eight: View live site and scroll!

Download the layout
(Note: this is a zip file. You will need to unzip to use the .json layout)