Where to see element type?

Design help General
1

So this probably should be a quick question. I’ve searched the Internet and can’t seem to find the answer. This is more of a general question about Webflow not really a question about a specific project I’m working on.

I’ve noticed that I can add elements like div etc. but what I’ve noticed especially when the elements have a class name, the element type of no longer shown in the left, but it shows the class name.

Let’s say I insert a div element. On the left where it shows all the elements hierarchy. It says div. But when I give it the class “MainNavBar” it no longer says div but says MainNavBar.

I have looked in the right panel under Style and Settings but can’t seem to find where it says the element type.

Where is the element type displayed? (ie.div, section, article, span, etc.)

2

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.

1 Like