Dec 22, 2020
Technical designer Anastasia Logacheva walks you through the steps to create a cool gallery pile up effect using sticky position.
1. Apply a 1x3 grid to your section (1 column x the number of rows you want to add images to)
2. Select Adjust Grid, then Edit Grid
3. Open the Inspector panel
4. Set each row height to 100vh
5. Drag in a container from the Add panel to each grid row
6. Stretch each container to fill the row
7. Select your first container again
8. Select the Design in the floating action bar
9. Select Border and set Width to 0 (px)
10. Set border width to 0 for all other containers
11. Drag in an image from the Add panel to the first container and make sure it’s attached
12. Select the image and open the Inspector panel
13. Dock the image to the centre
14. Drag in images to all other containers and dock to center
15. Select the container and open the Inspector panel
16. Go to SCROLL in the Inspector panel
16. Beside Scroll effect, choose Sticky
17. Set all other containers to Sticky
Result: In preview, as you scroll, the pictures will overlap one on top of the other until they are all stacked.
Notes: Make sure that each of the containers are in the correct grid row and do not cross grid lines. You can also rotate the images slightly to give a cool, messy pile up effect.
I’m a technical designer for Editor X. I studied industrial design at college and have completed courses in graphic, web and UX design. I’m a keen Scuba diver and mother to a golden retriever named Shirley.
Did you find this lesson helpful?
Thank you for your feedback!
Related learning resources.
LESSONS & EXERCISES
LESSONS & EXERCISES
Ready to start creating?
People are searching for
Introducing Editor X
Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.
Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.