The canvas

Learn how to work with the live canvas — select, move, nest, and edit elements in real time.

Canvas overview

Learn how Site Designer's live canvas works and what makes it different from traditional design tools.

Click, context-menu, and breadcrumb techniques for selecting any element on the canvas.

The floating bar above a hovered element gives you its parent list and quick actions without leaving the canvas.

Adjust the drop zone line indicator and use the focus viewer to select deeply nested elements with ease.

The bar at the bottom of the canvas moves you between parents and children, and shows the classes and IDs in play.

Drag the width slider to view your design at any screen width and decide where the layout needs to change.

The dots above the slider mark where your layout changes. Learn to read them, activate them, and add your own.

Your framework decides which direction you design in. Here is what changes, and where to park the slider.

Where responsive design actually happens: shifting, stacking, and resizing content as the slider moves.

Zoom out to design for large screens from a laptop and reach breakpoints hidden behind the panes.

The phone, tablet, and desktop icons under the breakpoint buttons are a reference point, not a design target.

The two places you can restructure a page: the indicator hover bar on the canvas, and the Elements Tree.

Drag and drop elements onto the canvas, choose element variations, and place them inside the container you meant.

Double-click any text element to edit it directly on the canvas, just like a word processor.