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.
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.
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.
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.
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.
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
Eliminate Scrolling on a Webpage
Note: In order for these instructions to work, in some cases, the site footer (Horizontal & some Vertical Navigation layouts) and Page Title blocks will need to be invisible. Most galleries on pages will have images that hit the browser bottom or ...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 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 Sitewide Banner Above Top Navigation
You can call attention to a sale or a special announcement to your website's visitors by adding a sitewide banner above your website's top navigation bar. This process involves building a text block, then adding some custom CSS and JS code to your ...Add More Text Columns
If you would like columns of text on your page, here is how you can add them: 1. Select the Design tool in the gray navigation bar and select the Text block you would like to change. 2. On the right-hand panel, scroll down until you see the Content ...