Individually style CMS Styles - No Lockstep

Good evening all,

I’m trying to style my CMS items individually to make this layout

Problem is, as I make changes to one item, it will reflect on all items in the CMS list. I can’t do this just individually as I’m using the CMS to pull the images directly from Instagram via Zapier. Any thoughts on how I might achieve this unique layout?

Read-only link :


There is a way to do this. You will have to use multiple collection lists, however. Because of the random, sporadic nature of this layout, your best bet is to individually class up each collection list, adjusting position/z-index to get it to where it needs to be.

You may be able to get away with having a few CMS items in a couple of the collection lists, but each item will copy the positioning of its sister items.

It will be complicated, but it is achievable. Be aware there is a limit to the maximum number of collection lists you can have per page. (I think its 20).

I follow what you’re saying, but I think the main problem I’m facing isn’t addressed through that method. I don’t think I was as clear on the main trouble I’m having.

Positioning them around the page individually, I can figure out how to do, I just don’t get how I can individually styles these images, if I add a class to one, it automatically applies it to the other items. I just can’t seem to find if there’s a way to style them individually instead of as a collective

The only way to style them individually is to use multiple collection lists. As you say, when you style one item, it styles the other items in that list automatically, so you’ll have to use lots of different lists that are individually styled.

There’s a way of doing this using custom code, are you comfortable with custom code?