How can I remove the column structure and add a comma and space between elements in a collection list in Webflow?

Published on
September 22, 2023

To remove the column structure and add a comma and space between elements in a collection list in Webflow, you can follow these steps:

  1. Select the collection list element on your page.
  2. In the right sidebar, under the Style tab, click on the "Display" dropdown menu and choose "Inline" or "Inline Block". This will remove the column structure and allow the elements to be displayed side by side.
  3. Under the Style tab, click on the "Spacing" dropdown menu and choose "Margin".
  4. Adjust the margin values to add space between the elements. For example, you can add a margin-right value to create space between each element.
  5. To add the comma and space between elements, you will need to use a combination of CMS fields and plain text elements. Here's how:
  • Inside each collection item, add a plain text element and type in the comma and space (e.g., ", ").
  • Next, connect this plain text element to a CMS text field that contains the comma and space value.
  • Finally, position the plain text element next to the corresponding element from the collection list by using the same margin settings as before.

By following these steps, you can remove the column structure, add space between elements, and include a comma and space between items in a collection list in Webflow.

Additional questions:

  1. How do I change the layout of my collection list in Webflow?
  2. Can I customize the appearance of individual items in a collection list in Webflow?
  3. How can I create a filterable collection list in Webflow?