If you haven’t seen the announcement yet, Webflow released an update today to the designer navigation panel which allows you to custom name any element in the left-side navigation.
It's very useful, but the change is also confusing users, so let's have a look at what it does, what it doesn't do, and how to use it.
What is it?
This feature allows you to give a new, custom name to any element in the nav.
It does not actually rename anything.
Despite how the new custom name UX feels, "renaming" a classed element or a component instance in the left nav does not actually rename the class or component.
Instead, it creates a custom name for that individual element, and displays that instead.
Unfortunately, these custom names look no different in the nav, which means that simply looking at the left nav won't tell you whether you're looking at a custom name, a first class name, or an element type name, or something else.
What am I seeing?
Webflow uses logic that is loosely like this to choose each element name that it shows you in the nav;
How can I use it?
Despite the confusing UX, custom element names are very handy because you can give much more meaningful, visible names to elements and sections without creating class bloat.
This makes it much easier to structure your page in a way that’s more readable.
I’m especially using it for those important but hard-to-find items;
- Modals
- CSS embeds
- JSON-LD embeds
- Special admin areas
- Deprecated elements, that I want to remove after a refactor
Moreover, you can use icons as part of the name so that important pieces stand out more visibly when you need them to.
Best Practices
- Use it when and where it makes sense. You don't need to create custom names for every element, only for those where the default name is inadequate.
- Use it anywhere you would have created a "fake class" just to have a named Embed or other element in the left nav.
- Use it any time you are naming Component Slots.
Use icons where they help you
Icons are great for visually identifying key elements, like CSS, JSON-LD and script embeds, and if you use them consistently, they simply make it possible to identify custom names.
You can copy-paste some useful emoticons here-
