Webflow canvas overview

Discover how you can visually interact with elements in your project on the canvas.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

When you're in the Designer, you can interact with elements in your project visually on the canvas. This is an easier way to engage with elements as opposed to locating a snippet of code for an element you want to edit. You can just click the element on the canvas.

The Canvas is highlighted within a Webflow Designer window.
Canvas

You can also interact with elements in the Designer through the Navigator, and the Navigation bar, but in this article we'll focus on the canvas and the four 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 - seeing how an element will appear on a live site

Selection

To select an element on your canvas, point your cursor at the element and just click it.

A team member profile card is highlighted on a project canvas. The users cursor is hovering over an element called Team Member Block. There is a blue outline surrounding the element to show it is going to be selected.

Notice that as you hover over elements on the Canvas, a blue outline highlights the edge of each element. This indicates which element you are selecting on the canvas.

Several examples of elements on a canvas with the blue outline highlights on the edge of each element selected. Five elements are laid out including a profile card, two text elements, a profile image and a customized team member tag.

Selecting an element will show the element label at the top-left corner of the selected element. For elements that have more setting options, a gear icon will appear to the right of the label. You can click that icon to access those settings.

A gear icon is highlighted on a section title element with H2 heading type settings.

Hierarchy

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

  • Click the label
  • Use the Navigation breadcrumb bar
  • Right click the element
  • Press the up arrow on the keyboard

Click the label - when an element is selected, click its label to see the names of its parent and grandparent elements. You can select the parent element by clicking its label in this menu. This is helpful if a child element is sitting inside a parent element that is difficult to select.

An H2 Section title label is clicked exposing the parent elements Section title wrapper and Container. The Section title element has the text "Meet the team!" entered.

Use the Navigation breadcrumb bar - you can also make these kinds of selections on the bottom navigation right under the canvas.

A navigation breadcrumb bar includes the following elements, Body, section, container, section title wrapper and lastly an H2 section title.
Breadcrumb navigation bar

Right click the element - you can also access the hierarchy of an element from the context menu that appears when you right-click it.

An H2 section title element is right clicked exposing the context menu drop down. The Select Parent Element is hovered over to reveal the hierarchy of the element.

Up arrow on the keyboard - this is the fastest way to jump to the parent element. Check out other handy shortcuts.

Movement

If you want to move an element, simply click and drag it into position.

A text block element is being moved above a button element. The drag and drop motion is displayed including the cursor and horizontal blue bar indicating the new placement of the text block element.

As you move an element around, you can see where you are moving it. On the canvas, the blue indicator shows where you are positioning the element relative to other sibling elements. The orange indicator tells you which parent element you're moving it in or into.

A "team member block" element is shown inside of a Team member card element outlined with the color orange indicating it is the parent element.

The position of a moved element is dependent on the display setting of the element and other properties.  Learn more about how the box model and positioning work on the web.

Preview

With Preview, you can see how your elements will appear on a published site without leaving the Designer.

The preview eye icon is highlighted in the top left section of the designer. Next to the icon is the page name and the top bar visibility toggle arrow icon.

In preview mode, you can also see how your animations will play on a published site.

Step one on the left, click on the Preview icon. Step two on the right, view the animation play on your canvas automatically. The animation is broken down into frames to demonstrate the H1 text block elements' motion.

Toggling preview mode hides the Designer interface. This allows you to see your website in full width. It is also possible to hide the rest of the Designer interface by clicking the top-left arrow icon. This will toggle the top bar visibility.

The top-left arrow icon is highlighted on the top bar. Next to the arrow icon are the page name and Preview icon.

When you're in preview mode, you won't be able to select or modify elements as you would in the Designer. That’s because you are viewing a preview of the page as if it was published.

When you’re done previewing, you can click on the Preview Icon again to go back or just press ESC.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top