Add Parallax to your WordPress site with Headway

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.

parallax-add-wrappers

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

parallax-text-blocks

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.
parallax-text-blocks-text

Step Four: Change wrappers to fluid

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

parallax-wrapper-fluid

Part Two: Design Mode

Step Five: Add background image(s) and set to parallaxparallax-image-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.

parallax-wrapper-remove-1parallax-wrapper-remove-2

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)

Spread the word!

5 Responses

  1. 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!

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress