---
title: "Éditeur de page : cas pratiques"
description: "Les tâches courantes de l'éditeur de page pas à pas : logo, textes, sections, boutons, images, formulaire, produits, version mobile, animations, menu et publication."
url: https://docs.vivlab.com/guides/editor
---
# Éditeur de page
Pour ouvrir l'éditeur, allez dans **Site web > Pages** et cliquez sur la page à modifier.
| Votre situation | Cas |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| Nouveau logo | [Changer le logo](#changer-le-logo) |
| Un titre ou une police à changer | [Modifier un texte et sa police](#modifier-un-texte-et-sa-police) |
| Un bloc de présentation ou de témoignages | [Ajouter une section](#ajouter-une-section) |
| Un bouton vers une page ou une fenêtre | [Ajouter un bouton vers une page ou un pop-up](#ajouter-un-bouton-vers-une-page-ou-un-pop-up) |
| Une photo ou toute une série | [Ajouter une image ou une galerie](#ajouter-une-image-ou-une-galerie) |
| Les visiteurs doivent vous écrire | [Ajouter un formulaire de contact](#ajouter-un-formulaire-de-contact) |
| Mettre en avant des articles de la boutique | [Montrer des produits en vente](#montrer-des-produits-en-vente) |
| Sur téléphone, des blocs débordent | [Soigner la version mobile](#soigner-la-version-mobile) |
| Un élément encombre le petit écran | [Masquer un élément sur mobile](#masquer-un-element-sur-mobile) |
| Faire apparaître un bloc avec un effet | [Animer un élément](#animer-un-element) |
| Changer le menu ou le pied de page | [Modifier le menu ou le pied de page](#modifier-le-menu-ou-le-pied-de-page) |
| Décrire la modification plutôt que la faire | [Demander une modification à l'Assistant Vivlab](#demander-une-modification-a-l-assistant-vivlab) |
| Un bloc supprimé ou déplacé par erreur | [Annuler une erreur](#annuler-une-erreur) |
| Les changements n'apparaissent pas sur le site | [Enregistrer et publier](#enregistrer-et-publier) |
## Changer le logo
**Exemple** : un nouveau logo PNG à fond transparent, à mettre partout.
1. Cliquez sur le logo dans la barre de navigation de la canvas (la zone de travail centrale) : le panneau **Logo du site** s'ouvre.
2. Cliquez sur l'aperçu ou glissez-y votre fichier, puis **Enregistrer**.
**Résultat** : le logo principal est remplacé immédiatement, sans publication, partout (site, factures, e-mails, reçus, réseaux sociaux). Sur fond foncé, importez un **Logo sombre (optionnel)** dans **Site web > Thèmes > Logo, couleurs et polices**, puis activez **Utiliser le logo sombre** sur le bloc.
Pour aller plus loin : [Logo du site](https://docs.vivlab.com/editor/menu/image-logo.md), [Logo, couleurs et polices](https://docs.vivlab.com/sections/themes-brands.md).
## Modifier un texte et sa police
**Exemple** : remplacer « Bienvenue » par « Céramiques faites main à Lyon », en Playfair Display.
1. Double-cliquez sur le texte et tapez le nouveau.
2. Sélectionnez des mots : la barre d'outils apparaît (gras, italique, lien, titre, liste, couleur, police).
3. Pour la police, choisissez-la dans la barre d'outils du texte : elle s'applique aux mots sélectionnés, ou à tout le texte si le bloc est simplement sélectionné. Pour la taille ou l'interligne du bloc entier, ouvrez **Style du texte** (le champ **Police d'écriture** n'y apparaît qu'une fois une police définie sur le bloc). Cliquez hors du bloc pour terminer.
**Résultat** : le texte est enregistré automatiquement ; les visiteurs le voient après publication. Une police choisie ici ne vaut que pour ce bloc : pour tout le site, réglez les polices dans **Site web > Thèmes > Logo, couleurs et polices**.
Pour aller plus loin : [Édition de texte](https://docs.vivlab.com/editor/interaction/block-text.md), [Style du texte](https://docs.vivlab.com/editor/style/text.md), [Texte](https://docs.vivlab.com/editor/menu/text.md).
## Ajouter une section
**Exemple** : un bloc « Texte + Image » sous le bandeau d'accueil pour présenter votre atelier.
1. Cliquez dans la section voisine, puis sur **Ajouter une section** sur la poignée de son bord haut ou bas.
2. Dans **Modèles de section**, onglet **Modèles**, choisissez un modèle (filtrez-les par catégorie) ou **Section vide** (l'onglet **Mes pages** reprend une section d'une autre page).
3. Remplacez textes et images.
**Résultat** : la section est insérée aux couleurs et polices du thème (sur une page vide, passez par **Créer une section**). Sa barre de gauche permet de la **Monter**, **Descendre**, **Dupliquer** ou **Supprimer** ; désactivez **Section visible** pour la cacher sans la perdre.
Pour aller plus loin : [Ajustement de section](https://docs.vivlab.com/editor/interaction/parent.md), [Section](https://docs.vivlab.com/editor/menu/section.md).
## Ajouter un bouton vers une page ou un pop-up
**Exemple** : un bouton « Réserver un atelier » vers la page Contact, ou vers un pop-up d'inscription.
1. **Éléments** > faites glisser **Bouton** (groupe **Éléments**) sur la page, double-cliquez et tapez le libellé.
2. **Action lors du clic** : **Page du site**, puis la page. Autres actions : **Ancre**, **Produit e-commerce**, **Numéro de téléphone**, **Adresse email**, **Document .pdf**, **Lien externe à ouvrir**.
3. Pour un pop-up : dans **Site web > Pop-up**, choisissez le déclencheur **Au clic**, copiez la cible `popup:…` et publiez le pop-up.
4. Sur le bouton, choisissez **Lien externe à ouvrir** et collez la cible `popup:…`.
**Résultat** : le clic mène à la page ou ouvre le pop-up. La cible `popup:…` fonctionne aussi sur un lien dans un texte.
Pour aller plus loin : [Bouton](https://docs.vivlab.com/editor/menu/button.md), [Pop-up dans l'éditeur](https://docs.vivlab.com/editor/menu/popup.md), [Pop-up](https://docs.vivlab.com/sections/popups.md).
## Ajouter une image ou une galerie
**Exemple** : une photo de l'atelier, puis 9 réalisations en 3 colonnes sur ordinateur, 2 sur mobile.
1. Le plus rapide : glissez le fichier sur la canvas, recadrez, l'image est posée à l'endroit du dépôt. Sinon, **Éléments** > **Image** (groupe **Média**) > **Remplacer** : **Importer**, **Mes images**, **Photos gratuites** ou **Œuvres d'art**.
2. Vérifiez le **Texte alternatif** (description lue par les moteurs de recherche et lecteurs d'écran).
3. Pour une série, glissez **Galerie** (groupe **Média**), **Importer plusieurs images**, puis réglez **Colonnes** dans **Grille**, en vue ordinateur puis mobile.
**Résultat** : les images de la galerie remplissent des cases identiques, quelle que soit leur taille. **Afficher les légendes** montre le texte alternatif sous chaque photo.
Pour aller plus loin : [Image](https://docs.vivlab.com/editor/menu/image.md), [Galerie](https://docs.vivlab.com/editor/menu/gallery.md), [Carrousel](https://docs.vivlab.com/editor/menu/swiper.md).
## Ajouter un formulaire de contact
**Exemple** : nom, e-mail, téléphone et message sur votre page Contact.
1. **Éléments** > faites glisser **Formulaire** (groupe **Contact**).
2. Sur chaque champ, réglez le **Type de champs** (**Réponse courte**, **Réponse longue**, **Adresse e-mail**, **Téléphone**…) et le **Nom du champs** ; activez **Champs obligatoire** au besoin (l'e-mail).
3. Dans **Style du bouton**, **Texte du bouton** « Envoyer », puis publiez.
**Résultat** : chaque envoi arrive par e-mail et dans **Site web > Contacts**, avec la page d'origine. Pas de logique conditionnelle ni d'inscription directe à une liste d'e-mailing : pour cela, intégrez un formulaire Tally ou Brevo avec l'élément **Iframe**.
Pour aller plus loin : [Formulaire](https://docs.vivlab.com/editor/menu/form.md), [Contacts](https://docs.vivlab.com/sections/contacts.md).
## Montrer des produits en vente
**Exemple** : votre best-seller sur l'accueil, puis les 8 derniers produits de la catégorie « Tasses ».
1. Produit choisi : **Éléments** > **Produit en vente** (groupe **E-commerce**), puis choisissez-le dans **Produit e-commerce**.
2. Grille automatique : glissez **Catalogue de produits** (groupe **E-commerce**). Dans **Source**, choisissez la **Catégorie** et le **Tri** **Date de création (récent)**.
3. Dans **Disposition**, **Nombre de produits** 8 et **Colonnes** (4 sur ordinateur, 2 sur mobile par défaut).
**Résultat** : chaque carte (image, nom, prix) mène à la fiche et suit les changements faits dans **Produits**. Pour un simple lien, un bouton avec **Produit e-commerce** ou **Boutique et catégorie e-commerce** suffit.
Pour aller plus loin : [Produit en vente](https://docs.vivlab.com/editor/menu/product.md), [Catalogue de produits](https://docs.vivlab.com/editor/menu/product-catalog.md).
## Soigner la version mobile
**Exemple** : sur téléphone, le titre déborde et deux images se chevauchent.
Chaque bloc a une position et une taille pour l'ordinateur et pour le mobile. Un style réglé en vue ordinateur s'applique au mobile tant qu'il n'a pas de valeur mobile propre.
1. Dans la barre du haut, choisissez **Mobile uniquement** (icône de téléphone) ; **Ordinateur et mobile** montre les deux côte à côte.
2. Pour repartir d'une base propre, cliquez dans la section, puis **Réorganiser les éléments** (**Organisation mobile automatique**). Seule la vue mobile change ; avec plusieurs blocs sélectionnés (`Shift`), utilisez **Réorganiser la sélection**.
3. Déplacez et redimensionnez à la main : l'ordinateur n'est pas touché.
4. Réduisez le titre dans **Style du texte** : **Modifie le mobile uniquement** le confirme.
**Résultat** : par exemple un titre en 64 px sur ordinateur et 32 px sur téléphone, mise en page ordinateur intacte.
Pour aller plus loin : [Barre du haut](https://docs.vivlab.com/editor/toolbar.md), [Panneau de style](https://docs.vivlab.com/editor/style/index.md), [Section](https://docs.vivlab.com/editor/menu/section.md).
## Masquer un élément sur mobile
**Exemple** : une grande illustration qui allonge la page sur téléphone.
1. Sélectionnez l'élément (ou la section).
2. Dans **Visibilité**, choisissez **Ordinateur uniquement**.
**Résultat** : l'élément disparaît du rendu mobile, et de l'aperçu mobile de l'éditeur (retrouvez-le en vue ordinateur) ; les blocs voisins se replacent. **Ordinateur & mobile** le réaffiche. Pour deux versions d'un bloc, dupliquez-le : original en **Ordinateur uniquement**, copie en **Mobile uniquement**.
Pour aller plus loin : [Visibilité](https://docs.vivlab.com/editor/style/display.md).
## Animer un élément
**Exemple** : trois cartes qui apparaissent l'une après l'autre en remontant.
1. Sélectionnez la première carte, rubrique **Animation**, **Animations prédéfinies** > **Fondu vers le haut**.
2. Idem pour les deux autres, avec un **Délai d'apparition** de 150 ms puis 300 ms.
**Résultat** : les cartes apparaissent en cascade en entrant à l'écran. **Réinitialiser les paramètres** retire l'animation. Les sections ne s'animent pas : animez leurs blocs.
Pour aller plus loin : [Animation](https://docs.vivlab.com/editor/style/transition.md), [Texte animé](https://docs.vivlab.com/editor/menu/text-animated.md), [Défilement](https://docs.vivlab.com/editor/menu/marquee.md).
## Modifier le menu ou le pied de page
**Exemple** : un lien « Ateliers » dans le menu et une nouvelle adresse dans le pied de page.
1. Cliquez sur les liens de la barre de navigation : le panneau **Navigation** les liste.
2. Ajoutez un lien, saisissez le **Texte dans la barre de navigation** et choisissez **Page du site** dans **Action lors du clic**. Pour regrouper des liens, ajoutez un **Menu déroulant** (**Éléments**, barre sélectionnée) et remplissez ses **Éléments du menu**.
3. Double-cliquez sur l'adresse du pied de page pour la modifier, puis publiez.
**Résultat** : barre et pied de page, communs à tout le site, changent sur toutes les pages à la prochaine publication d'une page. **Sélectionner un modèle** les remplace par un modèle prêt à l'emploi, en écrasant le contenu après confirmation.
Pour aller plus loin : [Barre de navigation](https://docs.vivlab.com/editor/menu/header.md), [Navigation](https://docs.vivlab.com/editor/menu/navigation.md), [Menu déroulant](https://docs.vivlab.com/editor/menu/menu.md), [Pied de page](https://docs.vivlab.com/editor/menu/footer.md).
## Demander une modification à l'Assistant Vivlab
**Exemple** : « Rends le titre plus percutant et ajoute un bouton de réservation sous le texte. »
1. Sélectionnez les blocs ou la section (sans sélection, l'assistant travaille sur toute la page).
2. Cliquez sur l'icône étoiles **Assistant Vivlab** (en bas à gauche de la canvas, dans la barre d'actions d'un bloc ou d'une section), décrivez la modification et envoyez.
**Résultat** : les changements s'appliquent sur la page ; un seul **Annuler** les retire tous. Rien n'est en ligne avant publication.
Pour aller plus loin : [Zoom et plein écran](https://docs.vivlab.com/editor/zoom.md), [Barre d'actions du bloc](https://docs.vivlab.com/editor/interaction/block-action.md).
## Annuler une erreur
**Exemple** : vous avez supprimé la mauvaise section.
1. Cliquez sur **Annuler** dans la barre du haut, ou `Ctrl+Z` (`Cmd+Z` sur Mac).
2. Trop loin ? **Rétablir** (`Ctrl+Shift+Z`, `Cmd+Shift+Z` sur Mac).
**Résultat** : l'historique couvre toutes les modifications depuis l'ouverture de la page.
::: warning Pas de retour à une ancienne version dans l'éditeur
Chaque publication crée un point de restauration, mais aucun bouton ne permet d'y revenir vous-même. Éditeur fermé et version précédente à retrouver : contactez le [support](https://docs.vivlab.com/sections/supports.md).
:::
Pour aller plus loin : [Barre du haut](https://docs.vivlab.com/editor/toolbar.md), [Raccourcis clavier](https://docs.vivlab.com/editor/shortcuts.md).
## Enregistrer et publier
**Exemple** : votre page d'accueil retouchée doit être visible des clients.
Tout est sauvegardé automatiquement (**Modifications enregistrées**), mais les visiteurs voient la dernière version publiée.
1. Cliquez sur **Actualiser la page**, en haut à droite.
2. Vérifiez l'aperçu ordinateur et mobile, **Continuer**, puis **Publier**.
3. **Visiter la page** pour contrôler la version en ligne.
**Résultat** : la page est en ligne, les moteurs de recherche sont prévenus, un point de restauration est créé et le bouton affiche **Page à jour**. Une page nouvellement créée est masquée : choisissez **Rendre la page visible** à la publication, ou activez-la dans le panneau **Page** (clic dans une zone vide de la canvas).
Pour aller plus loin : [Publier la page](https://docs.vivlab.com/editor/toolbar.md#publier-la-page), [Page](https://docs.vivlab.com/editor/menu/page.md).