The Designer canvas – Webflow UI tutorial


When you’re in the Designer, you can interact
with elements in your project visually. That means as opposed to locating the specific
code snippet which correlates to something you want to add or change or remove, you just
click it. We’ll cover four aspects of interacting with
elements on the Canvas: selection, hierarchy, movement, and preview. Now the first three we’ll cover again when
we touch on the Navigator, because we have a number of ways throughout the Designer that
let us interact with these elements. For now, we’re focusing on the Canvas itself. And when it comes to selection, we already
spoiled this earlier. You point and click. But you can see as you hover over elements
on the Canvas: the boundary is illuminated. We see an outline of each element’s boundary. If we want to select a button? We select the button. If we want to select a paragraph? We select the paragraph. In addition to the label which appears when
you select the element, some elements have additional settings we can access. This is made apparent by a settings icon appearing
to the right of the label. We can click that icon to access those settings. And that’s it for selection! Directly selecting content on the Canvas. Next, let’s talk about hierarchy. Three great tools we have at our fingertips
here…right on the Canvas. First, when an element is selected, we can
simply click the label for that element and determine or even select its parent element
or grandparent element. This is helpful if our element is sitting
inside its parent element, and the parent element is difficult to select. We just click the label for our child element,
and select the parent. The second way: we can also make these kinds
of selections on the bottom navigation right under the Canvas. And the last tool we have for hierarchy is
made available when we right click or two finger click. We can select parent elements all the way
up to our page body. That’s hierarchy on the Canvas. Next, we have movement. If we want to move an element? We can simply move the element. Click…and drag into position. And it’s showing us — as we move elements
around — it’s showing us where it’s going. On the Canvas, its position is indicated in
blue. And it’s parent element — the element it’s
going inside? That’s indicated in orange. It’s as straightforward as that. Click and drag into position. Finally, we have Preview. This lets us interact with elements as if
we were previewing the published page…and it does it right in the Designer. It’ll show us animations for instance, and
the interface essentially gets out of the way. You can even toggle the rest of the interface
and it’ll hide even more. That’s called Super Minimal Mode. When you’re in Preview, you won’t be able
to select or modify elements — and that’s by design. We can preview the page as if it was published. And this will work anywhere on the page. So if we go down on our page and toggle Preview? You won’t be forced to the top of the page. Preview shows us our content right where we
are in the Canvas. So. We have selection where we hover over and
select elements. We have element hierarchy, selecting an element’s
parent element — by clicking the label or using the bottom navigation, or using right
click to access our Select Parent Element menu. We have movement: click and drag to move. And we have Preview. Toggle the Preview mode to turn the Canvas
into a fully-functional preview of what the page looks like when it’s published. That’s interacting with elements on the Canvas.

Add a Comment

Your email address will not be published. Required fields are marked *