PRO TIPS: Using the new rename element feature

Quote

In case you haven’t seen it yet, Webflow released an update today to the designer navigation panel which allows you to “rename” any element in the page and assign your own custom name in the nav.

This is not the same as renaming classes. You classes and class names remain unaffected, you are only assigning a custom name to your element in the navigator, instead.

What’s it good for?

It’s very handy because you can give much more meaningful, visible names to elements and sections without creating class bloat. That makes it much easier to structure your page in a way that’s more readable.

I’m especially using it for those hard-to-find items;

  • Modals
  • CSS embeds
  • JSON-LD embeds
  • Special admin areas

Moreover, you can use icons as part of the name so that important pieces stand out more visibly when you need them to. Here are a few good ones to copy-paste.

Quote

Naming things in a way that makes sense later is such a quiet lifesaver, and this update makes it a lot less messy to keep track of sections. I’m pretty obsessed with clean structure, so tools like https://renamer.io have been handy for file batches on bigger projects, and this rename feature feels like the Webflow version of that same clarity boost. Makes revisiting builds way less of a headache.