The Multilayer Parallax section adds a staggered parallax effect to your website by using multiple layers that scroll at different speeds. This creates a sense of depth and fluidity in your design.
How to Add a Multilayer Parallax Section
You can add this section from the Add Menu in the top menu bar.
Click the Add Menu icon (shortcut: M).
Search for and select "Multilayer Parallax."
Hover over the canvas and click where you want to add the section.
Styling a Multilayer Parallax Section
Once you've added the section, you can style it using the options in the right-side panel.
Clip content: Toggle this to hide any content that extends beyond the section's edges.
Resize to fill vertically: Click this to set the section's height to 100% of the viewport height.
Background: Add a solid color, a gradient, or a background image from your own library or from a free stock images library.
Aspect Ratio
You can specify and lock the aspect ratio of the section to maintain its proportions when it's resized. To select from popular aspect ratios, right-click the aspect lock icon.
Configuration Options for the Multilayer Parallax Section
To customize the depth and motion of your staggered parallax effect, double-click the Multilayer Parallax section on the canvas to open its configuration menu.
The configuration menu allows you to adjust the following essential settings for each layer:
Image should contain not cover: Use this toggle to control how the background image fills the section. By default, the image is set to cover the section entirely (cropping if necessary). Toggling this on will ensure the image is contained entirely within the section, which may leave empty space.
Images: Click the pen icon to select or add images for each layer. Note: For the layered effect to work correctly, these images need to be transparent PNG files.
Effects 0% to 100%: This value controls the scroll effect for the selected layer.
0% means the image scrolls at a regular speed along with the page content.
100% means the image remains completely still, creating the maximum staggered parallax effect.
Organizing Multilayer Parallax sections
Once a Multilayer Parallax section has been added, it'll appear in the layers panel. You can drag it above or below other sections to place it where you need it in your project. Follow the steps below to learn how to do it.
Select the section in the layers panel
Click and hold it
Drag it above or below the section you want