Éditer les textes (slots)
✍️ Chapitre 10 — Éditer les textes (slots)
Modifier un texte sur votre site est l'opération la plus fréquente. Ce chapitre vous montre les trois façons de le faire et tous les types de champs que vous rencontrerez.
🖱️ Méthode 1 — Click-to-edit depuis l'aperçu
C'est la façon la plus rapide et la plus intuitive.
- Ouvrez la page que vous voulez modifier (clic dans la colonne de gauche).
- Dans l'aperçu central, survolez avec la souris : les zones éditables sont entourées d'un cadre orange en pointillés.
- Cliquez sur le texte à modifier.
- L'inspecteur s'ouvre à droite avec un champ pré-rempli.
- Modifiez le texte. L'auto-save s'active 500 ms après votre dernière frappe.
- L'aperçu se met à jour en direct.
✅ Vous voyez « Enregistré » à côté du champ ? C'est sauvegardé en brouillon. Pour rendre la modification publique, cliquez sur « Publier les modifications » en haut à droite.
📋 Méthode 2 — Liste « Contenu de la page »
Utile quand un slot n'est pas cliquable directement (image cachée, valeur dans un attribut, etc.).
- Ouvrez la page.
- Sans cliquer sur l'aperçu, regardez la colonne de droite.
- Vous voyez la liste « Contenu de la page » qui répertorie tous les emplacements éditables.
- Chaque ligne affiche : un icône (selon le type), le libellé, un aperçu de la valeur, un badge orange si modifications en brouillon.
- Cliquez sur une ligne pour ouvrir le formulaire d'édition.
💡 Astuce — Les slots sont groupés par section (« hero », « footer », « cta », …) selon le code couleur défini par votre développeur. C'est plus rapide pour s'y retrouver sur une page longue.
🌳 Méthode 3 — Navigation par sections
Pour les pages très longues, vous pouvez utiliser la barre de défilement de l'aperçu pour atteindre la section qui vous intéresse, puis cliquer dessus.
📐 Les types de champs que vous rencontrerez
Le développeur a choisi un type pour chaque slot. Ce type détermine l'apparence du formulaire d'édition. Voici tous les types possibles :
📝 Texte court (text)
Un champ d'une ligne, pour titres, libellés, noms.
- Pas de mise en forme.
- Une longueur maximale peut être imposée (compteur affiché).
- Idéal pour : titre principal, sous-titre, libellé de bouton.
📄 Texte long (textarea)
Un champ multi-lignes, sans mise en forme.
- Saut de ligne autorisé.
- Les
<br>sont insérés automatiquement. - Idéal pour : un paragraphe court, une description simple.
🎨 Texte riche (richtext)
Un éditeur WYSIWYG complet (CKEditor) avec barre d'outils.
Outil | Effet |
|---|---|
Format | Paragraphe, Titre 2, Titre 3, Titre 4, Code |
Style | Gras, italique, souligné, barré |
Couleur | Couleur de texte + couleur de fond (palette de la marque) |
Alignement | Gauche, centre, droite, justifié |
Listes | Listes à puces, listes numérotées, indentation |
Liens | Insérer / supprimer un lien |
Insérer un média | Ouvre la bibliothèque pour insérer une image au curseur |
⚠️ Pas de bouton « source » — Vous ne pouvez pas voir ni modifier le HTML brut, c'est volontaire (voir Chapitre 3).
🖼️ Image (image)
Un champ avec input texte + bouton picker média + bouton retirer + vignette.
- Cliquez sur le bouton « Choisir une image » (icône image).
- La bibliothèque média s'ouvre dans une modale.
- Sélectionnez une image existante ou uploadez-en une nouvelle.
- L'image est insérée et la vignette apparaît.
💡 Astuce — Vous pouvez aussi glisser-déposer une image depuis la sidebar Médias directement sur la zone d'image dans l'aperçu central.
🔗 URL (url)
Un champ texte spécialement formatté pour les liens. Mêmes outils que pour les images (picker pour insérer un média comme cible, par exemple).
⭐ Icône (icon)
Un champ pour choisir une icône FontAwesome.
- Saisissez le nom de la classe FontAwesome (ex.
fa-solid fa-star) ou - Cliquez sur une des 20 icônes rapides affichées (étoile, cœur, fusée, …).
- Sélectionnez la couleur dans le color picker.
- Un aperçu en direct s'affiche.
🎨 Couleur (color)
Un color picker HTML5 + un champ hexadécimal texte.
- Format strict
#RRGGBBou#RRGGBBAA(avec transparence). - Bouton « Défaut » pour revenir à la valeur initiale.
- Une couleur n'est pas traduisible (elle reste la même dans toutes les langues).
🔢 Nombre (number)
Un champ numérique simple avec validation.
☑️ Booléen (bool)
Une case à cocher Oui / Non.
📋 Liste déroulante (select)
Un dropdown avec des options définies par votre développeur.
🌍 Le panneau d'édition multi-langues
Pour les slots de type texte (text, textarea, richtext), l'inspecteur affiche trois zones distinctes :
Zone | Contenu |
|---|---|
1️⃣ Champ principal | La langue actuellement affichée dans l'aperçu (drapeau actif). C'est ici que vous tapez 90 % du temps. |
2️⃣ Autres langues (repliable) | Un champ par locale supportée. Cliquez sur la flèche pour déplier, saisissez les traductions. |
3️⃣ Options avancées (repliable, ⚙️) | La valeur canonique partagée entre toutes les langues. À ne toucher que si vous savez ce que vous faites. |
ℹ️ Comprendre la résolution — Au rendu public, le module cherche la valeur dans cet ordre : (1) override de la langue visiteur, (2) valeur canonique, (3) valeur par défaut du slot. Le visiteur voit toujours quelque chose, même si une traduction manque.
Pour les slots non-texte (image, couleur, icône, …), il n'y a qu'une seule zone « Valeur (toutes langues) ». Une image se traduit rarement.
💾 L'auto-save en pratique
Vous n'avez aucun bouton « Enregistrer » à cliquer. Le module sauvegarde automatiquement :
- Vous tapez une lettre.
- Le module attend 500 ms de pause.
- L'indicateur passe à « Enregistrement... ».
- Le serveur reçoit la valeur et l'enregistre comme brouillon.
- L'indicateur passe à « Enregistré » en vert.
💡 Astuce — Si vous voyez l'indicateur « Erreur réseau », votre connexion a probablement été interrompue. Faites Ctrl+Z pour récupérer votre saisie, attendez le retour de la connexion, puis re-tapez.
🔙 Annuler une modification non publiée
Tant que vous n'avez pas publié, vous pouvez revenir en arrière de plusieurs façons :
- Annulation locale — Ctrl+Z dans le champ pour revenir frappe par frappe.
- Annulation globale page — Bouton « Annuler les modifications » en haut à droite. Jette tous les brouillons de la page courante.
⚠️ « Annuler les modifications » est définitif — Une confirmation est demandée. Une fois validée, le brouillon disparaît et la page revient à la version publique.
📋 Récapitulatif
✅ Vous savez maintenant :
- Cliquer sur un texte de l'aperçu pour l'éditer.
- Utiliser la liste « Contenu de la page » pour les slots non cliquables.
- Reconnaître les 9 types de champs (text, textarea, richtext, image, url, icon, color, number, bool, select).
- Différencier la valeur d'une langue, la valeur canonique, et la valeur par défaut.
- Comprendre l'auto-save en brouillon.
- Annuler une modification non publiée.
Au prochain chapitre, on plonge dans la bibliothèque média.