1. Add Parallax Effect
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
- Adjust the Padding in the Styling tab for the parallax image.
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.
Hit Publish and view the page.
2. 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.
- Hit Publish and see the parallax effect working on the page.
