Custom attributes

HTML attributes [↗] can be used to append additional information to your elements — they define characteristics of an HTML element. 

See a list of All HTML Attributes, but first, note that some custom attributes are reserved since you can already create them using the native Webflow elements, styles, and settings. For example, you cannot add an <a> attribute, but you can create a link using any of the </a>link elements and link settings.

Custom attributes

You can add custom attributes to a selected element in the Element Settings panel.

Add new custom attribute (button with plus icon)

Add a new custom attribute for the selected element.

Name (data input field)

Type the name of the attribute.

Value (input field)

Type the value of the attribute.

Save (button)

Save the attribute.

Cancel (button)

Discard the changes you made to the attribute and close the modal.

X (icon)

Discard the changes you made to the attribute and close the modal.

Edit (pencil icon)

Edit the custom attribute to make changes.

Delete (trashcan icon)

Delete the custom attribute to remove it from the element.

Adding custom attributes

1. Select the element you want to add the custom attribute to
2. Go to the Element Settings Panel (D)
3. Add [+] a custom attribute
4. Specify the name and the value
5. Save the attribute

Editing custom attributes

1. Select the element you want to update a custom attribute of
2. Go to the Element Settings Panel (D)
3. Click the pencil icon next to the attribute you want to edit
4. Update the setting
5. Save the attribute

Deleting custom attributes

1. Select the element you want to delete a custom attribute of
2. Go to the Element Settings Panel (D)
3. Click the trashcan icon next to the attribute you want to delete

An example: adding tooltips

Let's say you want a tooltip to appear when a user hovers over an element. You can add a custom attribute to this element with the tooltip text.

1. Select the element
2. Go to the Settings Panel (D)
3. Add a custom attribute
4. Set the name to "title"
5. Set the value to be the tooltip text you want to appear on hover and save

Must know
Some custom attributes are reserved since you can already create them using the native Webflow elements, styles, and settings. For example, you cannot add an <a> attribute, but you can create a link using any of the </a>link elements and link settings.