# Add DappHero Elements

Creating new DappHero Elements in WebFlow is a straightforward task. Using the Custom Attributes panel, any element you create in WebFlow can be labeled with tags to enable DappHero functionality.

### Adding DappHero Custom Attribute

To turn an ordinary element into a DappHero Element, you need only to give it a custom attribute to tell it how you want it to work. To add the Network Feature to an element  

![Add the 'data-dh-feature' as the name](https://3099038747-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz7dd08wQiNE0Pjzqhz%2F-LzDwFvm43_eI6uU-Stz%2F-LzE65S4XnW4bQn279As%2FScreen%20Shot%202020-01-22%20at%204.13.56%20PM.png?alt=media\&token=dea0b851-a092-4b78-bcd6-bac4f097b736)

###

This will put the custom attribute "data-dh-feature" on your \<div> element with the value `network`. When WebFlow eventually generates HTML, the output HTML will look something like this:&#x20;

```markup
<div data-dh-feature="network">...</div>
```

This tells the DappHero engine that this element is meant to connect to the Network Feature, and it will inject the data from **network** into the Div when your user visits your website.&#x20;

## Learn more about Custom Attributes at Webflow:

To learn more, we highly recommend you watch this short video from WebFlow about how to add custom elements:&#x20;

{% embed url="<https://youtu.be/wRUiHNzmkkE>" %}

{% embed url="<https://university.webflow.com/article/how-to-add-custom-attributes-to-an-element-in-webflow>" %}
Additional Resources at Webflow University
{% endembed %}