top of page

Sticky layered section

Templates Design


Mar 15, 2023

Sticky layered section

This dynamic section of color blocks, 3D images and typography uses a grid and sticky position to create a layered effect as you scroll.

Learn how to create this design in 9 steps

1. Select a blank section and apply a 3X8 grid. From the Inspector panel, set the height of the first grid row to 45vh, and the height of the remaining rows to 55vh

image of step 1

2. Open the Add panel and drag a container into the first grid row. Stretch it to fill the row and add 5% margin from the left and right.

3. Place a stacked title and button inside the container and dock it to the center. 

image of step 3

4. In the second grid row, add a container to each of the 3 columns. Stretch each one to fill the cell it's in. Set the background color of the first container to the same one as the section, and give the second and third containers different background colors. 

image of step 4

5. Add a text stack with subtitle and paragraph to the first container and align it to the center. Add images with transparent backgrounds to the other 2 containers. 

image of step 5

6. Duplicate one of your colorful containers and place it in the first cell of the next grid row. Change the color and content according to your design. Continue adding containers with the images and text you want, in the order you want them to appear, in the remaining rows. To achieve the scroll effect in this design, make sure that in grid rows 3 to 8, at least one cell has a container, and at least one cell is empty. 

image of step 6

7. Select the container you added to the first row. Change the position type to Sticky, and leave the top offset at 0px

image of step 7

8. One-by-one, select every other container you added to the grid and set the position type to sticky. For each one, add a Top offset that is the same height of the first grid row, 45vh, this way the containers don’t cover the content in the first row. 

9. Preview to see how the scroll effect works. As you scroll, the cards should slide up and layer over one another. 

Tip: If one of the containers is covering the one above it while you scroll, open the Layers panel and reorder them. The containers that are at the bottom of the grid should be at the top of the panel so they are arranged in front of the ones that appear before them.

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