Name elements and component instances with Webflow: manage large projects more efficiently

As pages get more complicated, have you ever burnt your hands in a row of “divs,” “divs,” and “divs” lined up on the navigator panel? When the same component is being used over and over again, it takes time just to determine which instance plays what role. To solve this problem, Webflow has released a “rename function” that allows elements and component instances to be given arbitrary names. At first glance, this may seem like a modest update, but it makes a huge difference in workflows when dealing with large and complex projects.

[Image] Draft image: Screenshot of the Webflow navigator panel with multiple component instances each given a custom name

Why complex projects need name management

Webflow's navigator panel shows all elements on a page in a hierarchical structure. If it's a small page, there's no problem, but when it comes to landing pages that reuse many components or service pages with intricate layouts, elements with the same name are arranged vertically. In the “Hero Section,” “Card,” “Card,” “Card”... state, it is necessary to repeat scrolling and checking simply by finding the desired element.

Also, if you're working in a team, there are other issues. When someone other than yourself opens the file later, it takes extra time to figure out which elements are there for what. If naming conventions are in place, the intention of the page structure is conveyed the moment the file is opened, and the cost of handover and feedback is also reduced.

How to use the name change function

You can operate the rename function from either design mode or build mode. There are 3 places you can change. There are ways to rename an element by right-clicking it in the navigator panel, changing it from the element name field in the right panel, and changing it from the context menu. Both methods complete the same operation, so you can choose a method that is easy to perform according to the work flow.

Renaming a component instance can also be performed using the same operation. When using the same component at 10 locations, you can grasp the structure simply by looking at the navigator panel by giving each instance a name that is easy to identify, such as “Hero Card - Service A” and “Hero Card - Service B”.

[Image] Draft image: Screenshot showing that each name is set for the component instance

Improved default names have also improved initial state visibility

In this update, the default name when no custom name is specified has also been improved. Text elements now display their content as a default name, and image elements use the asset name as the name. For custom elements, a human-readable version of the HTML tag is displayed as the name.

This automatically ensures some readability of the navigator panel without having to do any special naming work. Even pages that have become complicated while thinking “I'll sort them out later,” the default names have been improved to make it easier to grasp the overall picture.

Combined with related management features

The name change function is even more effective when combined with the project management function that Webflow has continuously enhanced. Improvements to improve screen visibility have been piled up, such as improving the left side arrangement and layout of the navigator panel, adding right-click support, and improving the ease of identifying hidden elements.

In terms of component management, dedicated panels have also been addedComponent sharing across multiple sitesSystems for organizing and operating large-scale projects have been enhanced, such as component nesting support, instance search functions, etc. By combining these features with name changes, it is possible to proceed while visually clarifying the intention of the page structure.

An organized environment boosts productivity

Naming elements, once set, benefits all subsequent work. Shorter time to search for target elements, easier structure communication to team members, and easier to understand when future self looks back — this accumulation is directly linked to overall project productivity.

Especially when operating a site with multiple pages or a design system that uses a lot of components, the work flow should change by setting up naming rules right away.Custom tooltip functionalityYou can add descriptions to component properties using,Organize your classes with style selectorsWhen combined with doing, it creates an environment that is easier for the whole team to manage. Start by opening the Webflow navigator panel and naming frequently accessed elements and component instances.