Modifier une page avec le Builder

Le Builder est l'éditeur de pages de votre site : vous y voyez la page comme un visiteur la verra et vous la modifiez sur place, sans écrire de code. Cette page montre comment l'ouvrir, lire son écran, changer un texte, une image, un lien ou un bouton, et vérifier le résultat sur ordinateur, tablette et téléphone ; pour les interrupteurs de la boutique, des réservations et des formations, voir Ce que le site propose.

Les captures de Neoffice montrent l'interface Avancé (voir Simple ou Avancé) ; ce réglage ne concerne que le menu de gauche, l'éditeur est le même dans les deux.

Ouvrir une page dans le Builder

Trois chemins mènent au même éditeur.

Depuis l'espace Site web et e-commerce. Dans le menu de gauche, ouvrez Site web et e-commerce, puis l'onglet Pages. Chaque page est une carte : un aperçu, son état (Publiée ou Non publiée), son titre, son adresse (par exemple « /contact ») et le site auquel elle appartient, ou Sur tous les sites. Les pastilles du haut filtrent la liste : Toutes, Publiées, Non publiées, Sur tous les sites, puis une pastille par site, chacune avec son nombre de pages. Grille et Liste changent la présentation.

1. Site web et e-commerce. L'espace, dans le menu de gauche ; l'onglet Pages est celui qui est souligné en haut.
2. Les pastilles de filtre. Elles trient par état ou par site ; le champ de recherche, à droite, retrouve une page par son nom.
3. Une carte de page. L'aperçu (laissé vide sur cette capture), l'état, le titre, l'adresse et le site.
4. Modifier dans le Builder. Ouvre l'éditeur dans le même onglet. Une page publiée porte en plus un lien Voir en ligne, qui l'ouvre telle que la voient les visiteurs ; une page non publiée n'en a pas.

Depuis la liste Applications. Cliquez sur Applications, en haut du menu de gauche (voir Se repérer), puis sur Builder : vous arrivez au tableau de bord du Builder (adresse /builder). Il montre toutes les pages en vignettes, avec un champ Filtrer par titre ou route, un filtre Type, un tri (Dernière création) et trois présentations. Cliquez sur une page pour l'ouvrir. Le menu de gauche propose Toutes les pages, Créer avec l'IA, Thème, Médias et Réglages, puis deux dossiers, Header & Footer et Pages, qui rangent les pages (voir le réglage Dossier dans Créer, régler et publier une page).

1. Le menu du Builder. Les pages, la création avec l'assistante NORA, le thème, les médias, les réglages et les dossiers.
2. Le filtre, le type et le tri. Pour retrouver une page parmi beaucoup ; les trois icônes de droite changent la présentation.
3. Une page. Un clic l'ouvre dans l'éditeur ; les trois points proposent Dupliquer, Voir dans le Desk (la fiche de la page dans la gestion de Neoffice) et Supprimer, et, pour une page publiée, Voir la page et Dépublier.
4. Nouveau. Crée une page (voir Créer, régler et publier une page).

Depuis la page en ligne. Connecté avec un compte d'utilisateur de Neoffice (pas avec un compte de client du site), vous voyez en bas à droite d'une page publiée, sur un écran de 768 pixels de large ou plus, un petit carré au logo du Builder, presque transparent tant que vous ne le survolez pas : un clic ouvre cette page dans l'éditeur.

L'écran de l'éditeur

L'éditeur occupe tout l'écran, sans le menu de Neoffice. Il se lit en cinq zones.

1. La barre du haut. À gauche, le logo ouvre le menu de la page (Retour au tableau de bord, Nouvelle page, Copier la page, Dupliquer la page, Supprimer la page, Basculer le thème, Réglages, Raccourcis, Aide), puis quatre outils : Sélection, Conteneur, Texte et Image. Au centre, le titre et l'adresse de la page : un clic ouvre une petite fenêtre pour changer le Titre de la page et la Route. À droite, la roue Réglages, Aperçu, l'état du site (En ligne, qui concerne tout le site et pas seulement cette page) et Publier.
2. Les icônes de gauche. Sept panneaux : Insérer, Calques, Composants, Code, Tokens de design, Blocs du site et Nora. Passez la souris sur une icône pour lire son nom et son raccourci.
3. Le panneau de gauche. Il montre le panneau choisi ; ouvert sur Calques, il liste les blocs de la page, du haut vers le bas. L'étiquette au-dessus de la liste (Desktop, Tablet ou Mobile) dit quel affichage est actif.
4. La zone de travail. La page dans un cadre Bureau.
5. Le panneau de droite. Les propriétés du bloc sélectionné, avec un champ Rechercher des propriétés. Sans sélection, il dit « Sélectionnez un bloc pour modifier ses propriétés ».

En bas de la zone de travail, un petit bloc donne le zoom (par exemple 40 %) et un bouton ajuste la page à l'écran. Le zoom se règle avec ⌘ + et ⌘ − ; ⌘ 0 revient à 100 % et ⌘ ⇧ 0 ajuste la page à l'écran. ⌘ est la touche Commande d'un Mac ; sous Windows, la même combinaison se fait avec Ctrl. Le menu du logo, puis Raccourcis (ou la touche ?), liste tous les raccourcis clavier ; ⌘ K ouvre la palette de commandes.

L'en-tête et le pied de page du site s'affichent en aperçu autour de la page dans la zone de travail (masqués sur les captures de cette page) : on ne les sélectionne pas comme un bloc de la page. Voir L'en-tête, le pied de page et le thème du site.

Modifier un texte

Un premier clic sur la page sélectionne le bloc qui contient le texte ; un double-clic entre dans le texte lui-même.

1. Sélectionnez le bloc de texte, dans Calques ou sur la page.
2. Dans le panneau de droite, section Typographie, le champ Contenu porte le texte. Remplacez-le puis validez avec Entrée : la page change à ce moment-là.
3. Ou travaillez sur la page : double-cliquez sur le texte (tout le texte se sélectionne), tapez, puis Échap pour terminer. À 40 % de zoom le texte est minuscule : faites ⌘ 0 d'abord.

1. Le bloc dans Calques. Son nom reprend le début du texte, précédé de la balise (« p » pour un paragraphe).
2. Le champ Contenu. Le texte à modifier.
3. Famille, Poids, Taille, Hauteur, Lettre, Transformation, Alignement. La mise en forme.

Un champ qui affiche « unset » n'a pas de valeur propre : le bloc reprend celle du bloc qui le contient ou du thème du site. Laissez-le ainsi ; pour changer les polices de tout le site, passez par le thème.

Pour mettre quelques mots en forme, sélectionnez-les quand vous êtes dans le texte : une petite barre apparaît sous eux. H1, H2 et H3 transforment tout le bloc en titre (un second clic le ramène en paragraphe) ; les autres boutons mettent les mots choisis en gras, en italique, en barré ou en souligné, en font un lien ou changent leur couleur.

Modifier une image

1. Sélectionnez l'image. Une image vide s'affiche en hachures.
2. Dans le panneau de droite, section Options de l'image, cliquez sur le rond du champ URL de l'image : une petite fenêtre Image s'ouvre. Vous pouvez aussi écrire une adresse dans le champ.
3. Cliquez sur Charger pour envoyer un fichier depuis votre ordinateur (le bouton devient Remplacer quand une image est en place).
4. Choisissez comment l'image remplit son cadre : Remplir et recadrer, Ajuster ou Étirer.
5. Remplissez Texte alternatif par une phrase qui décrit l'image.

1. Le champ URL de l'image. Le rond ouvre la fenêtre.
2. Les trois modes. Comment l'image remplit son cadre (le troisième, Étirer, est coupé à l'écran).
3. L'aperçu. Avec Remplir et recadrer, le rond marque le point de l'image à garder dans le cadre quand elle est recadrée, et le curseur en dessous zoome ; la flèche circulaire (Réinitialiser le point focal) remet les deux à zéro.
4. Remplacer. Envoie un autre fichier depuis votre ordinateur (Charger quand aucune image n'est en place).
5. Texte alternatif. Lu par les lecteurs d'écran et par les moteurs de recherche, il remplace l'image quand elle ne s'affiche pas.

Pour ajouter une image neuve, choisissez l'outil Image dans la barre du haut (ou la touche I), puis cliquez dans la page : un bloc image vide apparaît, sur toute la largeur.

Les images PNG et JPEG envoyées par le Builder sont converties en WebP, un format plus léger, et réduites à 2048 pixels au plus sur le grand côté (voir À régler une fois). Pour une image donnée par l'adresse d'un autre site, le panneau propose Servir localement : l'image est copiée sur votre site et ne dépend plus de l'autre.

Modifier un lien ou un bouton

Un bouton est un bloc lien : dans Calques, il montre une icône de chaîne et s'appelle d'abord « button-link ». Il contient un bloc texte, qui porte le mot affiché. N'importe quel bloc peut d'ailleurs devenir un lien, grâce à la section Lien du panneau de droite : un texte devient un lien dès que vous remplissez Lier à.

1. Sélectionnez le bouton : le bloc « button-link », dans Calques.
2. Ouvrez la section Lien : Lier à reçoit l'adresse (« /contact » pour une page du site, ou une adresse complète pour un autre site). Dès qu'il y a une adresse, Ouvre dans apparaît et choisit l'onglet (Même onglet ou Nouvel onglet) ; Suivre les clics compte les clics.
3. Pour changer le mot affiché, dépliez le bouton dans Calques, sélectionnez le texte qu'il contient et modifiez son champ Contenu.

1. Le bouton. Un bloc lien : c'est lui qui porte l'adresse.
2. Son texte. Le bloc texte à l'intérieur : c'est lui qui porte le mot affiché.

1. Lier à. L'adresse de destination.
2. Ouvre dans. Le même onglet ou un nouvel onglet.
3. Suivre les clics. Interrupteur, éteint ici.

Pointez vers une page publiée : un lien vers une page non publiée mène le visiteur sur une page « Page non trouvée ».

Voir la page sur ordinateur, tablette et téléphone

Quatre petites icônes se trouvent en haut à droite du cadre Bureau : le mode sombre de la zone de travail, puis l'ordinateur, la tablette et le téléphone. Un clic sur le téléphone ajoute à côté du cadre Bureau un second cadre Mobile, qui montre la même page en étroit ; la tablette ajoute de la même façon un cadre Tablette.

1. Le cadre Bureau. La page sur grand écran.
2. Les icônes d'affichage. Mode sombre, ordinateur, tablette, téléphone.
3. Le cadre Mobile. La même page, en étroit.
4. L'étiquette du panneau de gauche. L'affichage actif.

Ce qui change selon l'affichage actif : le texte et les liens sont communs, mais la mise en forme (taille, alignement, espacement…) que vous réglez en affichage Mobile ou Tablette ne vaut que pour cet affichage ; le bureau garde ses valeurs. Les champs que vous n'avez pas réglés pour cet affichage montrent en grisé la valeur du bureau. Un clic droit sur le bloc, puis Réinitialiser les surcharges, revient aux valeurs du bureau.

Aperçu (le triangle à droite de la barre du haut, ou ⌘ P) ouvre la page en grand, sans les panneaux : Retour au Builder à gauche, les icônes ordinateur, tablette et téléphone au centre, le mode sombre et Publier à droite. L'aperçu montre la page avec son en-tête et son pied de page, comme les visiteurs la verront.

Copier, dupliquer, supprimer, annuler

Un clic droit sur un bloc, dans Calques, ouvre son menu. Il varie selon le bloc et l'affichage actif ; on y trouve Copier, Copier le style (puis Coller le style sur un autre bloc), Dupliquer, Envelopper dans un conteneur, Répéter le bloc, Enregistrer comme composant, Renommer et Supprimer, et, pour un conteneur, Convertir en collection. Au quotidien, trois suffisent : Dupliquer, Renommer et Supprimer.

1. Le menu du bloc. Un clic droit sur son nom dans Calques.

Au clavier : ⌘ Z annule, ⌘ ⇧ Z rétablit, ⌘ D duplique le bloc, Retour arrière ou Suppr le supprime. Enregistrer comme composant range le bloc parmi les composants de votre site, partagés entre pages : voir Ajouter des blocs, des composants et le formulaire de contact.

Tout s'enregistre tout seul, rien ne se publie tout seul

Il n'y a pas de bouton Enregistrer : chaque changement est gardé dans un brouillon une fraction de seconde après vous, que vous retrouvez en rouvrant la page. Les visiteurs ne voient rien tant que vous n'avez pas cliqué sur Publier ou, pour une page déjà en ligne, sur Publier les modifications. Voir Créer, régler et publier une page.

À régler une fois

• Modifier une page demande le rôle Responsable du Site Web ou Responsable Système. Sans l'un des deux, le Builder répond « Non autorisé » (essayé avec un compte du bureau sans ce rôle et avec un compte du portail). Le rôle Administrateur seul ne suffit pas : d'après les droits de la page, il donne la lecture, pas la modification. Donnez le rôle aux personnes qui tiennent le site, pas à toute l'équipe.
• Les images envoyées depuis le Builder sont des fichiers publics : toute personne qui en connaît l'adresse peut les ouvrir, et l'original PNG ou JPEG reste lui aussi disponible à son adresse après la conversion en WebP. N'y mettez rien de confidentiel.
• L'interrupteur Convertir automatiquement les images en WebP est dans Réglages, rubrique Global, Général : il vaut pour toutes les pages. Laissez-le allumé pour des pages plus légères, ou éteignez-le si vous tenez à publier vos fichiers tels quels.

Au quotidien

• Le geste de tous les jours : Pages, Modifier dans le Builder, corriger le texte, contrôler en Aperçu, puis Publier les modifications.
• Pour vous exercer, créez une page que vous ne publiez pas : un brouillon n'est pas visible des visiteurs, son adresse leur répond « Page non trouvée ».
• Un bloc neuf arrive avec un texte d'exemple en anglais (« Text » pour un texte, « Button » pour un bouton) : remplacez-le avant de publier, il s'afficherait tel quel sur le site.
• Si votre clic ne tombe pas sur le bon texte, descendez par Calques ou doublez le clic.
• Travaillez à une seule personne sur une page : quand une autre personne ouvre la même page, son initiale s'affiche en haut à droite, et si elle enregistre avant vous, l'éditeur annonce « Cette page a été modifiée ailleurs — rechargement en cours » : votre dernière modification n'est pas gardée.
• L'entrée Aide du menu du logo ouvre un groupe de discussion public hébergé par un service tiers (Telegram), qui n'a rien à voir avec l'assistance de Neoffice : pour une question sur votre site, passez par l'assistance de Neoffice.

Voir aussi

• Ce que le site propose
• Créer, régler et publier une page
• Ajouter des blocs, des composants et le formulaire de contact
• L'en-tête, le pied de page et le thème du site