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. You can install PageFly for Free here.

Important note: The parallax effect only works on Live view

You can also watch this video tutorial:

Add parallax effectClick to copy

Please follow the following steps:

  • Choose Add element icon > Layout > drag Full Section to the page editor
  • Navigate to the Styling tab.
  • In the BACKGROUND section > Background Style, choose Parallax > choose image with Image Source

use parallax effect in a section

  • Click into the More Settings button and set the Normal for Parallax Speed
  • Adjust the Padding in the Styling tab for the parallax image.

use parallax effect in a section

Important: When a fixed value is set for the Padding 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.

use parallax effect in a section

Hit Publish and view the page.

Optimize mobile designClick to copy

  • 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 parallax effect in a section

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

Thank you for your feedback!

Navigate this category

PreviousPrevious article

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese. Please check the flags on the page header.

I got it!
Join PageFly Facebook Group to get Bearie Coin JOIN US NOW