Webflow canvas overview

When you’re in the Designer, 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 in the Designer using the Navigator and the navigation breadcrumb bar. In this article, we’ll focus on the four 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

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 type (e.g., “container”) if no class is applied or the class name if one is applied. 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.

Pro tip: For more precise control, use the Navigator to move elements within your layout. This ensures accurate placement, especially in complex designs.

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 the Designer.

To toggle preview mode, click the preview “play” icon. Toggling preview mode hides most of the Designer 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 as you would in design or edit mode. 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 the Escape key on your keyboard to return to design or edit mode.