Hi Alex,
Great question! In Webflow, when you give an element a class name, the Navigator panel (the left panel that shows the hierarchy) will display the class name instead of the element type. This is helpful for quickly identifying elements based on their styling or function rather than their HTML tag type.
However, if you want to see the actual element type (like div, section, article, span, etc.), here’s what you can do:
- Navigator Panel: While the class name is shown in the Navigator, you can hover over the element in the Navigator. A tooltip will appear showing the HTML element type (e.g.,
div,section). This is a quick way to check the type without clicking into the element. - Settings Panel: Select the element, then go to the Settings panel (the gear icon on the right). In this panel, under the ‘Tag’ section, you will see the element’s tag type. If it’s a div, section, or other standard HTML elements, it will show up here.
- Breadcrumb Navigation: Another option is to look at the breadcrumb navigation at the bottom of the Designer. It shows the hierarchy of the selected element and includes both the element type and its class name.
- Selector in Styles Panel: When you have the element selected, check the top of the Styles panel. It will show the class name, but if you look at the breadcrumbs right above the class name field, you’ll see the element type (e.g.,
div,section) as part of the selector path.
These options should help you keep track of the element types as you work with classes in Webflow.