Gestion du Layout

Le layout est le squelette HTML commun à toutes les pages publiques de ton site. C'est lui qui définit le logo affiché en haut, le menu de navigation, les boutons d'appel à l'action, le pied de page, les mentions légales, et le branding général. Bien configuré, il garantit une cohérence visuelle parfaite sur l'ensemble du site.

À quoi sert le layout ?

Imagine ton site comme un classeur. Chaque page (accueil, services, contact, articles de blog, pages cocon SEO) est une feuille à l'intérieur. Le layout, lui, est la couverture du classeur : il apparaît partout, sur toutes les feuilles, sans que tu aies besoin de le redessiner à chaque fois.

Concrètement, un layout contient trois zones :

• Le header en haut : logo cliquable qui renvoie à l'accueil, menu principal, éventuellement un bouton CTA (« Devis gratuit », « Réserver », etc.) ou un numéro de téléphone.
• La zone <main data-cms-slot="content"> au centre : c'est le « trou » où chaque page injecte son propre contenu. Le layout ne touche jamais à cette partie.
• Le footer en bas : copyright, mentions légales, liens secondaires, réseaux sociaux, coordonnées.

Tout changement effectué dans le layout (par exemple remplacer le logo ou ajouter une entrée au menu) se répercute automatiquement sur toutes les pages publiées du site, sans toucher à leur contenu.

Workflow complet en 4 étapes

Voici la marche à suivre standard pour configurer ou remplacer le layout actif.

1. Uploader un fichier layout HTML.
   Ouvre Configuration → Layout global dans la sidebar. Clique sur le bouton orange « Uploader un layout » en haut à droite. Sélectionne un fichier .html préparé en amont (par toi, ton développeur, ou ton agence). Le fichier doit obligatoirement contenir un emplacement <main data-cms-slot="content"></main> où les pages seront injectées.
2. Activer le layout uploadé.
   Dans la liste des layouts, repère ton fichier fraîchement ajouté. Clique sur l'action « Activer ». Un badge vert « Actif » apparaît à côté de son nom. À partir de cet instant, tout le site public utilisera ce squelette.
3. Remplir les champs détectés.
   Va dans Configuration → Header puis Configuration → Footer. Le CMS a automatiquement scanné ton fichier et listé tous les emplacements data-cms="…" qu'il a trouvés. Ces champs sont regroupés en sections logiques : Branding, Header, Footer, UI, Site. Renseigne chaque champ avec ton contenu réel : logo, nom de l'entreprise, libellés du menu, copyright, etc.
4. Lancer un Build pour publier.
   Tant que tu n'as pas cliqué sur Build du site (sidebar → Configuration → Build), les visiteurs voient encore l'ancienne version. Le build compile toutes les pages avec le nouveau layout et publie le résultat dans le dossier public. Compte généralement entre 5 et 30 secondes selon la taille du site.

Comprendre les annotations data-cms

Pour que le CMS sache quels éléments du HTML tu veux pouvoir éditer, ton fichier layout doit utiliser des attributs data-cms. Chaque attribut transforme une zone du HTML en champ éditable dans l'interface d'administration.

Exemples concrets que ton développeur ou ton agence va placer :

Tu n'as pas besoin de connaître le HTML pour utiliser le CMS au quotidien. Mais comprendre cette logique t'aide à dialoguer avec ton développeur si tu veux ajouter ou modifier un champ.

Les différents types de champs

Selon la manière dont le champ est annoté dans le HTML, l'interface d'édition propose un éditeur adapté.

1. Texte simple.
   Une zone de saisie classique pour un libellé court : titre du menu, copyright, slogan, numéro de téléphone, adresse postale. Ce qui est tapé remplace directement le contenu de la balise HTML correspondante.
2. Image.
   Un sélecteur visuel qui ouvre la médiathèque du CMS. Tu peux uploader une nouvelle image ou choisir une existante. Idéal pour le logo, le favicon (qui est cropé automatiquement en 512×512 WebP), une bannière footer, ou un picto.
3. Lien.
   Deux champs combinés : un libellé visible (« Contactez-nous », « Voir nos services ») et une URL. Pour l'URL, tu disposes d'un sélecteur intelligent : choisis une page interne du CMS dans une liste déroulante, sélectionne un article de blog, ou colle une URL externe.
4. Liste.
   Certaines structures (menu principal, liens du footer) sont éditées directement dans le HTML, car elles peuvent contenir des sous-menus ou des structures complexes. C'est typiquement le cas que tu confies à ton développeur lors de la mise en place initiale.

Sections de l'interface : où trouver quoi ?

L'interface d'administration regroupe les champs détectés en cinq grandes catégories, dans Configuration → Header et Configuration → Footer.

Cette organisation par section te permet de retrouver rapidement le champ à modifier sans devoir scroller dans une liste interminable.

Cacher automatiquement les sections vides

Un détail utile : tu peux ajouter l'attribut data-hide-if-empty sur n'importe quel bloc de ton layout. Si le champ associé n'est pas renseigné dans l'admin, le bloc disparaîtra automatiquement du rendu public, plutôt que de laisser un trou ou une zone vide à l'écran.

Cas d'usage typiques :

• Une bandeau d'alerte en haut du site, qui ne s'affiche que pendant les périodes de promo.
• Un bloc « Adresse postale » dans le footer, masqué tant que tu n'as pas saisi l'adresse.
• Un bouton « Prendre rendez-vous » qui n'apparaît que si l'URL est définie.

Changer de layout

Tu peux uploader plusieurs layouts différents et basculer de l'un à l'autre en un clic. C'est pratique pour :

• Tester une refonte graphique sans perdre l'ancien layout.
• Garder une version « événementielle » (Noël, soldes, anniversaire) que tu peux ré-activer ponctuellement.
• Comparer deux propositions de ton agence avant de trancher.

Pour changer, retourne dans Configuration → Layout global, repère le layout désiré et clique sur « Activer ». Le layout précédemment actif perd son badge vert. Important : il faut ensuite relancer un Build pour que le changement soit publié sur le site.

Modifier la structure du layout

Si tu veux changer la structure du layout (déplacer le menu, ajouter une colonne au footer, modifier l'ordre des éléments du header), il faut modifier le fichier HTML lui-même. Deux options :

1. Ré-uploader un fichier modifié. Demande à ton développeur de t'envoyer la nouvelle version du .html, ré-upload-le, active-le, relance un Build. Les champs détectés sont mis à jour automatiquement (les nouveaux apparaissent vides, les anciens conservent leurs valeurs si les clés data-cms sont restées identiques).
2. Modifier directement sur le serveur. Si tu as un accès SFTP ou si ton développeur préfère travailler côté serveur, le fichier peut être édité directement dans le dossier des layouts. Un rechargement de la liste dans l'admin suffit à le redétecter.

Pour des changements de contenu en revanche (textes, images, URLs), tu n'as jamais à toucher au HTML : tout passe par l'interface d'admin.

Bonnes pratiques

• Un seul layout actif à la fois. Évite de jongler en permanence : prends le temps de bien configurer celui que tu utilises.
• Toujours prévisualiser avant de builder. Ouvre une page du site en preview (icône œil sur une page) pour vérifier le rendu avec le nouveau layout.
• Nommer les fichiers clairement. Plutôt que layout-2.html, préfère layout-2026-refonte.html ou layout-noel.html.
• Garder une copie de sauvegarde. Avant d'écraser un layout fonctionnel, télécharge l'ancien fichier depuis l'admin (action « Télécharger » sur la ligne du layout).
• Tester sur mobile. Le layout est responsive par construction (s'il est bien fait), mais vérifie systématiquement le rendu sur smartphone après chaque modification importante.

Pièges courants à éviter

Qui fait quoi ?

Pour clarifier les responsabilités selon les rôles dans le CMS :

Les rôles Client n'ont volontairement pas accès au layout : c'est une zone sensible qui impacte tout le site. Les modifications de contenu page par page restent évidemment de leur ressort.

Pour aller plus loin

Une fois ton layout en place, tu peux passer à la création de pages individuelles, qui viendront s'injecter dans le slot content. Consulte la page Création d'une page pour la suite logique du parcours, ou la documentation technique si tu veux comprendre en profondeur comment le système de layout fonctionne côté serveur.