How to Randomize CMS Items While Keeping Static Cards in a Grid

Design help CMS
1

Hello! I’m currently working on migrating a company’s existing design into Webflow - my first CMS site. They have a grid of case study thumbnails that link to individual case study pages, which I’ve created as CMS items. However, within this grid, there are 3 cards that are styled differently (see below for reference).

Screenshot 2024-12-31 at 10.19.42 PM
Screenshot 2024-12-31 at 10.19.42 PM2202×576 12.4 KB

They want case study thumbnails to randomize on every refresh, but the 3 darker cards must remain in place at all times. In addition, the whole grid reduces items on smaller breakpoints. I’ve tried several workarounds and using this Random List Items on Every Page Refresh - Webflow idea, but keeping 3 of the non-CMS items static has been challenging.

I’d love any advice or tips on how to approach this issue, or if you have any creative workaround ideas. Thank you in advance for your help, I so appreciate it!

1 Like
3

Hi Mimi,

I think you’d need to build that using custom code- primarily because your fixed cards change position depending on the breakpoint.

In general you should be able to use my solution for random items on refresh, as well as the limit items by breakpoint, and then add your custom code on top of that which inserts your cards at specific breakpoint-specific positions.

I build these types of solutions often for clients. If you’re needed a developer to assist with the build, let me know and we’ll chat.

1 Like
4

Thank you very much, I will work on this solution. They may be interested in working with a developer to assist - I will reach out if that is approved! Thank you!

1 Like