CMS Attribute
Apply custom attributes with CMS fields. Use with CMS Collection List and Template page.
.svg)
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.
Option 1: Static "name"
Most common and recommended implementation approach. Usually custom attribute "name" does not need to be dynamic. Option 1 is a more simple setup which keeps "name" outside of Webflow CMS dynamic fields.
[All Webflow elements accepted]
For example, if we want to add the custom CMS attribute to an image, this attribute would be placed on that image.
For example, if we want to set the attribute slide-dots = 3 on a slider dots wrapper, we would set fs-cmsattribute-target = slide-dots on the slider dots wrapper.
This text element holds the value that we want to use for the custom attribute
For example, if we want to set the attribute slide-dots = 3 on a slider docs wrapper, we would set fs-cmsattribute-target = slide-dots on a text element that has a plain-text value of 3.
Option 2: CMS dynamic "name"
In the event we need to dynamically control the custom attribute "name", we can use Option 2. This requires one additional step to make the "name" value dynamic and managed by Webflow CMS fields.
In the example below, we use the IDENTIFIER "slide-dots-match" to make a relationship between the target, name, and value.
[All Webflow elements accepted]
For example, if we want to add the custom CMS attribute to an image, this attribute would be placed on that image.
For example, if we want to set the attribute slide-dots = 3 on a slider docs wrapper, we can set fs-cmsattribute-target = slide-dots-match on the slider dots wrapper.
This text element holds the name that we want to use for the custom attribute
Custom attributes follow this structure: name = value
For example, if we want to set the attribute slide-dots = 3 on a slider docs wrapper, we can set fs-cmsattribute-name = slide-dots-match on a text element that has a plain-text value of slide-dots.
This text element holds the value that we want to use for the custom attribute
For example, if we want to set the attribute slide-dots = 3 on a slider docs wrapper, we would set fs-cmsattribute-value = slide-dots on a text element that has a plain-text value of 3.
This works: CMS Attribute works with CMS Load. We can use these two solutions together. For example, we can have a CMS List with CMS Load applied + CMS Attribute applied to items in the list.
This does not work: We can not apply any CMS Load attributes via this CMS Attributes solution. For example, we can not apply fs-cmsload-mode = pagination through this CMS Attribute solution.
Combinations using CMS Attribute:
You can combine this Attribute with others to create more complex solutions.
Developer documentation
Next time implement inside Webflow
