---
title: "Page editor: common cases"
description: "Common page editor tasks step by step: logo, text, sections, buttons, images, form, products, mobile version, animations, menu and publishing."
url: https://docs.vivlab.com/en/guides/editor
---
# Page editor
To open the editor, go to **Website > Pages** and click the page you want to edit.
| Your situation | Case |
| ---------------------------------------- | ----------------------------------------------------------------------------------- |
| New logo | [Change the logo](#change-the-logo) |
| A heading or font to change | [Edit text and its font](#edit-text-and-its-font) |
| A presentation or testimonial block | [Add a section](#add-a-section) |
| A button to a page or a window | [Add a button to a page or a pop-up](#add-a-button-to-a-page-or-a-pop-up) |
| One photo or a whole series | [Add an image or a gallery](#add-an-image-or-a-gallery) |
| Visitors need to write to you | [Add a contact form](#add-a-contact-form) |
| Feature products from your store | [Show products for sale](#show-products-for-sale) |
| On phones, blocks overflow | [Fix the mobile version](#fix-the-mobile-version) |
| An element clutters the small screen | [Hide an element on mobile](#hide-an-element-on-mobile) |
| Make a block appear with an effect | [Animate an element](#animate-an-element) |
| Change the menu or the footer | [Edit the menu or the footer](#edit-the-menu-or-the-footer) |
| Describe the change instead of making it | [Ask Assistant Vivlab to change the page](#ask-assistant-vivlab-to-change-the-page) |
| A block deleted or moved by mistake | [Undo a mistake](#undo-a-mistake) |
| Changes don't show on the site | [Save and publish](#save-and-publish) |
## Change the logo
**Example**: a new PNG logo with a transparent background, to use everywhere.
1. Click the logo in the navigation bar on the canvas (the central editing area): the **Site logo** panel opens.
2. Click the preview or drop your file onto it, then **Save**.
**Result**: the main logo is replaced right away, without publishing, everywhere (site, invoices, emails, receipts, social networks). On a dark background, upload a **Dark logo (optional)** in **Website > Themes > Logo, colors and fonts**, then turn on **Use dark logo** on the block.
Learn more: [Site logo](https://docs.vivlab.com/en/editor/menu/image-logo.md), [Logo, colors and fonts](https://docs.vivlab.com/en/sections/themes-brands.md).
## Edit text and its font
**Example**: replace "Welcome" with "Handmade ceramics in Lyon", in Playfair Display.
1. Double-click the text and type the new one.
2. Select words: the toolbar appears (bold, italic, link, heading, list, color, font).
3. For the font, pick it in the text toolbar: it applies to the selected words, or to the whole text when the block is simply selected. For the size or line height of the whole block, open **Text style** (its **Font** field only appears once a font is set on the block). Click outside the block to finish.
**Result**: the text is saved automatically; visitors see it after you publish. A font chosen here applies to that block only: for the whole site, set the fonts in **Website > Themes > Logo, colors and fonts**.
Learn more: [Text editing](https://docs.vivlab.com/en/editor/interaction/block-text.md), [Text style](https://docs.vivlab.com/en/editor/style/text.md), [Text](https://docs.vivlab.com/en/editor/menu/text.md).
## Add a section
**Example**: a "Text + Image" block under the home banner to introduce your workshop.
1. Click inside the neighboring section, then **Add a section** on the handle at its top or bottom edge.
2. In **Section templates**, **Templates** tab, choose a template (filter them by category) or **Empty section** (the **My pages** tab reuses a section from another page).
3. Replace the text and images.
**Result**: the section is inserted with your theme's colors and fonts (on an empty page, use **Create a section**). Its left bar lets you **Move up**, **Move down**, **Duplicate** or **Delete** it; turn off **Section visible** to hide it without losing it.
Learn more: [Section adjustment](https://docs.vivlab.com/en/editor/interaction/parent.md), [Section](https://docs.vivlab.com/en/editor/menu/section.md).
## Add a button to a page or a pop-up
**Example**: a "Book a workshop" button to the Contact page, or to a sign-up pop-up.
1. **Elements** > drag **Button** (**Elements** group) onto the page, double-click it and type the label.
2. **Action on click**: **Site page**, then the page. Other actions: **Anchor**, **E-commerce product**, **Phone number**, **Email address**, **.pdf document**, **External link to open**.
3. For a pop-up: in **Website > Pop-up**, choose the **On click** trigger, copy the `popup:…` target and publish the pop-up.
4. On the button, choose **External link to open** and paste the `popup:…` target.
**Result**: the click leads to the page or opens the pop-up. The `popup:…` target also works on a link in a text.
Learn more: [Button](https://docs.vivlab.com/en/editor/menu/button.md), [Pop-up in the editor](https://docs.vivlab.com/en/editor/menu/popup.md), [Pop-up](https://docs.vivlab.com/en/sections/popups.md).
## Add an image or a gallery
**Example**: a workshop photo, then 9 projects in 3 columns on desktop, 2 on mobile.
1. Fastest: drag the file onto the canvas, crop, and the image lands where you dropped it. Otherwise, **Elements** > **Image** (**Media** group) > **Replace**: **Upload**, **My images**, **Free photos** or **Artworks**.
2. Check the **Alternative text** (a description read by search engines and screen readers).
3. For a series, drag **Gallery** (**Media** group), **Import multiple images**, then set **Columns** under **Grid**, in the desktop then mobile view.
**Result**: gallery images fill identical cells, whatever their size. **Show captions** displays the alternative text under each photo.
Learn more: [Image](https://docs.vivlab.com/en/editor/menu/image.md), [Gallery](https://docs.vivlab.com/en/editor/menu/gallery.md), [Carousel](https://docs.vivlab.com/en/editor/menu/swiper.md).
## Add a contact form
**Example**: name, email, phone and message on your Contact page.
1. **Elements** > drag **Form** (**Contact** group).
2. On each field, set the **Field type** (**Short answer**, **Long answer**, **Email address**, **Phone**…) and **Field name**; turn on **Required field** where needed (the email).
3. Under **Button style**, **Button text** "Send", then publish.
**Result**: each submission arrives by email and in **Website > Contacts**, with the page it came from. No conditional logic or direct mailing-list sign-up: for that, embed a Tally or Brevo form with the **Iframe** element.
Learn more: [Form](https://docs.vivlab.com/en/editor/menu/form.md), [Contacts](https://docs.vivlab.com/en/sections/contacts.md).
## Show products for sale
**Example**: your best seller on the home page, then the 8 latest products in the "Mugs" category.
1. Hand-picked product: **Elements** > **Product for sale** (**E-commerce** group), then pick it in **E-commerce product**.
2. Automatic grid: drag **Product catalog** (**E-commerce** group). Under **Source**, choose the **Category** and the **Sort** **Creation date (recent)**.
3. Under **Layout**, **Number of products** 8 and **Columns** (4 on desktop, 2 on mobile by default).
**Result**: each card (image, name, price) leads to the product page and follows changes made in **Products**. For a simple link, a button with **E-commerce product** or **Store and e-commerce category** is enough.
Learn more: [Product for sale](https://docs.vivlab.com/en/editor/menu/product.md), [Product catalog](https://docs.vivlab.com/en/editor/menu/product-catalog.md).
## Fix the mobile version
**Example**: on a phone, the heading overflows and two images overlap.
Each block has a position and size for desktop and for mobile. A style set in the desktop view applies to mobile until it has its own mobile value.
1. In the top bar, choose **Mobile only** (phone icon); **Desktop and mobile** shows both side by side.
2. To start from a clean base, click inside the section, then **Reorder elements** (**Automatic mobile layout**). Only the mobile view changes; with several blocks selected (`Shift`), use **Reorder selection**.
3. Move and resize by hand: desktop is not affected.
4. Reduce the heading in **Text style**: **Edits mobile only** confirms it.
**Result**: for example, a 64 px heading on desktop and 32 px on phones, desktop layout untouched.
Learn more: [Top bar](https://docs.vivlab.com/en/editor/toolbar.md), [Style panel](https://docs.vivlab.com/en/editor/style/index.md), [Section](https://docs.vivlab.com/en/editor/menu/section.md).
## Hide an element on mobile
**Example**: a large illustration that makes the page long on phones.
1. Select the element (or the section).
2. Under **Visibility**, choose **Desktop only**.
**Result**: the element disappears from the mobile rendering, and from the editor's mobile preview (find it in the desktop view); neighboring blocks move up. **Desktop & mobile** shows it again. For two versions of a block, duplicate it: original on **Desktop only**, copy on **Mobile only**.
Learn more: [Visibility](https://docs.vivlab.com/en/editor/style/display.md).
## Animate an element
**Example**: three cards that appear one after the other, rising slightly.
1. Select the first card, **Animation** section, **Predefined animations** > **Fade up**.
2. Same for the other two, with an **Appearance delay** of 150 ms then 300 ms.
**Result**: the cards appear in sequence as they enter the screen. **Reset settings** removes the animation. Sections don't animate: animate their blocks.
Learn more: [Animation](https://docs.vivlab.com/en/editor/style/transition.md), [Animated text](https://docs.vivlab.com/en/editor/menu/text-animated.md), [Marquee](https://docs.vivlab.com/en/editor/menu/marquee.md).
## Edit the menu or the footer
**Example**: a "Workshops" link in the menu and a new address in the footer.
1. Click the links in the navigation bar: the **Navigation** panel lists them.
2. Add a link, enter the **Navigation bar text** and choose **Site page** under **Action on click**. To group links, add a **Dropdown menu** (**Elements**, with the bar selected) and fill in its **Menu items**.
3. Double-click the footer address to edit it, then publish.
**Result**: the bar and footer, shared by the whole site, change on every page when you next publish a page. **Select a template** replaces them with a ready-made template, overwriting the content after confirmation.
Learn more: [Navigation bar](https://docs.vivlab.com/en/editor/menu/header.md), [Navigation](https://docs.vivlab.com/en/editor/menu/navigation.md), [Dropdown menu](https://docs.vivlab.com/en/editor/menu/menu.md), [Footer](https://docs.vivlab.com/en/editor/menu/footer.md).
## Ask Assistant Vivlab to change the page
**Example**: "Make the heading punchier and add a booking button under the text."
1. Select the blocks or the section (with no selection, the assistant works on the whole page).
2. Click the stars icon **Vivlab assistant** (bottom left of the canvas, in a block's action bar or a section's bar), describe the change and send it.
**Result**: the changes apply to the page; a single **Undo** removes them all. Nothing goes live before you publish.
Learn more: [Zoom and full screen](https://docs.vivlab.com/en/editor/zoom.md), [Block action bar](https://docs.vivlab.com/en/editor/interaction/block-action.md).
## Undo a mistake
**Example**: you deleted the wrong section.
1. Click **Undo** in the top bar, or `Ctrl+Z` (`Cmd+Z` on Mac).
2. Went too far? **Redo** (`Ctrl+Shift+Z`, `Cmd+Shift+Z` on Mac).
**Result**: the history covers every change since the page was opened.
::: warning No rollback to an older version in the editor
Each publish creates a restore point, but no button lets you roll back to it yourself. Editor closed and an earlier version needed: contact [support](https://docs.vivlab.com/en/sections/supports.md).
:::
Learn more: [Top bar](https://docs.vivlab.com/en/editor/toolbar.md), [Keyboard shortcuts](https://docs.vivlab.com/en/editor/shortcuts.md).
## Save and publish
**Example**: your reworked home page must be visible to customers.
Everything is saved automatically (**Changes saved**), but visitors see the last published version.
1. Click **Refresh the page** at the top right.
2. Check the desktop and mobile preview, **Continue**, then **Publish**.
3. **Visit page** to check the live version.
**Result**: the page is live, search engines are notified, a restore point is created and the button shows **Page up to date**. A newly created page is hidden: choose **Make the page visible** when publishing, or turn it on in the **Page** panel (click an empty area of the canvas).
Learn more: [Publish the page](https://docs.vivlab.com/en/editor/toolbar.md#publish-the-page), [Page](https://docs.vivlab.com/en/editor/menu/page.md).