INTRO

INTRO

New

Intro to the Designer

Intro to the Designer

New

2:48

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

WEB STRUCTURE

WEB STRUCTURE

New

The Box Model

The Box Model

New

1:54

Element Hierarchy

Element Hierarchy

New

3:57

Navigator

Navigator

New

2:45

Element Basics

Element Basics

New

Element Panel

Element Panel

New

1:49

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div Block

Div Block

New

3:37

Components

Components

New

Intro to Forms

Intro to Forms

New

4:55

Navbar

Navbar

New

9:38

Slider

Slider

New

4:56

Symbols

Symbols

New

3:47

Styling Basics

Styling Basics

New

Intro to Style Panel

Intro to Style Panel

New

3:15

HTML Tags

HTML Tags

New

3:59

Classes

Classes

New

2:46

Combo Classes

Combo Classes

New

4:05

States

States

New

2:47

Layout

Layout

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Padding & Margin

Padding & Margin

New

2:48

Display Settings

Display Settings

New

2:54

Intro to Flexbox

Intro to Flexbox

New

2:27

Grid layouts overview

Grid layouts overview

New

4:18

Positioning Overview

Positioning Overview

New

1:48

Responsive Design

Responsive Design

New

Intro to Responsive Design

Intro to Responsive Design

New

2:21

Intro to Breakpoints

Intro to Breakpoints

New

16:00

16:00

INTERACTIONS CORE CONCEPTS

INTERACTIONS CORE CONCEPTS

New

Triggers & animations

Triggers & animations

New

4:31

CMS & Dynamic Content

CMS & Dynamic Content

New

Intro to Dynamic Content

Intro to Dynamic Content

New

1:36

Intro to Webflow CMS

Intro to Webflow CMS

New

2:02

CMS Collections

CMS Collections

New

2:05

Collection List

Collection List

New

3:33

Filtering Collection Lists

Filtering Collection Lists

New

2:47

Collection Page

Collection Page

New

3:01

Using the Editor

Using the Editor

New

2:22

CMS Collection Fields

CMS Collection Fields

New

Plain Text Field

Plain Text Field

New

0:51

Rich Text Field

Rich Text Field

New

1:16

Image Field

Image Field

New

1:24

Switch Field

Switch Field

New

0:58

Reference Field

Reference Field

New

1:11

Multi-reference Field

Multi-reference Field

New

2:31

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.