Builder visuel

À retenir. Le builder modifie le contenu et le style des éléments existants. Il ne crée pas de nouveaux blocs. Pour ajouter une section entière, il faut passer par le template HTML de la page (voir la page Création d'une page).

Ouvrir le builder sur une page

Le builder est accessible depuis toutes les listes de contenu : Pages, Cocon SEO et Blog. La marche à suivre est toujours la même.

1. Dans le menu de gauche, ouvrez la rubrique Pages (ou Cocon, ou Blog).
2. Repérez la page que vous voulez modifier dans la liste.
3. Cliquez sur le bouton « Builder » qui apparaît au survol de la ligne (icône en forme de pinceau).
4. Une fenêtre plein écran s'ouvre : à gauche l'aperçu de votre page, à droite une barre latérale vide pour l'instant.

Au premier chargement, le builder analyse votre page et identifie tous les éléments éditables. Ils restent invisibles tant que vous n'avez pas cliqué dessus : aucune surcharge visuelle, vous voyez votre page exactement comme un visiteur.

Sélectionner un élément à modifier

Pour modifier quoi que ce soit, il suffit de cliquer dessus directement dans l'aperçu. Au survol, un cadre orange apparaît autour de l'élément, accompagné d'une petite étiquette qui indique son type (« Titre », « Image », « Bouton », etc.). Cela vous évite de cliquer au mauvais endroit.

Les éléments éditables couvrent l'essentiel de ce que contient une page :

• Textes : paragraphes, titres (h1 à h6), listes, légendes.
• Images : photos, illustrations, logos.
• Vidéos : lecteurs embarqués (YouTube, Vimeo) ou fichiers mp4/webm.
• Boutons : appels à l'action (CTA) avec texte et lien.
• Liens : ancres simples dans un paragraphe.

Dès le clic, la sidebar de droite se remplit avec les options spécifiques à l'élément sélectionné. Elle est organisée en trois onglets que nous détaillons plus bas : Contenu, Style et Avancé.

Onglet « Contenu » : changer ce qui s'affiche

C'est l'onglet par défaut, celui que vous utiliserez le plus souvent. Son contenu s'adapte au type d'élément sélectionné.

Pour un texte

Un éditeur WYSIWYG inline apparaît. Vous tapez directement votre nouveau texte. Une mini barre d'outils flottante propose les options de mise en forme suivantes :

• Gras et italique sur la sélection.
• Création d'un lien : vous surlignez les mots à transformer en lien, vous cliquez sur l'icône chaîne, puis vous collez l'URL.
• Suppression d'un lien existant : même bouton, qui agit en bascule.

Aucun risque de « casser » le code : le builder filtre automatiquement les balises non autorisées si vous collez du contenu depuis Word ou un autre site.

Pour une image

Deux choix s'offrent à vous :

1. Choisir depuis la médiathèque : un bouton ouvre la bibliothèque des images déjà uploadées. Vous filtrez par mois, recherche ou cliquez directement sur la vignette voulue.
2. Téléverser un nouveau fichier : glissez-déposez une image depuis votre ordinateur. Elle est automatiquement convertie en WebP si l'extension correspondante est active (gain de poids pour le visiteur).

Vous pouvez également renseigner le texte alternatif (alt) de l'image. Ce champ est très important pour le référencement et pour l'accessibilité : décrivez en une phrase ce que l'on voit sur la photo.

Pour une vidéo

Trois sources sont acceptées :

• Embed YouTube ou Vimeo : collez simplement l'URL de la vidéo, le builder reconnaît l'origine et génère le lecteur.
• Fichier vidéo uploadé (mp4 ou webm) : depuis la médiathèque, comme pour les images.
• URL externe : tout fichier vidéo accessible publiquement sur le web.

Pour un bouton ou un lien

Vous éditez deux champs séparés : le libellé (le texte visible) et la destination (l'URL). Pour un lien interne au site, écrivez simplement le chemin : /contact, /blog/mon-article. Pour un lien externe, collez l'URL complète commençant par https://.

Onglet « Style » : changer l'apparence

L'onglet Style propose un jeu d'options sûres : vous ne pouvez pas casser la mise en page globale, car les modifications sont scopées à l'élément cliqué. Voici les principales options disponibles.

Option	Effet	Disponible sur
Couleur de texte	Choisit la teinte du texte parmi la palette du site	Textes, titres, boutons
Alignement	Gauche, centré, droite, justifié	Textes, titres
Gras / Italique	Bascule la graisse ou l'italique sur l'ensemble du bloc	Textes, titres
Taille	Petit, normal, grand, très grand (échelle relative)	Textes, titres
Couleur de fond	Modifie le fond d'un bouton ou d'un encart	Boutons, blocs colorés
Padding	Ajuste l'espace intérieur (compact, normal, aéré)	Boutons, blocs

Onglet « Avancé » : changer la balise HTML

Cet onglet est réservé aux cas particuliers. Il permet de transformer la balise HTML d'un élément sans toucher au reste. Exemples concrets :

• Vous avez deux h2 dans la même section et vous voulez que le second devienne un h3 pour respecter la hiérarchie SEO.
• Un texte qui devait être un titre a été codé comme paragraphe : vous passez ce p en h2.
• Vous voulez transformer un p en span pour qu'il s'affiche en ligne avec le texte suivant.

Le menu déroulant affiche uniquement les balises compatibles. Aucune transformation dangereuse n'est proposée. Si vous n'êtes pas certain, ne touchez pas à cet onglet : les choix par défaut sont presque toujours les bons.

Sauvegarder vos modifications

Chaque modification que vous faites est conservée en mémoire immédiatement et visible dans l'aperçu. Tant qu'elle n'a pas été enregistrée dans la base de données, un badge orange « Modifié » s'affiche à côté du titre de la page dans la sidebar.

1. Vérifiez vos changements dans l'aperçu.
2. Cliquez sur le bouton « Enregistrer » en haut à droite de la sidebar (ou utilisez le raccourci clavier Cmd / Ctrl + S).
3. Le badge « Modifié » disparaît et un message de confirmation s'affiche brièvement.

Tant que vous n'avez pas relancé un build du site, vos modifications ne sont visibles que dans le builder et dans l'aperçu admin. Le site public continue d'afficher l'ancienne version. Pour publier, ouvrez la rubrique Publication.

Raccourcis clavier utiles

Raccourci	Action
Cmd / Ctrl + S	Enregistrer toutes les modifications en cours
Esc	Fermer la sidebar contextuelle (revenir à l'aperçu vierge)
Cmd / Ctrl + Z	Annuler la dernière modification textuelle dans l'éditeur WYSIWYG

Aperçu en temps réel

L'aperçu se met à jour au fur et à mesure de vos modifications, sans rechargement de page. Vous changez la couleur d'un titre : il change immédiatement. Vous remplacez une image : la nouvelle s'affiche sans clignotement.

Techniquement, l'aperçu est une iframe qui communique avec la sidebar par messages. C'est invisible pour vous, mais cela explique pourquoi tout est si fluide. Si vous voulez en savoir plus sur le fonctionnement interne, consultez la documentation technique du builder.

Ce que le builder ne fait pas

Pour rester sûr d'usage, le builder s'interdit volontairement certaines actions. Si vous avez besoin de l'une de ces opérations, il faut passer par d'autres outils du CMS.

Vous voulez…	Où aller
Ajouter une nouvelle section à la page	Modifier le template HTML de la page (rubrique Pages, action « Remplacer le template »).
Supprimer un bloc existant	Idem : passer par le template HTML.
Réorganiser l'ordre des sections	Idem : réordonner dans le HTML.
Changer la structure d'une grille	Modifier le template (HTML + classes Tailwind).
Modifier le header ou le footer global	Aller dans la rubrique Gestion du Layout.

Cette limite est une protection. Elle garantit que vous ne pouvez pas, par mégarde, casser la mise en page d'une dizaine de pages d'un coup. Les modifications structurelles passent toujours par un humain qui contrôle le HTML.

Le builder sur les pages cocon

Le builder fonctionne aussi sur les pages parent et enfant du Cocon SEO. La seule différence : les pages cocon partagent un template commun. Vos modifications sont enregistrées dans les overrides spécifiques à la page que vous éditez, et n'affectent pas les autres pages du cocon.

Exemple : vous avez généré 24 pages combinant 4 services × 6 villes. Vous ouvrez le builder sur la page « Plombier · Lyon » et vous changez son titre. Seule cette page est affectée. Les 23 autres conservent leur titre généré par l'IA.

Que se passe-t-il en cas de conflit ?

Si deux personnes ouvrent le builder sur la même page en même temps et enregistrent toutes les deux, un message d'avertissement s'affiche pour le second à enregistrer : « La page a été modifiée par quelqu'un d'autre depuis votre dernière ouverture. »

Trois choix vous sont alors proposés :

1. Annuler : vous fermez le builder sans enregistrer, vos modifications sont perdues.
2. Recharger : vous récupérez la version la plus récente, vous réappliquez vos changements.
3. Forcer l'enregistrement : vous écrasez les modifications de l'autre personne (à éviter sauf si vous êtes certain).

Pour limiter ces situations, prévenez vos collègues quand vous travaillez sur une page importante. Les équipes agences travaillent souvent par créneau : « ce matin je m'occupe de la home, cet après-midi tu prendras le blog ».

Dépannage rapide

Symptôme	Cause probable	Solution
Le cadre orange ne s'affiche pas au survol	L'élément n'est pas marqué comme éditable dans le template	Demander à un webmaster d'ajouter l'attribut data-cms sur la balise
La sidebar ne se met pas à jour	Une extension a bloqué la communication	Désactiver temporairement les extensions personnalisées
Image trop lourde, upload refusé	Limite serveur dépassée (10 Mo par défaut)	Compresser l'image avant upload (TinyPNG, Squoosh)
Le badge « Modifié » reste affiché après Enregistrer	Erreur réseau pendant la sauvegarde	Rejouer Cmd+S, vérifier la connexion
Les modifications ne sont pas visibles sur le site public	Build pas relancé	Aller dans Publication et lancer un build