How can I display a numbered list in Webflow where the newest item is assigned number 1 and the older items have incremented numbers?

Published on
September 22, 2023

To display a numbered list in Webflow where the newest item is assigned number 1 and the older items have incremented numbers, you can follow these steps:

  1. Create a new collection in the Webflow CMS to store your list items. Go to the CMS section in your Webflow project and click on the "+ Add Collection" button.
  2. Give your collection a name, and add the required fields for your list items. For example, you can add a "Title" field to store the item's title, and a "Date" field to store the date when it was created.
  3. Once your collection is created, go to your desired page or section where you want to display the list. Add a new Collection List element from the Add panel.
  4. Connect the Collection List element to your created collection by selecting it from the "Choose a collection" dropdown in the Collection List settings.
  5. Customize the layout and design of your Collection List by adding additional elements (e.g., text, images) or modifying the existing elements within the Collection List.
  6. Next, select the element within the Collection List where you want to display the numbered item. For example, you can choose a text element to display the item's number.
  7. In the settings panel for the selected element, click on the dynamic binding icon (looks like a lightning bolt) next to the text field where you want to display the number.
  8. In the dynamic binding panel, select the "Current item" option and choose the "Index" field within the collection.
  9. By default, Webflow's CMS assigns a reverse order to items, so the newest item will have an index of 1. However, if you want the newest item to be displayed as 1 and have the older items increment, you'll need to manually reverse the order of items in the Collection List settings. To do this, go to the Collection List settings, click on the order dropdown, select "Sort and filter", and then select the appropriate sort order (e.g., "Newest to Oldest").
  10. Finally, style your list and each list item using the Webflow Designer to match your desired visual appearance.

With these steps, you can display a numbered list in Webflow where the newest item is assigned number 1 and the older items have incremented numbers. Don't forget to save and publish your changes to see the updated list on your live website.

Example CMS fields:

  • Title (Text field)
  • Date (Date field)

Example dynamic binding:

  • Text element: {{CollectionsListName.index}}

Additional Questions:

  1. How do I create a collection in Webflow CMS?
  2. How can I customize the layout of a Collection List in Webflow?
  3. What is the purpose of dynamic binding in Webflow?