How do I rename text span blocks in the Webflow panel?
TL;DR
- Assign unique class names to spans via the Style panel to identify them easily.
- Optionally, add custom attributes for internal notes, and use breadcrumb navigation to select spans since they aren’t clearly labeled in the Navigator.
If you're using multiple text spans inside a Rich Text or Text Block element in Webflow, you may notice they all default to the name “Span” in the Navigator or Style panel. Unfortunately, you cannot rename span elements directly in the Navigator panel as you would with Div Blocks or Sections.
1. Use Class Names to Differentiate Spans
- Select the span by double-clicking the text and highlighting the portion wrapped in a span.
- Click the paintbrush icon (Style panel) and assign a unique class name (e.g.,
Highlight-1,Bold-Red, etc.). - This class name will now appear in the Style panel, making it easier to identify each span's purpose.
2. Use Custom Attributes for Internal Notes (Optional)
- With the span selected, go to the Element Settings panel (gear icon).
- Add a custom attribute like
data-note="First highlight"if you want internal documentation for specific spans. - While this won't rename it in the Navigator, it can help during handoff or QA.
3. Use Text Structure Tools Outside of Navigator
- Since spans are inline elements, they don’t appear labeled clearly in the Navigator.
- Use breadcrumb navigation at the bottom of the Designer canvas to select and verify the correct span.
- Once selected, its class name displays in the Style panel, which becomes your best identifier.
Summary
Webflow doesn’t currently allow direct renaming of span elements in the Navigator. The best method to differentiate them is by assigning unique class names via the Style panel, and optionally using custom attributes for internal notes.