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
A heading or font to change	Edit text and its font
A presentation or testimonial block	Add a section
A button to a page or a window	Add a button to a page or a pop-up
One photo or a whole series	Add an image or a gallery
Visitors need to write to you	Add a contact form
Feature products from your store	Show products for sale
On phones, blocks overflow	Fix the mobile version
An element clutters the small screen	Hide an element on mobile
Make a block appear with an effect	Animate an element
Change 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
A block deleted or moved by mistake	Undo a mistake
Changes don't show on the site	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, Logo, colors and fonts.

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, Text style, Text.

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, Section.

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, Pop-up in the editor, Pop-up.

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, Gallery, Carousel.

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, Contacts.

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, Product catalog.

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, Style panel, Section.

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.

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, Animated text, Marquee.

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, Navigation, Dropdown menu, Footer.

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, Block action bar.

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.

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.

Learn more: Top bar, Keyboard shortcuts.

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, Page.