Skip to main content

CHAPITRE 10 — Modifier les textes

✍️

La Chapitremodification 10 — Éditer les textes (slots)

Modifier d'un texte sur votre site est l'opération la plus fréquente.fréquente dans le Studio. Ce chapitre vous montreprésente les trois façonsméthodes depour ley faireprocéder, etainsi tousque les différents types de champs que vous rencontrerez.

🖱️

Méthode 1 — Click-to-editÉdition directe depuis l'aperçu

C'est la façonméthode la plus rapide et la plus intuitive.naturelle.

  1. Ouvrez la page que vous voulezsouhaitez modifier (clicen cliquant sur son nom dans la colonne de gauche).gauche.
  2. Dans l'aperçu central, survolez avec la souris : les zones éditables sont entourées d'un cadre orange en pointillés.pointillés.
  3. Cliquez sur le texte à modifier.
  4. L'inspecteur s'ouvre à droite avec un champ pré-déjà rempli.
  5. Modifiez le texte. L'auto-saveenregistrement s'activeautomatique 500intervient msune demi-seconde après votre dernière frappe.saisie.
  6. L'aperçu se met à jour en direct.

✅Recommandé Vous— voyezL'indicateur « Enregistré » à côté du champ ?confirme C'estla sauvegardésauvegarde en brouillon. Pour rendre la modification publique,visible publiquement, cliquez sur « Publier les modifications » en haut à droite.

📋

Méthode 2 — Liste « Contenu de la page »

UtileCette quandméthode est utile lorsqu'un slot n'est pas cliquable directement (cliquable, par exemple une image cachée,masquée ou une valeur stockée dans un attribut, etc.).attribut.

  1. Ouvrez la page.
  2. Sanspage sans cliquer sur l'aperçu, regardezaperçu.
  3. Consultez la colonne de droite.droite.
  4. Vous voyez laLa liste « Contenu de la page » qui répertorie tous les emplacements éditables.
  5. Chaque ligne affiche :présente un icônetype, (selon le type), leun libellé, un aperçu de la valeur,valeur et un badgerepère orange« simodifié modifications» en brouillon.cas de brouillon en cours.
  6. Cliquez sur unela ligne souhaitée pour ouvrir leson formulaire d'édition.formulaire.

💡Conseil Astuce— — Les slots sont groupésregroupés par section (« hero », « footerpied de page », « ctaappel à l'action », …etc.) selon le code couleurdécoupage défini par votre développeur. C'estCela plusfacilite rapidela pour s'y retrouvernavigation sur uneles pagepages longue.longues.

🌳

Méthode 3 — Navigation par sections

PourSur 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,recherchée, puis cliquer dessus.dessus directement.

📐

Les types de champs que vous rencontrerez

disponibles

Le développeur a choisi un type pour chaque slot. Ce type détermine l'apparence du formulaire d'édition. Voici tousl'ensemble lesdes types possibles :existants.

📝

Texte court (text)

Un champChamp d'une seule 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. Convient pour les titres, les libellés et les noms. Une longueur maximale peut être imposée, auquel cas un compteur de caractères est affiché.

  • Saut
    Texte long

    Champ multi-lignes sans mise en forme. Les sauts de ligne autorisé.

  • Les <br> sont insérésautorisés automatiquement.
  • et automatiquement convertis en retours visuels. Idéal pour :une accroche ou un paragraphe court,simple.

    une description simple.

🎨

Texte riche (richtext)

UnÉditeur éditeur WYSIWYGvisuel complet (CKEditor) avec barre d'outils.outils étendue.

Outil

Effet

Format

Paragraphe, Titre 2, Titre 3, Titre 4, Code

Style

Gras, italique, souligné, barré

Couleur

Couleur de texte +et couleur de fondfond, (selon la palette de la marque)marque

Alignement

Gauche, centre, droite, justifié

Listes

Listes à puces, listes numérotées, indentation

Liens

Insérer /ou supprimer un lien

Insérer un média

Ouvre la bibliothèque pour insérer une image au curseur

⚠️Note Pasimportante — L'éditeur ne propose pas de bouton « source » — Vous ne pouvez pas voir nipour modifier le HTML brut,brut. c'Ce choix est volontairedélibéré, (voircomme expliqué au Chapitre 3).3.

🖼️

Image (image)

UnLe champ aveccomporte inputune textezone +de saisie, un bouton pickerde médiasélection +dans la bibliothèque, un bouton retirerde +suppression vignette.et une vignette d'aperçu.

  1. Cliquez sur le bouton « Choisir une image » (icône image).
  2. La bibliothèque média s'ouvre dans une modale.fenêtre.
  3. Sélectionnez une image existante ou uploadez-téléversez-en une nouvelle.
  4. L'image est inséréeintégrée et la vignette apparaît.s'affiche.

💡Conseil Astuce— — Vous pouvez aussiégalement glisser-déposer une image depuis la sidebarbarre latérale Médias directement sur la zone d'image dans l'aperçu central.

🔗

URL (url)

Un champChamp texte spécialementadapté formatté pour lesaux liens. MêmesLes mêmes outils que pour les images (pickersont disponibles, par exemple le sélecteur pour insérer un média comme cible, par exemple).cible.

⭐

Icône (icon)

UnChamp champde poursélection choisir d'une icône FontAwesome.

  1. Saisissez le nom de la classe FontAwesome(par (ex.exemple fa-solid fa-star) ou
  2. Cliquez cliquez sur l'une des 20vingt icônes rapides affichéesproposées (étoile, cœur, fusée, …etc.).
  3. SélectionnezChoisissez la couleur dans le color picker.sélecteur.
  4. Un aperçu en direct s'affiche.

🎨

Couleur (color)

UnSélecteur colorde pickercouleur HTML5 +accompagné d'un champ hexadécimal texte.hexadécimal.

  • Format strict : #RRGGBB ou #RRGGBBAA (avec transparence).
  • Bouton « Défaut » pour revenir à la valeur initiale.
  • Une couleur n'est pas traduisible (elleet reste la mêmeidentique dans toutes les langues).langues.

🔢

Nombre (number)

Un champChamp numérique simple avec validation.

☑️

Booléen (bool)

Une caseCase à cocher Ouipour /un Non.choix oui ou non.

📋

Liste déroulante (select)

UnMenu dropdowndéroulant avec des options définies par votre développeur.

🌍

Le panneau d'édition multi-langues

multilingue

Pour les slots de type texte (text,texte textarea,court, richtext)texte long, texte riche), l'inspecteur afficheprésente trois zones distinctes :distinctes.

Zone

Contenu

1️⃣ Champ principal

La langue actuellement affichée dans l'aperçu (drapeau actif). C'est ici que vous tapezsaisissez 90la %majorité du temps.

2️⃣ Autres langues

(repliable)dépliable)

Un champ par localelangue supportée.prise en charge. Cliquez sur la flèche pour déplier,déplier saisissezet saisir les traductions.

3️⃣ Options avancées

(repliable, ⚙️)dépliable)

La

valeur canonique

partagée entre toutes les langues. À ne touchermodifier quequ'en sicas vousde savezbesoin ce que vous faites.spécifique.

ℹ️Note Comprendre la résolution— —Au Aumoment du rendu public, le module chercherecherche la valeur dans cet ordre : (1)surcharge override dedans la langue du visiteur, (2) valeur canonique, (3) valeur par défaut du slot.défaut. Le visiteur voit toujours quelqueun chose,contenu, même sien unel'absence traductionde manque.traduction.

Pour les slots non-textenon textuels (image, couleur, icône, …etc.), il n'y a qu'une seule zone « Valeur (toutes langues) ». est proposée. Une image se traduit rarement.

L'enregistrement

💾 L'auto-saveautomatique en pratique

Vous n'avez aucunAucun bouton « Enregistrer » n'est à cliquer. Le module sauvegarde automatiquement :votre travail.

  1. Vous tapezsaisissez unedu lettre.texte.
  2. Le module attend 500une msdemi-seconde de pause.
  3. L'indicateur passe à « Enregistrement... ».
  4. Le serveur reçoit la valeur et l'enregistre comme brouillon.brouillon.
  5. L'indicateur passe à « Enregistré » en vert.

💡Conseil Astuce— — Si vous voyez l'indicateur affiche « Erreur réseau », votre connexion a probablement été interrompue. FaitesUtilisez Ctrl+Z pour récupérer votre saisie, attendez le retourrétablissement de la connexion, puis re-tapez.ressaisissez.

🔙

Annuler une modification non publiée

Tant que vous n'avez pas publié, vousplusieurs pouvezoptions revenirde retour en arrière desont plusieurs façonspossibles :

  1. Annulation locale —: utilisez Ctrl+Z dans le champ pour revenir frappe par frappe.
  2. Annulation globale de la page —: Boutoncliquez sur « Annuler les modifications » endans hautla àbarre droite.d'outils. Jette tousTous les brouillons de la page courante.courante sont alors supprimés.

⚠️Avertissement — Le bouton « Annuler les modifications » est définitif —définitif. Une confirmation est demandée. Une fois validée, le brouillon disparaîtest perdu et la page revient à lasa version publique.

📋

Récapitulatif

✅ Vous savez maintenantdésormais :

  • 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 9neuf types de champs (text,texte textarea,court, richtext,texte long, texte riche, image, url,URL, icon,icône, color,couleur, number,nombre, bool, select)liste).
  • DifférencierDistinguer la valeur d'une langue, la valeur canonique,canonique et la valeur par défaut.
  • Comprendre le fonctionnement de l'auto-saveenregistrement automatique en brouillon.
  • Annuler une modification nonavant publiée.publication.

AuLe prochainchapitre chapitre,suivant on plonge dansaborde la bibliothèque média.média.

Back to top