Buy Us a Beer!Community ForumMicro-Consulting

CMS-Bound Custom Attributes ⛔

NOW NATIVE TO WEBFLOW!

As of 16-Mar-2023, Webflow has added support for CMS-bound custom attributes and ID's! Phenomenal, guys!

DEPRECATED ⛔

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 style attributes, which apply a visible background color.

Limitations

  • None identified.

Getting Started ( NOCODE )

STEP 1 - Add the Library

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.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/css/webflow-html.min.css">

Add this JS reference to the BODY of your site or page.

<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/src/nocode/webflow-html.min.js"></script>

STEP 2 -Add an HTML Embed with your custom Attributes

Put an HTML Embed right after, or right inside of the element you wish to affect.

Paste in the following code.

<data 
  wfu-attr="style" 
  wfu-attr-target="prev" 
  wfu-attr-val="background-color: yellow;"
  ></data>

  • wfu-attr indicates the name of the attribute you want to add

  • wfu-attr-target identifies the element you want to apply it to, one of;

    • prev indicates the prior sibling.

    • next indicates the following sibling.

    • parent indicates the containing element.

  • wfu-attr-val is 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

Future

May allow value modification;

  • Prepend, append

  • Regex transforms

May allow advanced targeting;

  • jQuery or CSS selectors

Last updated