How to Create a Parallax Image Effect

How to Create a Parallax Image Effect

This tutorial explains how to create a smooth parallax scrolling effect for a background image. The effect makes your image stay fixed in place while the content above it scrolls, creating a dynamic and modern design feel.

Step 1: Open the Section Settings

  1. Identify the section where you want to apply the parallax image effect.

  2. Click the Edit button from the dark blue menu located on the top-left corner of that section.

  3. This will open the Inspector Panel for background settings.

Step 2: Select and Add a Background Image

  1. In the inspector, scroll down to the Background Image section.

  2. Click Select Image to open your image library or upload a new one.

  3. Choose your desired image and click OK to apply it as the section background.

Step 3: Enable the Parallax Effect

  1. Locate the Fixed Image checkbox in the background image settings.

  2. Enable this option — it keeps the image fixed in place while the content above scrolls.

  3. You can leave all other settings at their default values for a standard parallax effect.

Step 4: Preview and Save Your Design

  1. Click Preview to test the parallax effect in action.

  2. Scroll through the page to confirm that the background image stays fixed as other elements move.

  3. Once you’re satisfied, click Save to apply the effect permanently.

That’s it! You’ve successfully created a parallax image effect, adding depth and a modern scrolling experience to your page design.