Help with adding a CMS Project List

Hi,

I’m hoping someone might be able to help me with the creation of a CMS list that is styled in the same way as my current website.

The link is here - Webflow - Everall Design | Multidisciplinary Design Studio in London, UK.

Underneath the “All Projects” section I’d like to add a list that automatically populates as projects are added to the CMS projects collection. I have added a screenshot of exactly what I am hoping to achieve which i made in photoshop.

Really grateful for any help with this.

Best,
Jamie


Hey Jamie, you’ll want to read up an Collection Lists in the Webflow U. There you’ll learn data binding and styling.

But here are some tips on the arrangement I think will work for you.

You can use your Grid + H5’s arrangement you have on your Projects Template as a starting point.

  1. Remove the Spacer elements, and use apply a bottom border to the grid instead
  2. Have the grid store one row only, which is 2 bound items + your link
  3. Place the entire grid inside of your Projects-bound collection

This will ensure the rows stay independent, but also makes your responsive designers easier where the grid will probably run vertically rather than horizontally.

Hi,

Thanks so much for this - I have taken a look at the video and get the idea but im able to replicate what you have done here. The example you have presented looks exactly how I’d like it - Are you able to upload a short Loom video of a quick way to achieve this?

Very grateful for your help here,
Jamie

Structure the elements the same as what I’ve shown you in that left side nav, that’s all you need. It’s really important for you to read up on collection lists and grid layouts, or you’ll be stuck forever with creating basic layouts.

Cheers - got it thanks Michael.

Is there a way to have the “Project Type” section auto scroll as opposed to drop a line. I’d like to keep everything on a single line like the Home Studio project. Let me know if i need to start a new thread for this.

Thanks!

I can’t picture what you mean by “auto scroll”. But yeah that’s a separate topic and problem space, I’d write up what you’re trying to do and what you’ve tried and see if someone can help.

Share your project link as always.

Thanks - Ill mark this as solved and set up a new topic.

Appreciate the help.