Adding different Design to different CMS Items

Design help CMS
1

Hello Guys,

I just signed up to the Webflow Forum because I didn´t find anything helping me in my situation. I will try my best to explain everything properly.

So I am just trying to build a kind of Ranking for a clients website as you can see in the following picture

Bildschirmfoto 2023-11-02 um 14.05.33
Bildschirmfoto 2023-11-02 um 14.05.331920×996 87 KB

The Data in the Ranking should be connected to the Webflow CMS which I already figured out.

MY PROBLEM NOW IS:

How can I make it happen, that I can give the first 3 rows different background colors and also use different numbers in the left Row (Rank)?

My goal is to make the Row Rank and Row Chain Static and the other fields are dynamic content. Also I want to make different background on the different lines like shown in the picture.

Till now I wasn`t able to handle this. Maybe someone of the pros here can help me.

In the following Picture you can see, that the list will always take the things I want to be static and copy it to the next row.

Bildschirmfoto 2023-11-02 um 14.09.56
Bildschirmfoto 2023-11-02 um 14.09.561920×932 72.2 KB

I am Thankful for every help Guys.

here is the link to my site

https://preview.webflow.com/preview/testsite-980bd2?utm_medium=preview_link&utm_source=designer&utm_content=testsite-980bd2&preview=c84df497f28a05144ad99d7e7f1f4b40&workflow=preview

Greets

2

Welcome!

While in Design mode, there’s a share link at the top right of the interface. See screen grab. You’ll need to post this link for the community to review your site.

thanks

share
share1023×528 64 KB

3

Just added the link, thank you

4

There are a few ways to do this, depending on your layout.

#1 - 4 LISTS, WITH LIMIT LIST SETTING

The simplest way is to use Webflow’s limit items feature on collection lists. You’d have 4 collection lists, with your 4 different stylings above, and then you’d limit them 1-1, 2-1, 3-1, and 4-100. Make sure they all have the same binding, sorting and filtering so they are limiting the same dataset in the same way.

This approach is HTML-efficient and easy to design, but costs 4 collection lists, and may have some layout challenges due to the lists being separate. Use the same CSS base class for your grid to maintain field positioning consistency.

#2 - 1 LIST, WITH CUSTOM CSS

If you want to just use one collection list for the whole table, but style the first 3 differently, you can do that using custom CSS with the :nth-item pseudoselector and customize the CSS on each element.

Very efficient on the design, one collection list, but requires a firm knowledge of CSS.

#3 - 1 LIST, HYBRID DESIGN

Or, you could get creative, and put all 4 designs in every row of the collection list, so that each row, then use your custom CSS to simply hide all of the designs except 1 for each row. The row at position 1 would only show the purple design. Row 2, red. Row 3, its green variant. All other rows get the gray variant.

This keeps your styling 100% in the designer, uses 1 collection list and the custom CSS simply controls visibility. However it’s HTML inefficient, i.e. 75% of the HTML in this list will be hidden from view, but still downloaded.

5

Thank you very much for your time and explanation.

I am going with the solution number 1!

Thank you

1 Like