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!
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
You can use the duplicate block feature to quickly duplicate a block so it keeps your set height and even content.
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 Ratio: Change to desired ratio
If you notice any jumpiness when scrolling, please set the Behavior to Fixed. In fact, you may want to do this by default.
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)