How to zoom and move around the canvas
In the TeleportHQ editor, the zoom controls sit at the top right of the canvas: click − to zoom out, + to zoom in, and the percentage (for example 100%) to reset. You can also press Ctrl and + or − (Cmd on a Mac). To move around a zoomed page, scroll, or hold Space and drag.
Zoom in and out
The TeleportHQ canvas zooms between 25% and 600%.
- At the top right of the canvas, click − (tooltip Zoom Out) or + (tooltip Zoom In). Each click moves one step: 25%, 50%, 75%, 100%, 125%, 150%, 175%, 200%, then 300% up to 600%.
- To go back to actual size, click the percentage between the two buttons (tooltip Reset Zoom Level). The canvas returns to 100%.
Other ways to zoom:
| To... | Windows | Mac |
|---|---|---|
| Zoom in one step | Ctrl + + | Cmd + + |
| Zoom out one step | Ctrl + − | Cmd + − |
| Reset to 100% | Ctrl + 0 | Cmd + 0 |
| Zoom smoothly toward the mouse pointer | Hold Ctrl and scroll | Hold Cmd (or Ctrl) and scroll, or pinch on the trackpad |
Move around the page
To move around a TeleportHQ page on the canvas:
- Scroll up and down: use the mouse wheel or two fingers on the trackpad.
- Scroll sideways: hold Shift and scroll.
- Drag the page: hold the Space bar, then press and drag with the mouse. You can also drag with the middle mouse button.
Switch between open pages with the tabs
The TeleportHQ canvas has a row of tabs above the page, like browser tabs, one for each page or component you've opened.
- Click a tab to show that page on the canvas.
- Click the × on a tab to close it. The last open tab can't be closed.
- Right-click a tab for Close, Close Others and Close to the Right.
When you open a page from the Pages list, it opens in a temporary tab that the next page you open replaces. Double-click the tab to keep it open. Drag tabs to change their order. Press Ctrl+↓ or Ctrl+↑ (Cmd on a Mac) to open the next or previous page in the list.
See the page at another screen size
The screen-size icons in the canvas top bar change the width of the TeleportHQ canvas, for example to check the phone layout. Click an icon (its tooltip shows the width, such as 479px) and the canvas shrinks to that width. Style changes you make now apply to that screen size and smaller. You can also drag the handles at the sides of the canvas to any width between 320 and 3200 pixels. See How to make your site look good on phones and tablets.
Check that it worked
The percentage between the zoom buttons shows the current zoom level, and the canvas grows or shrinks around your page. At 100%, the page is shown at its real size for the selected screen width.
Troubleshooting
Zoom doesn't react while I'm dragging Zooming is paused while you drag an element or draw a selection box. The wheel scrolls the canvas instead. Release the mouse button first.
The zoom level changes back when I reopen the project TeleportHQ reopens a project at the zoom you left it at only when Keep zoom level is on:
- In the TeleportHQ editor, at the bottom of the left sidebar, click the Project settings cog.
- Under Editor, click Preferences, then click View.
- Under Canvas, switch on Keep zoom level. Keep viewport size does the same for the canvas width.
The same switches are in Project Menu → View → Canvas. See How to change editor preferences (Editing, View and Advanced features).
Good to know
- There's no "fit to screen" button. Reset always means 100%. Right after the AI Website Builder finishes, the homepage is fitted to the canvas once.
- Zoom only affects the editor. Your published site isn't zoomed.