PRO TIPS: Using the new rename element feature

Community resources Webflow Tips
1

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.

:red_circle: :orange_circle: :yellow_circle: :green_circle: :blue_circle: :purple_circle: :brown_circle: :black_circle: :white_circle:
:red_square: :orange_square: :yellow_square: :green_square: :blue_square: :purple_square: :brown_square: :black_large_square:
:radioactive: :warning: :children_crossing: :no_entry: :star:
:white_check_mark: :check_box_with_check: :check_mark: :cross_mark: :cross_mark_button: :eight_spoked_asterisk:
:notebook_with_decorative_cover: :closed_book: :open_book: :green_book: :blue_book: :orange_book: :books: :notebook: :ledger:

PRO-TIP: If you use a naming convention, like prefixing your embed names with css or js or json-ld you can use quick search to find and select those elements easily.

1 Like
2

Hi there!

Element renaming in Webflow is a powerful organizational tool that helps you keep track of your design components. These custom names appear in the Navigator, canvas, quick find results, and audit panel, making it easier to manage your project.

You can rename elements in several ways:

  • Using keyboard shortcuts (Option + R on Mac or Alt + R on Windows)
  • Through the Navigator
  • Via the right panel
  • Using the right-click menu

Keep in mind that custom names are purely for organization while designing and won’t appear in your site’s HTML or exported code.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.