Ajouter des blocs, des composants et le formulaire de contact
Une page se construit en blocs empilés : sections, textes, images, boutons. Le Builder en propose de prêts à l'emploi, garde les vôtres pour les réutiliser, et offre des blocs qui affichent les données de l'entreprise : formulaire de contact, horaires, adresse, équipe. Cette page dit où les trouver, comment les poser et comment régler le formulaire de contact ; pour changer le texte ou l'image d'un bloc, voir Modifier une page avec le Builder.
Repérer les blocs d'une page : Calques
Cliquez sur l'icône Calques du panneau de gauche (⌘ ⇧ L). Le panneau liste la structure de la page : body en haut, puis les blocs dans l'ordre où le visiteur les lit, chacun avec une icône qui dit sa nature. Une flèche déplie un bloc qui en contient d'autres. Un clic sélectionne un bloc : il s'encadre sur la page et ses propriétés s'affichent à droite. Le clic droit sur un bloc ouvre son menu (copier, dupliquer, renommer, supprimer) : il est décrit dans Modifier une page avec le Builder.
- Les icônes de gauche. La deuxième, Calques, ouvre le panneau de la structure de la page.
- La liste des blocs. Du haut vers le bas de la page, chaque bloc avec son nom.
- Un bloc sélectionné. Il s'encadre aussi sur la page.
- Le panneau de droite. Les propriétés du bloc : Lien, Disposition, Typographie, Style, puis d'autres sections selon la nature du bloc.
Ajouter un bloc prêt à l'emploi : Insérer
- Cliquez sur l'icône Insérer, le plus (⌘ ⇧ I).
- Tapez un mot dans Rechercher un modèle, ou parcourez les rubriques : Structure, Basique, Typographie, Médias et Avancé. Votre site peut en avoir d'autres, rangées au-dessus (des sections toutes faites). Chaque carte montre un aperçu.
- Faites glisser la carte sur la page. Un cadre bleu entoure la zone qui l'accueillera et un trait pointillé marque l'endroit exact.
- Le bloc apparaît, sélectionné. Remplacez ses textes, ses images et ses liens.
- Les icônes de gauche. La première, le plus, ouvre Insérer.
- La recherche. Un mot suffit pour filtrer.
- Les rubriques. Un titre par famille de blocs.
- Une carte. Le bloc à faire glisser sur la page.
Les noms des blocs de base sont en anglais (Button, Theme Switcher, Heading, Paragraph, Text Link, Blockquote, Video, YouTube, Embed). Chaque bloc arrive avec un texte d'exemple, en anglais ou en latin (« Heading », « Hi, click me », « Lorem ipsum… »).
L'en-tête et le pied de page viennent du thème du site, et la zone de travail les montre déjà : une barre de navigation ou un pied de page pris dans les rubriques se poserait en plus des vôtres, donc en double.
Les outils Conteneur, Texte et Image de la barre du haut posent un bloc du même genre : choisissez l'outil, puis cliquez dans la page. Un texte arrive avec le mot d'exemple « Text ».
Réutiliser un bloc : les composants
L'icône Composants (⌘ ⇧ A) liste les composants que vous pouvez poser sur cette page : des blocs que vous avez dessinés une fois et que vous voulez retrouver tels quels. Faites glisser un composant de la liste sur la page pour le poser ; passez la souris sur sa ligne pour faire apparaître la corbeille, qui le supprime après confirmation. Un composant utilisé par la page ouverte ne peut pas être supprimé.
Pour en créer un, faites un clic droit sur un bloc, dans Calques, puis Enregistrer comme composant.
- Nom du composant. Obligatoire : c'est le nom que vous retrouverez dans la liste Composants et dans Calques.
- Composant global. Décochée, le composant n'est proposé que sur la page où vous le créez. Cochée, il est proposé sur toutes les pages du site.
- Enregistrer. Crée le composant et remplace le bloc par un exemplaire du composant.
Dans Calques, un exemplaire de composant se reconnaît à son icône et à son nom en violet.
Modifier un composant
Un clic droit sur l'exemplaire, puis Modifier le composant. Une barre en haut de la zone de travail donne le nom du composant et sa portée (« utilisé dans 1 page »). Modifiez le bloc, puis cliquez sur Enregistrer le composant.
Les pages qui l'utilisent ne changent pas toutes seules : chaque exemplaire garde la version du composant qu'il avait au moment où vous l'avez posé. Quand une page porte des exemplaires périmés, l'éditeur affiche une icône de mise à jour à gauche de la roue Réglages, avec le nombre de composants concernés.
- L'icône de mise à jour. Elle n'apparaît que lorsqu'un composant de la page a changé.
- Mises à jour du composant. Le panneau liste les composants à mettre à jour et le nombre d'exemplaires de chacun.
- Tout mettre à jour. Met à jour tous les exemplaires de la page ouverte.
- Mettre à jour. Met à jour les exemplaires d'un seul composant.
Au moment où vous enregistrez un composant, un message propose aussi Synchroniser sur toutes les pages : cette action réécrit d'un coup toutes les pages qui l'utilisent, brouillon et version publiée.
Les composants sont aussi listés, avec les modèles de blocs, les scripts et les polices, dans l'onglet Paramètres de l'espace Site web et e-commerce, rubrique Builder : entrée Composant Builder (« Composants réutilisés d'une page à l'autre »). Voir Ce que le site propose pour le tour de l'espace.
Les blocs du site : les données de l'entreprise
L'icône Blocs du site (⌘ ⇧ B) ouvre une liste dont l'en-tête dit : « Des blocs qui affichent les données du site. Choisissez-en un, réglez ce qu'il lui faut, il se pose sur la page. » Ces blocs sont fournis par Neoffice et ne sont pas des composants : ils lisent les données de votre site au lieu de les recopier dans la page, de sorte que, par exemple, quand les horaires changent, le bloc suit.
- L'icône Blocs du site. Ouvre la liste.
- L'en-tête du panneau. Dit comment s'en servir.
- Un bloc et sa description. Un clic le déplie.
| Bloc | Ce qu'il montre | Ce qu'il lui faut |
|---|---|---|
| Articles de blog | Les articles publiés du blog, en liste, chacun avec son lien. | Au moins trois articles de blog publiés. |
| Carte de l'adresse | Une carte de l'adresse de l'entreprise. | Une adresse connue du site. |
| Coordonnées | Le nom, le téléphone et l'e-mail de la société, tels que sa fiche les porte. L'adresse n'y est pas dessinée, malgré la description du panneau : posez Carte de l'adresse pour elle. | Une adresse connue du site. |
| Formulaire de contact | Un formulaire de contact qui fonctionne, dont les messages vont à la boîte du site (voir plus bas). | Rien : il est toujours proposé. |
| La chronologie de l'entreprise | Les étapes de l'histoire de l'entreprise, avec leur année. | Des lignes dans Paramétrages À Propos, table Histoire Org. |
| L'équipe | Les membres de l'équipe, avec leur nom et leur biographie. | Des lignes dans Paramétrages À Propos, table Membres de l'Équipe. |
| Carrousel de produits | Une rangée défilante de produits publiés de la boutique, avec photos, prix et liens. | Au moins trois des huit derniers articles publiés avec une photo. |
| Carrousel des marques | Les marques que la boutique propose, avec leur logo. | Au moins une marque affichée par le site, avec un logo. |
| Horaires d'ouverture | Les horaires de la boutique, en direct, jours fériés compris. | Des horaires saisis dans Paramètres de la boutique, onglet Boutique, section Horaires d'ouverture. |
Paramétrages À Propos se trouve dans l'onglet Paramètres de l'espace Site web et e-commerce, rubrique Contenu et moteurs de recherche.
Un bloc dont la condition n'est pas remplie porte l'étiquette « rien à afficher pour l'instant » dans la liste ; sur le site en ligne, il est simplement absent.
Pour en poser un : cliquez sur le bloc, réglez ses options s'il en a, puis cliquez sur Ajouter à la page. Un message confirme, par exemple « Formulaire de contact ajouté à la page. ». Le bloc se pose à la fin de la page, sous ceux qui y sont déjà.
Les options portent leur nom technique, en anglais (carousel_limit, blog_limit…), suivi d'une explication en français. Une option laissée vide garde sa valeur par défaut.
Dans la zone de travail, ces blocs ne se dessinent pas : elle les laisse vides. Contrôlez-les avec Aperçu, le triangle en haut à droite de l'éditeur. Dans Calques, un bloc du site porte comme nom le début de sa ligne technique (div | {% include …) : renommez-le avec le clic droit pour le retrouver.
Le formulaire de contact
Cliquez sur Formulaire de contact : la carte se déplie avec quatre options, puis Ajouter à la page. Le panneau précise : « N'ajoutez pas de