Auto-scroll and canvas navigation
On long pages, you need to move around the canvas efficiently — especially while dragging elements from one section to another. Site Designer provides auto-scroll, keyboard navigation, and zoom controls to keep you oriented and productive.
Auto-scroll while dragging
When you are dragging an element (either from the Components panel or repositioning an existing element) and move your cursor near the top or bottom edge of the canvas viewport, the canvas scrolls automatically. This lets you drop an element far from where you started the drag without releasing the mouse.
How the scroll speed works:
- Moving to within ~80px of a canvas edge starts the auto-scroll at a slow speed.
- The closer your cursor gets to the edge, the faster the scroll accelerates.
- Move your cursor back toward the center of the canvas to slow or stop the scroll.
- Release the mouse to drop the element and stop scrolling immediately.
Scrolling with the mouse
The canvas scrolls like any normal web page:
- Mouse wheel / trackpad scroll — scroll vertically up and down the canvas.
- Two-finger swipe on a trackpad — scroll in any direction.
- Scrollbar — the vertical scrollbar on the right edge of the canvas can be dragged directly for fast navigation on long pages.
Horizontal scrolling is available when the canvas viewport is narrower than the page content, or when you have zoomed in.
Keyboard navigation
You can navigate the canvas without touching the mouse:
| Key | Action |
|---|---|
| ↑ / ↓ | Scroll the canvas up or down by a small increment |
| Page Up | Scroll up by one full viewport height |
| Page Down | Scroll down by one full viewport height |
| Home | Jump to the very top of the canvas |
| End | Jump to the very bottom of the canvas |
Canvas zoom
Zooming in or out does not change your design — it only changes how large the canvas appears in the workspace. Use zoom to inspect fine details or to see the full page at once.
| Action | Shortcut |
|---|---|
| Zoom in | ⌘+ |
| Zoom out | ⌘− |
| Reset to 100% | ⌘0 |
| Zoom to fit page | ⌘⇧0 |
The current zoom percentage is displayed in the bottom-right corner of the canvas. You can also click that percentage to type in a specific zoom level directly.
Zoom is independent of viewport width
The canvas zoom and the viewport-width slider (the slider below the canvas) are two separate controls:
- Viewport width slider — simulates the browser window width. Changes this affects which responsive breakpoint styles are active and what the page looks like at that screen size.
- Canvas zoom — scales how the canvas is displayed in your workspace. Has no effect on your design or responsive behavior.
You can zoom in to 200% while still simulating a 375px mobile viewport, for example, to inspect small text at a comfortable size.
Navigating to a specific element
If you know which element you want to work on but cannot find it on the canvas, use the Outline pane:
- Open the Outline pane (tree icon in the right panel).
- Click the row for the element you want.
- The canvas scrolls and zooms to bring that element into view, and it becomes selected.
This is the fastest way to jump to any element on a long or complex page.
