Dynamic modals with editable collection list items

Design help CMS
1

Hi,

I have a question about a thing I wan’t to try with the CMS collection list.

I made a program layout with css grid and the items inside the grid needs to open a modal with dynamic content. That’s quite easy to do, but the hard part is to align those collection items inside the css grid. Because if I use the collection list, it automatically takes over the same styling. This is perfect if you want the items to have the same style, but I want to place it on the grid manually (if you know what I mean).

I want to prevent that I need to make static modals for every single item in the program.

Does anybody has any idea how to tackle this problem?

Kind Regards,

Niels Bakhuis

Here is my read-only link:
https://preview.webflow.com/preview/probackmusic-template?utm_medium=preview_link&utm_source=designer&utm_content=probackmusic-template&preview=7601068960052575713024d21abc38b1&pageId=5e355cd6c62330363e0ec76c&mode=preview

Here is the public link:
https://probackmusic-template.webflow.io/program

2

Hi Niels,

Unfortunately you read-only link leads to a 404, I’m guessing because it’s 5 months old already :smile: But I wanted to share what might be a fix for you or anyone else searching for a soluton.

Creating unique collection list layouts - How to Webflow: Creating unique collection list layouts - Tutorial (2019) - YouTube is a tutorial that coveres in some detail different grid styling for CMS items.

3

Hi Diana,

Thanks for your reply. I will look into it.

Here is the updated read-only link:
https://preview.webflow.com/preview/probackmusic-template-e584137b19bcc018f?utm_medium=preview_link&utm_source=designer&utm_content=probackmusic-template-e584137b19bcc018f&preview=81ec606a40559cf1fb0580b136d0c22c&pageId=5e9acc47716f9d7c27c79f81&mode=preview

And the public link:
https://probackmusic-template-e584137b19bcc018f.webflow.io/program