---
title: "Page editor: build your site visually"
description: "Visually build every page of your site: assemble sections, add text, images and buttons, set up SEO and publish your changes online."
url: https://docs.vivlab.com/en/editor/
---

# Page editor

The **Page editor** lets you build each of your [pages](https://docs.vivlab.com/en/sections/pages.md) by working directly on its layout. You arrange sections (the large parts of a page), add images, text and buttons, adjust their positions, set information for search engines and publish your changes online.

In these guides, **canvas** means the central editing area, and **block** means an element such as text, an image or a button. A **handle** is a small control you drag to change an element's size or position. See [Understand the terms](https://docs.vivlab.com/en/sections/glossary.md) for other unfamiliar words.

You access it by clicking **Edit** from the [Pages](https://docs.vivlab.com/en/sections/pages.md). Come here whenever you create a new page, tweak a visual or some text, add a one-off promotion, edit the navigation bar or footer, or want to check a page's mobile rendering before publishing.

The editor saves your changes automatically as you go: a **Saved** or **Saving** indicator constantly shows the save state. Until you publish the page, your changes remain invisible to your site's visitors.

<DocsScreenshot name="editor-overview" alt="A demo page showing the canvas, tools and Section panel." :width="1280" :height="720" />

## How this documentation is organized

The editor is composed of three main areas, each documented separately:

- The **[top bar](https://docs.vivlab.com/en/editor/toolbar.md)** brings together navigation between pages, the desktop or mobile view selector, element insertion, undo history, the save indicator and publishing.
- The **[central canvas](https://docs.vivlab.com/en/editor/canvas.md)** is the visual editing area where you select, move and resize elements. Each gesture (moving, resizing, rotating…) is detailed in the [Canvas interactions](https://docs.vivlab.com/en/editor/interaction/index.md) pages.
- The **[side panel](https://docs.vivlab.com/en/editor/menu/index.md)** displays the settings of the currently selected element. A documentation page is dedicated to each type of element (text, image, button, form, carousel, product, navigation, footer…).

In addition to these three areas, the **[style panel](https://docs.vivlab.com/en/editor/style/index.md)** is available on almost every element, gathering common formatting (colors, borders, shadows, margins, animations, filters…). A page is dedicated to each setting.

Finally, the **[bottom bar](https://docs.vivlab.com/en/editor/zoom.md)** controls zoom and full-screen mode, and hosts the **AI assistant** button.

See the [keyboard shortcuts reference](https://docs.vivlab.com/en/editor/shortcuts.md) for mouse gestures and Windows and Mac key combinations.

## Navigate between pages

The selector at the top left displays the title of the current page. Click it to open the list of all your site's pages and quickly switch from one to another without going back through the dashboard. Each page comes with a visual preview to help you find the one you're looking for. The home page is marked with a house icon and protected pages with a padlock.

The **Dashboard** button closes the editor and takes you back to the [Pages](https://docs.vivlab.com/en/sections/pages.md).

## Publish the page

The editor saves your changes automatically, but they remain invisible to visitors until you publish the page. Click **Refresh the page** at the top right to open the publish window.

The window walks you through two steps: a desktop and mobile preview of the page, with badges that recall its state (hidden, home page, password protected…), then the list of what publishing will trigger (going live on your domain, notifying search engines, regenerating the share image, automatic translation, restore point).

Confirm with **Publish** to put the page online. Once published, the **Visit page** button appears to open the live version in a new tab and check how it actually looks.

If the page hasn't changed since the last publish, the button shows **Page up to date**: no action is required.