Functional
Coming soon
CMS Attribute
Apply custom attributes with CMS fields. Use with CMS Collection List and Template page.
Get Started
.svg)
Step #2
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Identifier
I want this
[All Webflow elements accepted]
to have a CMS generated custom attribute.
See how it works
Add this attribute
Description
Name
fs-cmsattribute-field
Value
IDENTIFIER
This IDENTIFIER creates a relationship between:
1. The element that receives the custom attribute.
2. The name of the attribute.
3. The value of the attribute.
For example, we will use an IDENTIFIER named slider-data and create a custom generated attribute sl-slider-data = "Picture of lion". This attribute will be placed on an Image element.
We will apply fs-cmsattribute-field = "slider-data" to 3 elements on the page to create the element-name-value realtionship.
1. The Image element that should receive sl-slider-data = "Picture of lion"
2. A Text Block that has the text content, "sl-slider-data"
2. A Text Block that has the text content, "Picture of a lion"
1. The element that receives the custom attribute.
2. The name of the attribute.
3. The value of the attribute.
For example, we will use an IDENTIFIER named slider-data and create a custom generated attribute sl-slider-data = "Picture of lion". This attribute will be placed on an Image element.
We will apply fs-cmsattribute-field = "slider-data" to 3 elements on the page to create the element-name-value realtionship.
1. The Image element that should receive sl-slider-data = "Picture of lion"
2. A Text Block that has the text content, "sl-slider-data"
2. A Text Block that has the text content, "Picture of a lion"
Add this attribute
Description
Name
fs-cmsattribute-element
Value
name
Placed on a text element. Sets the name of the custom attribute.
In the IDENTIFIER example, this attribute is placed on text content "sl-dlider-data".
This element will have two attributes applied to it:
1. fs-cmsattribute-field = IDENTIFIER
2. fs-cmsattribute-element = name
In the IDENTIFIER example, this attribute is placed on text content "sl-dlider-data".
This element will have two attributes applied to it:
1. fs-cmsattribute-field = IDENTIFIER
2. fs-cmsattribute-element = name
Add this attribute
Description
Name
fs-cmsattribute-element
Value
value
Placed on a text element. Sets the value of the custom attribute.
In the IDENTIFIER example, this attribute is placed on text content "Picture of a lion".
This element will have two attributes applied to it:
1. fs-cmsattribute-field = IDENTIFIER
2. fs-cmsattribute-element = value
In the IDENTIFIER example, this attribute is placed on text content "Picture of a lion".
This element will have two attributes applied to it:
1. fs-cmsattribute-field = IDENTIFIER
2. fs-cmsattribute-element = value
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
