Custom attributes

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Custom attributes

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 link elements and link settings.

Custom attributes

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

Custom HTML attributes in Webflow
Add new custom attribute (button with plus icon)

Add a new custom attribute for the selected element.

Adding custom HTML attributes in Webflow
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.

Adding a custom tooltip to an element in Webflow
  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 link elements and link settings.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form