How to add an attribute:

close icon
Hey! Give us some feedback here.
Functional
Coming soon

CMS Attribute

Apply custom attributes with CMS fields. Use with CMS Collection List and Template page.

CMS Attribute
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.

navigator arrow
Identifier
I want this
div block icon

[All Webflow elements accepted]

to have a CMS generated custom attribute.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsattribute-field
copy icon
Value
IDENTIFIER
copy icon
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"
navigator arrow
Name
I want this

Text Block, Heading, Paragraph

to be the name of the attribute.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsattribute-element
copy icon
Value
name
copy icon
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
navigator arrow
Value
I want this

Text Block, Heading, Paragraph

to be the value of the attribute.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsattribute-element
copy icon
Value
value
copy icon
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

Working examples

See this solution working live in this Webflow project.

Example 1
Example
Copy and paste this example directly on Webflow
locked icon
Coming soon

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.