É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
Un titre ou une police à changer	Modifier un texte et sa police
Un bloc de présentation ou de témoignages	Ajouter une section
Un bouton vers une page ou une fenêtre	Ajouter un bouton vers une page ou un pop-up
Une photo ou toute une série	Ajouter une image ou une galerie
Les visiteurs doivent vous écrire	Ajouter un formulaire de contact
Mettre en avant des articles de la boutique	Montrer des produits en vente
Sur téléphone, des blocs débordent	Soigner la version mobile
Un élément encombre le petit écran	Masquer un élément sur mobile
Faire apparaître un bloc avec un effet	Animer un élément
Changer 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
Un bloc supprimé ou déplacé par erreur	Annuler une erreur
Les changements n'apparaissent pas sur le site	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, Logo, couleurs et polices.

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, Style du texte, Texte.

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

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, Pop-up dans l'éditeur, Pop-up.

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, Galerie, Carrousel.

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

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, Catalogue de produits.

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, Panneau de style, Section.

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é.

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, Texte animé, Défilement.

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, Navigation, Menu déroulant, Pied de page.

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, Barre d'actions du bloc.

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.

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.

Pour aller plus loin : Barre du haut, Raccourcis clavier.

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