Webflow canvas overview

Discover how you can interact with elements on the Webflow canvas.

When you're in Webflow, the canvas visually represents the elements on your page. This interface allows you to directly interact with elements by clicking on them. Then, you can design and update your site without needing to locate the code snippet for an element you want to style or configure.

You can also interact with elements using the Navigator and the navigation breadcrumb bar. In this article, we'll focus on the key aspects of interacting with elements on the canvas:

• Selection — clicking on elements to select them
• Hierarchy — viewing and selecting an element's parent
• Movement — clicking and dragging to relocate an element
• Preview — viewing how an element will appear on your live site
• Pan & zoom — expanding your view allows for easy panning, zooming, and resizing of the page width

Selection

To select an element on the canvas, hover your cursor over the element and click it.

As you hover over elements on the canvas, a blue outline highlights their edges indicating which element you are selecting.

When you select an element, a label appears at the top-left corner. This label displays the element's name — which may be a custom name, an applied class name, the element tag (e.g., Header), or the default element name (e.g., Container). For elements with additional settings, a gear icon appears to the right of the label. Clicking this icon opens a contextual menu with more settings.

Hierarchy

You can view the hierarchy of an element and select its parent or grandparent element in several ways:

• Click the label — when an element is selected, click its label to show its parent and grandparent elements. Select any element by clicking its label in this menu. This is helpful if a child element is inside a parent element that is difficult to select.
• Use the navigation breadcrumb bar — located at the bottom right under the canvas, this bar allows for hierarchical selections. Elements are displayed in descending hierarchical order from left to right, with the selected element on the right, and the top-level parent element on the left. Click on any element in the bar to select it on the canvas.
• Right-click the element — access the hierarchy from the contextual menu that appears when you right-click an element on the canvas. Hover over Select Parent Element to view all parent and grandparent elements and click on an element to select it on the canvas.
• Press the Up arrow on your keyboard — quickly jump to the parent element with this keyboard shortcut. With an element selected, press the Up arrow on your keyboard to select the element's direct parent.

Movement

To move an element on the canvas, click and drag it to the desired position.

As you drag an element on the canvas, a blue indicator line shows where it will be placed relative to other elements. A blue outline appears around the new parent element, with its name displayed in a blue label at the top. These visual cues help you accurately position the element within your design. Release the mouse button or trackpad to place the element in its new position.

The exact position of a moved element depends on the display setting of the element and its parent(s), along with other properties. Learn more about how the box model and positioning work on the web.

Preview

In preview mode, you can view how your elements and Interactions will appear on your published site without leaving Webflow.

To toggle preview mode, click the "preview play" icon. Toggling preview mode hides most of the Webflow interface, except for the top bar. You can also hide the top bar by clicking the "up arrow" icon. The top bar remains visible by default to allow you to preview different breakpoints without leaving preview mode.

When you're in preview mode, you can't select or modify elements. That's because you're previewing the page as if it were published.

When you're done previewing, you can click the "preview play" icon again or press Escape on your keyboard.

Pan & zoom view

In the canvas bar, click the “canvas view” icon to switch into a view where you can pan, zoom, and resize the page frame. You can still select and edit elements in this view. Click the icon again to return to the standard scrolling view.

Panning

The cursor changes to a grab state while panning to indicate the mode is active. To pan the canvas, use one of the following methods:

• Hold Spacebar and drag
• Use middle-mouse drag
• Scroll with two fingers on a trackpad

Zooming

To zoom in and out, use one of the following methods:

• Press Cmd/Ctrl + scroll or pinch on a trackpad
• Use the "zoom" dropdown to jump to a specific zoom level

Additional info

• You can select different breakpoints or resize the frame width by dragging the frame edge.
• This view is maintained for the current session across pages. Each new session opens the default view.
• This view is not supported in some areas in Webflow. For unsupported areas, the page will refresh and return you to the fixed-view canvas.