Create A Parallax Image Effect

This tutorial will show you how to add a parallax image effect to a section of your page. A parallax effect creates a sense of depth by keeping the background image fixed while other page elements scroll over it.


Step 1: Open the Section for Editing

  1. Open your page in the editor.

  2. Navigate to the section where you want to add the parallax effect.

  3. Click the Edit option in the top-left dark blue menu to open the inspector panel.


Step 2: Access Background Settings

  1. Once the inspector is open, locate the Background section in the sidebar.

  2. Scroll down until you find the Background Image option.


Step 3: Select a Background Image

  1. Click on the Background Image field.

  2. Choose the image you want to use as the background for your section.

  3. After selecting your image, click OK to confirm your choice.


Step 4: Enable the Parallax Effect

  1. Under the background image settings, find the option labeled Fixed Image.

  2. Check the Fixed Image box to enable the parallax effect.

  3. Leave all other settings at their default values unless you want to customize them further.


Step 5: Save and Preview Your Work

  1. Click Save to save your changes.

  2. Preview your page to see the effect in action.

  3. As you scroll, you’ll notice that the background image remains fixed while the design elements move over it, creating the parallax illusion.


And that’s it! You’ve successfully created a parallax image effect on your page. This adds a subtle yet visually engaging depth to your design.