AttRibutes
Use List Solutions on static lists
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

How to use List Solutions on static lists

Originally designed to work on CMS Collection Lists, most List Solutions also work on non-CMS lists.

How to define a non-CMS list to work with Attributes

Most of Finsweet Attributes List Solutions are compatible with non-CMS Lists, which are composed of static elements, distinct from CMS and Collection Lists.

To apply these solutions, you should replicate the structure of a CMS Collection List and assign specific attributes to each element within it.

Here is the structure of a Collection List that you have to reproduce by nesting Div Blocks:

You can name your elements as you wish, as long as you add the appropriate attribute to each:

You can add one extra element in your static structure, that's not in the Webflow Collection List: the page counter, that will be set with the fs-list-element="page-count" attribute.

NOTE

You don't necessarily need the empty-state and the pagination elements for a non-CMS list to work with Attributes.

However, you do need the empty-state element if you want custom content to appear when a Filter has no result, and you need the pagination element if you're using features from the List Load Solution.

Compatible Solutions

Almost all List Solutions are compatible with this approach:

  • List Filter
  • List Sort
  • List Combine
  • List Tabs
  • List Slider
  • List Load
  • List Combine

Use-cases for using Attributes on non-CMS Lists

Avoid adding a CMS Plan on a website

To avoid extra CMS Plan costs for a project requiring only basic list features with limited content, you can simulate a CMS Collection using Webflow Components. Set up Properties in these components to function like Collection fields. This allows you to maintain control over the design of your static items—meaning the Component instances—while letting Editors easily duplicate and populate them.

After setting this up, you can apply a Filter, Sort, or other compatible List Solutions to enable users to manipulate the list as needed.

Build a template for an external dynamic engine e.g.; Wized

The List Solutions being compatible with static lists allows Attributes to work with Wized.

With Wized, you can create a static list in Webflow—with a single templated item—and then use Render List to build out a list from external data.

Attributes works with these static lists.

This opens up thousands of possible use cases and Attributes combinations with Wized!

A few examples of what's possible:

  • When you are fetching data from a backend like Xano, Airtable, or Supabase, you can use List Filter and List Sort to quickly filter and sort this data.
  • Build a slider using List Slider with the data coming from an external back-end connected to Wized.
  • Create dynamic tabs from external data using List Tabs.

Here is an example of List Filter being used with static list content that is dynamically populated using Render List in Wized: