top of page

Sticky index section

Templates Design


Mar 15, 2023

Sticky index section

A dynamic section created using grid, sticky position and 3D images that change as you scroll.

Design: Kobi Michaeli, Tech design: Kobi Michaeli

Learn how to create this design in 9 steps

1. Add a 1x7 grid to a blank section. From the Inspector panel, under Display, set each row to a minimum of 100vh. Note, you can adjust the total number of rows according to your design.

image of step 1

2. From the Add panel, place an image inside the first row and stretch it.

image of step 2

3. Then add a white container and place it inside the first row, on top of the image. Set the container height to 60px, the width to 100% and dock it to the top.

image of step 3

4. Use a grid to design and place elements like text and SVGs inside the container. Once the design is final, in the Inspector panel, under Position, set the container to Sticky.

image of step 4

5. Duplicate the image and container, then place them inside row 2. Replace the image and container elements according to your design.

image of step 5

6. Select the container in row 2, and set the top offset to 60px. This will ensure the containers don’t overlap as you scroll down.

image of step 6

7. Repeat steps 5 and 6 for the remaining rows in the grid. However, for each container in every additional row add 60px to the top offset. So the container in the 3rd row should have a top offset of 120px, the container in the 4th row should have a top offset of 180px and so on.

image of step 7

8. Go to the Layers panel to arrange the element structure on the page. First arrange the images in order from last to first. Then drag to  rearrange the containers on top of the images and order them from last to first as well.

image of step 8

9.Preview to see the final design.

image of step 9

Refresh your skills before you start by visiting Academy X.

More inspiration



Editor X

The rest is up to you.

bottom of page