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:
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.
You can also add an alias to the Wrappers to make them easily identifiable. Please see: Wrapper Options article
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: Enable
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)
Jamie this was great. I had stepped away from using Headway over the past year although all of my previous clients sites were built from Headway. I did not even know you could do this now. This along with some other additions has me excited to get back to headway!
Excellent! If you haven’t checked out the sneak peek of 4.0 that we did about a month ago, you should check that out too.
https://www.youtube.com/watch?v=rbIJNG_arxU
Thanks Jamie, I will for sure check it out. I have been using Headway since Oct 2009 and have built my business around it. http://noellemena.com
The support from you and the team is the best!
Noellemena – I really like your website. Nicely done!
Amazing tutorial! Jamie thank you!