Add Parallax to Your Website

Parallax is a visually appealing design attribute available for you to enable on your background images and patterns. There are two ways to currently set a photo to parallax. In this article, we will discuss both options:

Option 1:

1. Select the Design tool from the gray navigation bar.

Stylizing_Photos_1.png

2. Click on the Page tab in the design menu on the right-hand side of the website preview.

3. Select the Background button at the bottom of the list.

Screen_Shot_2018-10-22_at_12.33.50_PM.png

Note: You must have an image loaded into the background in order for the following options to appear.

4. At the very bottom, you will see Scrolling. Choose the Parallax scroll option.

Screen_Shot_2018-10-22_at_12.34.32_PM.png

5. Select the Save and Publish buttons to take your changes live!

Option 2:

1. Select the Content tool from the gray navigation bar.

2. Locate the page you'd like to add your parallax image to, and add a Text block by clicking on the green (+) button.

Screen_Shot_2018-11-05_at_9.53.51_AM.png

3. Once the text block is added, click on the blue Design this page button that appears in the top right corner. 

4. On the right-hand side of the website preview, select the text box that you have just created from the list of content blocks, and scroll until you see the Container options.

Screen_Shot_2018-11-05_at_9.55.28_AM.png

Screen_Shot_2018-10-22_at_12.36.00_PM.png

5. Find the area for Background, and upload or select your desired image background from your photo library.

6. Under Type select Normal.

7. Under Scrolling select Parallax scroll.

8. Check off Resize background image based on device type.

9. Check off Expand content to container edges.

10. Under Padding, add the amount of padding on the top and bottom that looks visually appealing to you. Adding padding will increase the size of the photo, so the larger the number on the top and bottom padding, the larger the photo will appear!

11. Select the Save and Publish buttons to take your changes live!

Didn’t find what you were looking for?

We'll help you find the answer or connect with an advisor.

Chat Phone