How can I show an element only for the first instance in a Webflow collection?

Published on
September 22, 2023

To show an element only for the first instance in a Webflow collection, you can use the following steps:

  1. Identify the element: Determine which element you want to show only for the first instance in the collection. This could be a text block, image, button, or any other element.

  2. Collection structure: Make sure that your collection is set up properly and the first instance of the collection is already populated. If you haven't created your collection yet, go to the "Collections" tab in the Webflow dashboard, create a new collection, and set up the required fields for your collection items.

  3. Access the element settings: Go to the page where you want to display the collection, and select the element you want to show only for the first instance.

  4. Add a conditional visibility rule: In the element settings panel, navigate to the "Display" tab. You will find an option called "Visibility". Click on the "+" icon next to it and select "Add Condition".

  5. Set the condition: In the condition settings, you will see various options to define the condition. In this case, select "Current item > Index" and set it to "equals" "1". This means that the element will be visible only for the first item in the collection (which has an index of 1).

  6. Preview and test: Save your changes and preview the page. The element you selected should now be visible only for the first instance in the collection. To test this, you can add more items to your collection and check if the element visibility changes accordingly.

Using this method, you can control the visibility of an element within a Webflow collection and ensure that it appears only for the first instance.

Note: This approach assumes that you want to show the element only for the first item in the collection and hide it for all subsequent items. If you want to show the element for a specific item based on a different condition (e.g., a specific field value), you can modify the conditional visibility rule accordingly.

Additional Question 1: How do I hide an element in Webflow for specific collection items?
Additional Question 2: Can I use conditional visibility to show an element based on a specific field value in Webflow?
Additional Question 3: Is it possible to show or hide elements in a Webflow collection template based on index position?