AttRibutes
Instances
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 multiple instances of a Solution

Many Finsweet Attributes Solutions, like List Combine and Inject, can be used multiple times on a single page.

Typically, elements belonging to the same Solution instance are naturally grouped together — i.e., they are nested. However, when this grouping is not automatic, it becomes necessary to manually establish a relationship among them. To do this, we use the -instance attributes.

How to use Instances

If elements of a Solution instance are not all nested within one another, then it is necessary to manually group them by using the -instance attributes.

The -instance attribute name for your current Solution is composed like this: fs-[name-of-Solution]-instance (e.g., fs-list-instance.) Its value can be any number or word (e.g., 1 or pricing-free).

Define an instance on each element

  1. Select the elements with the element attribute one by one in the Designer
  2. Add an -instance attribute to each and make sure that the value is the same number or word.
The structure
The HTML code

An -instance attribute is declared on each element. Elements in this example will be combined depending on the value of the -instance attribute.

An -instance attribute is declared on each element. Elements in this example will be combined depending on the value of the -instance attribute.

This is how the HTML code will look. It's shown for clarity, you don't need to use this code anywhere in your project.

<div class="container">
  <h2>The Dev list</h2>

  <p fs-list-element="items-count"fs-list-instance="dev"> 0 </p> <p>items</p>

  <div class="list" fs-list-element="list" fs-list-instance="dev">...</div>

  <div class="list" fs-list-element="list" fs-list-instance="dev">...</div>

  <h2>The Sales list</h2>

  <p fs-list-element="items-count"fs-list-instance="sales"> 0 </p> <p>items</p>

  <div class="list" fs-list-element="list" fs-list-instance="sales">...</div>

  <div class="list" fs-list-element="list" fs-list-instance="sales">...</div>

</div>

In this examples, two sets of two lists are combined, resulting in two lists once published

Define an instance on a common parent wrapper

  1. If your layout allows, you can create an instance by assigning a unique attribute to any element that includes all the targeted elements of your Solution's instance.
  2. Select a wrapper parent that contains all the elements of an instance.
  3. Add an -instance attribute to it, with a unique value.
  4. Repeat for every instance.
The structure
The HTML code

An -instance attribute is declared on common parents of the elements to be combined.

An -instance attribute is declared on each element. Elements in this example will be combined depending on the value of the -instance attribute.

This is how the HTML code will look. It's shown for clarity, you don't need to use this code anywhere in your project.

<div class="container">

  <div class"lists-group" fs-list-instance="dev">
    <h2>Development posts & authors</h2>

    <p fs-list-element="items-count"> 0 </p> <p>items</p>

    <div class="list" fs-list-element="list">...</div>

    <div class="list" fs-list-element="list">...</div>

  </div>

  <div class"lists-group" fs-list-instance="sales">
    <h2>Sales posts & authors</h2>
    <p fs-list-element="items-count"> 0 </p> <p>items</p>

    <div class="list" fs-list-element="list">...</div>

    <div class="list" fs-list-element="list">...</div>

  </div>

</div>

In this examples, two sets of two lists are combined, resulting in two lists once published

Define an instance on a mix of wrappers and elements

  1. You can combine these two methods if only a portion of your Solution's elements are grouped within a common parent.
  2. Locate all isolated wrappers and elements related to your Solution.
  3. Apply the -instance attribute, ensuring it carries the same value, to each of them.
The structure
The HTML code

An -instance attribute is declared on common parents of the elements to be combined, as well as on isolated element belonging to our current groups.

An -instance attribute is declared on common parents of the elements to be combined, as well as on isolated element belonging to our current groups.

This is how the HTML code will look. It's shown for clarity, you don't need to use this code anywhere in your project.

<div class="container">

  <div class="header">
    <h1>Dev and Sales posts>
    <p fs-list-element="items-count" fs-list-instance="dev">0</p> <p>items in Dev</p>

    <p fs-list-element="items-count" fs-list-instance="sales">0</p> <p>items in Sales</p>

  </div>

  <div class="lists-group" fs-list-instance="dev">
    <h2>The Dev list</h2>

    <div class="list" fs-list-element="list">...</div>

    <div class="list" fs-list-element="list">...</div>

  </div>

  <div class="lists-group" fs-list-instance="sales">
    <h2>The Sales list</h2>

    <div class="list" fs-list-element="list">...</div>

    <div class="list" fs-list-element="list">...</div>

  </div>

</div>

In this examples, two sets of two lists are combined, resulting in two lists once published, with a counter indicator for each in the header
NOTE

If you define the settings attributes for your Solution within the <script> tag, all instances of your Solution will share these attributes due to inheritance. You can override these inherited attributes by redefining them directly on the elements or their parent elements.

Finsweet Attributes is a series of essential functionalities — called Solutions — that anyone can add to Webflow websites, without code knowledge. It’s based on a javascript library, that is targeting custom attributes added to elements, to empower the website with new features (eg. filtering a Collection List). Learn how it works.
By making Attributes Open Source, we want to lead the way in developing quality software for Webflow that you can rely on, with security in mind too. It’s an open canvas into a software you know very well already: whether you use it to learn how we made it, or to start developing your own Solutions, we have decided to make Attributes limitless for you. Read about Attributes Open Source initiative.