What is the best way to recreate this page in Webflow? (Especially the columns)

Design help CMS
1

ARCASS Architect Website

I am at the beginning of my Webflow journey and am in the process of rebuilding this site. I have put these images and texts of the thumbnails into my CMS collection. I need a tip on how to create three “independent” columns that display all the content. I have already tried using the CMS List grid, but then I can no longer use interactions to take the middle column and change the scroll speed. So how would you approach this?

If you also have a tip regarding the Nav Section ect. it would also be great!

The more detailed, the better.

2

Cool layout!

For the 3 column layout, I would start with:

  • A div set to grid layout with 3 columns, 1 row
  • Then add 3 collection lists inside. In the settings tab for each list, you can limit & offset the items displayed to divide them among all 3 columns.
  • For the middle collection list, add a transform to it & offset the Y by a negative number.

For the parallax smooth scroll animation, I would recommend using a JS library like Lenis.

1 Like