PageFly - Use parallax effect in a section

44 views PageFly 0

In this article

In this article, you will learn to create a section with parallax effect to boost the visual experience of your page.

First, choose Add element > Element > Layout > drag Full Section to the page.

With the section chosen > navigate to the Element Inspector > Styling tab.

Choose Parallax for Background and setup height

In Background, choose Parallax > input URL to the background image.

In Box Styles > Dimensions > fill in the height value for the parallax.

Important: When a fixed value is set to Dimension parameter in “All” view, it will be applied to all other views (tablet and mobile) and makes the design not responsive by default any more. Scroll down to learn how to fix this.

Hit Save & Publish and view the page.

Optimize mobile design

Switch to Mobile view.

Select the Section > Styling tab > Box Styles > Dimensions > reduce the height to 400px so the section won’t take up a whole mobile screen and ruin the mobile experience.

Assign different height for the section on Mobile
Hit Save & Publish and view the page.

Checking Parallax effect on mobile