Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Parallax scrolling

Some templates use a special visual effect on header images called parallax scrolling. Parallax scrolling involves a background image moving slower than the content in the foreground, creating an illusion of depth and immersion.

Here's an example of parallax scrolling in the Burke template:

parallax_scroll_download.gif

Before you begin

  • Parallax scrolling is only available for banners created from thumbnail images. Image Blocks and gallery images don't offer parallax scrolling.
  • Parallax scrolling works on mobile.
  • When you enable parallax scrolling, it affects all banners on your site.

Supported templates

Parallax scrolling is available in the Brine family, which includes these templates:

Brine, Aria, Basil, Blend, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West.

Note: The discontinued Marquee family (Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift) also supports parallax scrolling. See the Marquee template guide for more information.

Supported pages

Parallax scrolling is available on pages that support banners:

  • Index Pages (background images behind Regular Page sections)
  • Regular Pages
  • Products Pages
  • Events Pages
  • Album Pages
  • Blog Pages
  • Gallery Pages

Add a thumbnail image

Repeat this step for every page where you want a parallax banner.

In the Pages panel, hover over a page and click the next to the title to open Page Settings.

In Page Settings, click the Media tab. Drag an image into the Thumbnail/Banner Image box, and then click Save.

You can also license a stock image for $10 through our partnership with Getty Images.

Enable parallax scrolling

If the banners on your site aren't showing the parallax effect, enable it in the Style Editor:

  1. From the Home Menu, click Design, then Style Editor.
  2. Scroll down to the Main: Overlay section.
  3. Check Enable Parallax.
  4. You may also want to check Parallax Smart Crop to minimize cropping.
  5. Click Save. 

Add a content overlay

If you add content over the image, the content scrolls at the same speed as the rest of the page. This heightens the effect of the image's slower scrolling.

In the Brine family, you can add text, buttons, and other content over the image:

Disable parallax scrolling

To disable parallax scrolling, open the Style Editor and uncheck Enable Parallax. Disabling parallax scrolling affects the entire site and can't be disabled per page.

Set the banner height

In the Brine family:

Cropping

To understand how cropping changes affect parallax images, it helps to think of your site as a piece of paper with a rectangular hole cut out of it. The parallax image is a separate layer underneath, which is only visible through the hole in the paper.

For the paper to scroll faster than the image, the image needs to be taller than the hole. The extra space at the the top and bottom of the image is what gets revealed as you move the paper up and down.

Because of this, cropping and focal point changes may not have a noticeable impact on a parallax scrolling image's position. Your site is designed to ensure that the image has margins on the sides, so that it can properly display the parallax effect.

Tip: Check Parallax Smart Crop in the Style Editor to minimize cropping on the left and right.
Was this article helpful?
53 out of 130 found this helpful