---
title: "Canvas and selection in the page editor"
description: "Get to know the canvas, the editor's central area that shows your page in desktop, mobile or side-by-side preview, and learn to select your blocks."
url: https://docs.vivlab.com/en/editor/canvas
---

# Canvas and selection

The **canvas** is the large editing area in the middle of the screen. It shows how your page will look to visitors. Use the [top bar](https://docs.vivlab.com/en/editor/toolbar.md) to see the computer version, the phone version or both side by side.

This is where you select your blocks, move them, resize them and trigger the right-hand side panel. This page describes the gestures common to every element. For settings specific to each type, see the dedicated section of the [side panel](https://docs.vivlab.com/en/editor/menu/index.md); for the details of each gesture, see the [Canvas interactions](https://docs.vivlab.com/en/editor/interaction/index.md) pages.

<DocsScreenshot name="editor-overview" alt="The canvas occupies the center of the editor, with section settings on the right." caption="The canvas occupies the center of the editor, with section settings on the right." :width="1280" :height="720" />

## Select an element

Click on an element of the canvas to select it. The right-hand side panel then automatically adapts to the selected type (text, image, button, form…). Click on an empty area to deselect and find the global [page](https://docs.vivlab.com/en/editor/menu/page.md) settings.

Hold `Shift` while clicking to add an element to the current selection and edit several blocks at once. The side panel then switches to [Multiple selection](https://docs.vivlab.com/en/editor/menu/block-multiple.md) mode, which only offers the shared settings. You can also draw a rectangle over an empty area to select every touched block at once ([drag select](https://docs.vivlab.com/en/editor/interaction/drag-select.md)).

## Move and resize

Once an element is selected, you can:

- **Move** it by drag and drop within its parent section, or one grid step at a time with the arrow keys.
- **Resize** it by grabbing its handles on the edges or corners.
- **Rotate** it with the [rotation](https://docs.vivlab.com/en/editor/interaction/rotate.md) handle.
- **Copy** it with `Ctrl+C` / `Cmd+C` then paste it with `Ctrl+V` / `Cmd+V` into the currently selected section.
- **Delete** it with the `Delete` or `Backspace` key, or via the actions in the side panel.

The floating [action bar](https://docs.vivlab.com/en/editor/interaction/block-action.md) that appears above the selection gathers the other common operations: duplicate, lock, group, align, send forward or backward, delete.

Movements and resizes are saved independently for desktop and mobile: switch to the matching preview mode before changing a block's position.

## Drop an image

Drop an image file from your computer straight onto the canvas: a crop window opens, then the image is inserted where you dropped it and its alt text is filled in automatically. Pasting an image with `Ctrl+V` / `Cmd+V` works the same way, and pasting text creates a text element ready to format.

## Understanding sections

A page consists of a series of **sections** stacked vertically. Each section groups the elements that appear together (a hero banner, a presentation block, a product grid, a contact form…).

Click outside any element, but inside a section, to open the [section](https://docs.vivlab.com/en/editor/menu/section.md) settings (visibility, background, margins, order…).

## Edit the navigation bar and footer

The canvas also displays the **navigation bar** at the top of every page and the **footer** at the bottom. These two blocks are shared across every page of the site: editing them from a page editor updates the entire site in one go.

Click on them to open their dedicated settings ([navigation bar](https://docs.vivlab.com/en/editor/menu/header.md), [footer](https://docs.vivlab.com/en/editor/menu/footer.md)). If your site doesn't have them yet, an **Add a navigation bar** or **Add a footer** button appears in their place.

## Empty page

If the page doesn't yet contain any section, the canvas shows a **Start by creating a section** message with a **Create a section** button. This button opens the library of section templates, ready to use and tailored to your site's [theme](https://docs.vivlab.com/en/sections/themes-brands.md).