CMS-Bound Custom Attributes ⛔
This Attribute no longer needs development. It will remain in the Sygnal Attributes library to support projects already using it, however we recommend switching to the new Webflow-native feature when possible.
This library allows you to dynamically apply custom attributes to HTML elements.
- This is most valuable within a Webflow Collection List, where the attributes are changing and unknown in advance.
- Attributes are applied in WFU’s post-processing script, executed immediately after the page loads.
- WFU has no restrictions on what custom attributes you can add, or which elements you can add them to. This means that Webflow’s reserved fields are not a barrier here.
Dynamic attributes are not natively visible. View source in order to see the dynamic attributes in the HTML of this demo page.
For demonstration purposes, I’ve applied the attributes as
styleattributes, which apply a visible background color.
- None identified.
There are currently no configuration options for this library, so we’ll use a no-code integration approach.
Add this CSS script to the HEAD of your site or page.
Add this JS reference to the BODY of your site or page.
Put an HTML Embed right after, or right inside of the element you wish to affect.
Paste in the following code.
wfu-attrindicates the name of the attribute you want to add
wfu-attr-targetidentifies the element you want to apply it to, one of;
previndicates the prior sibling.
nextindicates the following sibling.
parentindicates the containing element.
wfu-attr-valis the value you want applied. Use Webflow’s CMS field embed for this, for dynamic values.
NOTE: Any existing attribute will be overwritten.
- Yes you can put multiple attributes in the same embed, and even target them differently
May allow value modification;
- Prepend, append
- Regex transforms
May allow advanced targeting;
- jQuery or CSS selectors