Style items collection CMS Webflow

Tutorial
March 20, 2023
3 min
Webflow tutorial and yellow power icon digidop
Key points

Did you know that you can modify the style of the first item, the last item, or the even and odd items in a Webflow collection? This feature is now available in the Webflow Designer, and we will show you how to use it!

Step 1: Add a Collection to One of Your Pages

You can skip this step if you have already inserted a CMS Collection into one of your pages. If not, log into your Webflow account, go to your project Designer, and then insert the "Collection List" element into one of the sections on your page.

Adding collection list element in webflow

Step 2: Select the Collection Item Element

When you add a collection element in the Designer, the hierarchical order includes the Collection List Wrapper, the Collection List, and then the Collection Item which is inserted into your project. To utilize the style modification feature for specific items, you need to select the Collection Item in the navigator. At the same time, you can assign a class to it!

selecting collection item cms webflow

Step 3: Choose a Structure Type in the Selector

Next to your class in the Style Manager's selector, there's a small downward-pointing arrow. This arrow is typically used to modify the style of an element when it has a special status (On Hover, Pressed, Focused, etc.). When you select the "Collection Item" element, new fields that correspond to the statuses will appear; these are structure fields. In these new fields, we have First Item, Last Item, Odd Item, and Even Item.

Depending on your project and website layout, choose one of the structures!

selecting collection item state cms webflow

Step 4: Modify the Style of the Custom Structure

Once you have chosen a structure (first, last, even, or odd), you can apply and create the desired style (a custom style) and design your personalized collection!

4.1 Style the First Item in a Webflow Collection

style first item collection list cms webflow

4.2 Style the Last Item in a Webflow Collection

style last item collection list cms webflow

4.3 Style the Even Items in a Webflow Collection

style even items collection list cms webflow

4.4 Style the Odd Items in a Webflow Collection

style odd items collection list cms webflow

Now you know how to modify the style of specific items in your collection using the various states of the Webflow selector. This feature can be particularly useful when creating e-commerce sites or blogs (learn how to create an SEO-friendly blog in Webflow).

To learn more about elements in Webflow, feel free to read our article on the subject! You can also subscribe to our newsletter to stay updated with our latest articles and contact our agency for your online visibility needs!

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

Abstract glowing visual with yellow and orange gradients, featuring the text “AI & DESIGN 2025” in the center, suggesting a theme focused on artificial intelligence and design in 2025.
Documentation
AI

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)
Screenshot of the Webflow Partner directory showcasing several agencies: Digidop, Finsweet, Flow Ninja, and Simon Lampert. The blue background features the Webflow Partner logo on the left, while partner cards display their status, starting price, awards, and preview of delivered websites.
Documentation
Webflow

The Webflow Partner Program

The Webflow Partner Program
Agentic AI vs. Generative AI
Documentation
AI

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Want to turn your website into your most valuable asset?

Contact us today