WEB STRUCTURE

WEB STRUCTURE

New

Element Hierarchy

Element Hierarchy

New

3:57

Navigator Panel

Navigator Panel

New

2:45

Structure Elements

Structure Elements

New

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div Block

Div Block

New

3:37

Buttons & Links

Buttons & Links

New

Button

Button

New

14:08

Link Block

Link Block

New

9:35

Text Link

Text Link

New

1:16

Typography

Typography

New

Heading

Heading

New

2:02

Paragraph

Paragraph

New

4:42

Rich Text

Rich Text

New

3:52

Text Block

Text Block

New

0:56

Block Quote

Block Quote

New

0:42

List

List

New

2:31

Media

Media

New

Image

Image

New

3:39

Image File Types

Image File Types

New

2:22

Image Resolution

Image Resolution

New

3:28

Assets Panel

Assets Panel

New

3:08

Video

Video

New

1:20

Background Video

Background Video

New

3:15

Lightbox

Lightbox

New

3:44

Forms

Forms

New

Intro to Forms

Intro to Forms

New

4:55

Styling Forms

Styling Forms

New

2:55

Navbar

Navbar

New

Navbar

Navbar

New

9:38

Styling a Navbar

Styling a Navbar

New

4:34

Navbar Menu Button

Navbar Menu Button

New

4:51

Dropdown

Dropdown

New

4:38

Pre-built Components

Pre-built Components

New

Slider

Slider

New

4:56

Tabs

Tabs

New

4:38

Map

Map

New

2:58

Social Media Buttons

Social Media Buttons

New

2:49

Custom Code Embed

Custom Code Embed

New

1:24

Symbols

Symbols

New

3:47

new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Webflow's Navigator gives you a handy visual way to interact with every element on a page, and understand how elements relate to each other in the document's hierarchy. In this video, we'll show you how you can use the Navigator to:

  1. ‍Select an element
  2. ‍Understand hierarchical relationships between elements
  3. ‍Move elements

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

The Navigator gives us a visual way to interact with each and every element on a given page. And we’ll cover three main features of the Navigator: Selection, Hierarchy, and Movement.

Let’s start with selection:

As you hover over different elements in the Navigator, the corresponding elements on the Canvas will highlight. Same thing from the Canvas! If we hover over elements on the Canvas, they highlight in the Navigator.

And of course if we click on an element in the Navigator, we’ve effectively selected it. We can go over to the Style panel and we have all the options there. We can go over to element Settings, and make changes there, too. Anything we select in the Navigator, it’s the same as clicking on that element from the Canvas itself.

If we select something that’s outside our current view? Something outside the visible part of the Canvas? It’ll take us right there; it'll slide right to that element.

Now what about things that are challenging or even impossible to select on the Canvas? If we select our heading here, and we set that heading to display:none? Now it's just hanging out there somewhere in space. It still exists, but there's no way to select it on the Canvas.

Well? The Navigator's the way to go. Again, it shows us and lets us select each and every element. So if we want to switch it back so it's no longer set to display:none? That's fine.

But it’s more than just a fancy way to select elements. That leads us to the second big feature of the Navigator: And that’s hierarchy. It’s a really effective way to get an idea of your page hierarchy: which elements are nested inside other elements. And you can get as granular as you want with this. Of course, you can expand or collapse parent elements to see what’s inside. Each deeper level — each time you go down from a parent view to a child view, the elements become indented.

And if it’s getting too detailed for you and you want to go back to a more top-level view? Just press Collapse All. Want to go back to the most detailed view possible? Expand All. A full view of everything on your page, in order, nested.

That’s hierarchy in the Navigator.

Finally, let’s talk about movement. The Navigator is a quick way to move elements around on the page. We can reorganize sibling elements really easily — elements that share the same parent. We just drag the element right where we want it to go.

And it doesn’t matter if it’s a lone element or it has children. We can move entire sections of our page — sections that have their own child elements — we can move these just as easily.

And we can change up the hierarchy, too. Want to move an element outside of its parent? Sometimes that can be challenging when items are similarly sized on the Canvas. We just move the element outside of its parent.

Want to nest an element inside something else? We just move that element inside something else. As always, the Navigator gives us that control.

And that’s it! We can use the Navigator to select elements, get a visual representation of the page hierarchy — the organization, and of course we can click and drag to move and reorganize elements right from the Navigator.