Use parallax effect in a section

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

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

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

In the BACKGROUND section >Background Style, choose Parallax > choose image for Image Source

Click into the More Settings button and set the Normal for Parallax Speed

Adjust the Padding and Margin in the Styling tab for the image.

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

Hit Publish and view the page.

Optimize mobile design

Switch to Mobile view.

Select the Section > Styling tab > SPACING > set 0px for the bottom-padding so the section won’t take up the whole mobile screen and ruin the mobile experience.

use the parallax effect pagefly

Hit Publish and see the parallax effect working on the page.

use the parallax effect

If you want a video tutorial on how to use the parallax effect in a section, you can consult this video

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×