Add Parallax Scroll to Your Website

Add Parallax Scroll 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!

    • Related Articles

    • Add a Drop Shadow to Your Images

      Adding a drop shadow to your images gives your image depth and perspective. It makes it look like the image is popping right out of the screen! Images without a drop shadow effect: Images with a shadow drop effect: To add a drop shadow to your ...

    • Add an Outer Wrapper to Your Website

      What is a Wrapper? A wrapper is an outside container that you can add to your website to constrain the page width and add different structure to your design. To add a wrapper: 1. Select the Design tool from the gray navigation bar and select the ...

    • Add an Image/Image Gallery

      Add an Image or Image Gallery block to your page by using one of our preset content blocks. Note: An Image block only allows you to upload one image, while an Image Gallery allows you to add multiple. 1. Select the Content tab in the gray navigation ...

    • Add a Background/Custom Background to Your Website Page

      You can customize the background for specific pages on your website by following these steps: 1. Select the Design tool in the gray navigation bar, or the blue Design this page button on your Content page to enter the Design tool. Navigate to the ...

    • Add Border to Content Block

      Here's how to add a Border to a Content block: 1. Select the Design tab in the gray navigation bar. Select the content you'd like to add a Border to and click on it. 2. Scroll down to Border and click every side of the rectangle. Adjust the ...