How to Create a Parallax Effect

Video Tutorial:

Article:

Parallax is a cool background effect you can easily accomplish with full width images.

1. In the Page Builder, drag the Image element onto your page and choose the image you want as the background of your first parallax section. Position it where you want it to go, underneath some content or at the top of a page.

   

   

2. Select the image, and click Full Width in the Quick Actions toolbar.

   

3. Next, with the image still selected, click on Background in the Properties panel, and check the box marked Fixed Background.

   

4. Next, drag another Image element onto your page and choose the image you want as the background of your second parallax section. Position it directly underneath the first section.
5. Select the image, and click Full Width in the Quick Actions toolbar.
6. Next, with the image still selected, click on Background in the Properties panel, and check the box marked Fixed Background.

Repeat the above steps for as many parallax sections as you’d like - remember, parallax doesn’t work on mobile, so users on the go will just see the background scroll as normal.