Modifier un texte ou une photo sans rien casser
L’éditeur par blocs en toute sécurité.
« J’ai peur de tout casser. » C’est la phrase que l’on entend le plus souvent chez les commerçants qui viennent de récupérer les clés de leur site. Bonne nouvelle : modifier un texte ou une photo dans WordPress est à la fois simple et réversible. Cette leçon vous apprend à intervenir avec sérénité grâce à l’éditeur de blocs, en comprenant ce que vous touchez et comment revenir en arrière si besoin.
🎯 À la fin de cette leçon, vous saurez :
- reconnaître l’éditeur de blocs (Gutenberg) et ses différentes zones ;
- comprendre la notion de bloc, brique de base de toute page ;
- sélectionner et modifier un bloc de texte proprement ;
- remplacer une image sans décaler ni casser la mise en page ;
- utiliser la barre d’outils du bloc et le panneau de réglages ;
- prévisualiser le rendu sur ordinateur, tablette et mobile ;
- enregistrer avec « Mettre à jour » et revenir en arrière grâce aux révisions.
⏱️ Durée : 55 à 65 min · Niveau : débutant · Prérequis : savoir se connecter et se repérer dans l’administration (leçon précédente).
1. L’éditeur de blocs, ou pourquoi on ne casse (presque) rien
Depuis la version 5.0 de WordPress, parue fin 2018, la rédaction se fait dans un outil appelé l’éditeur de blocs, dont le nom de code est Gutenberg. Le principe est limpide : chaque élément d’une page est un bloc indépendant. Un titre est un bloc, un paragraphe est un bloc, une image est un bloc, un bouton est un bloc. Une page n’est donc rien d’autre qu’une pile de blocs empilés les uns sous les autres.
Cette organisation a un immense avantage pour le débutant : quand vous modifiez le texte d’un paragraphe, vous ne touchez que ce paragraphe. Les autres blocs, la mise en page générale et le reste du site ne bougent pas d’un pixel. Ajoutez à cela que WordPress conserve un historique (les révisions) et vous disposez d’un filet de sécurité permanent : la moindre fausse manœuvre se corrige.
2. Ouvrir un contenu et reconnaître l’éditeur
Il existe deux chemins pour ouvrir une page ou un article en modification :
- Depuis l’administration : menu Pages (ou Articles) → Toutes les pages, puis clic sur le titre du contenu, ou sur Modifier au survol.
- Depuis le site public : en étant connecté, visitez la page concernée et cliquez sur Modifier la page dans la barre d’outils noire. Vous arrivez directement au bon endroit.
Quel que soit le chemin, vous atterrissez dans l’éditeur de blocs. Prenons le temps d’en repérer les quatre zones sur la maquette annotée ci-dessous.
Légende : ① le bouton + (insérer un bloc) et les flèches Annuler/Rétablir · ② la vue en liste (plan des blocs) · ③ un bloc sélectionné (liseré bleu) · ④ les boutons Prévisualiser et Mettre à jour · ⑤ le panneau de réglages à droite, avec ses onglets Bloc et Publication.
3. Le bloc, brique de base de tout contenu
Avant de modifier quoi que ce soit, il faut savoir sélectionner le bon bloc. Un simple clic dans un texte place le curseur pour écrire. Un clic sur le bord du bloc (ou la touche Échap) sélectionne le bloc entier, ce qui fait apparaître sa barre d’outils juste au-dessus. Retenez cette nuance : cliquer dans le texte pour écrire, sélectionner le bloc pour le déplacer ou le supprimer.
Les blocs que vous rencontrerez le plus
| Bloc | À quoi il sert |
|---|---|
| Paragraphe | Le texte courant. C’est le bloc par défaut, celui que l’on manipule le plus. |
| Titre | Les intertitres (niveaux H2, H3…) qui structurent et aèrent la page. |
| Image | Une photo unique, avec légende et texte alternatif. |
| Galerie | Plusieurs photos disposées en grille (avant/après, réalisations). |
| Bouton | Un bouton cliquable, par exemple « Prendre rendez-vous ». |
| Liste | Une énumération à puces ou numérotée. |
| Citation | Mettre en avant un témoignage client ou une phrase forte. |
| Colonnes | Disposer plusieurs blocs côte à côte (texte à gauche, photo à droite). |
| Tableau | Une grille de données, idéale pour une grille tarifaire. |
| Espacement | Ajouter de l’air (un espace vertical) entre deux blocs. |
4. Modifier un texte, pas à pas
Voici le geste le plus courant : corriger une faute, mettre à jour un horaire, reformuler une phrase. La marche à suivre est toujours la même.
- Cliquez dans le paragraphe à l’endroit voulu : un curseur clignotant apparaît.
- Écrivez ou corrigez comme dans un traitement de texte. Pour effacer, utilisez la touche Retour arrière.
- Pour mettre un mot en valeur, sélectionnez-le (double-clic), puis cliquez sur G (gras) ou I (italique) dans la barre d’outils du bloc.
- Pour créer un lien, sélectionnez le texte et cliquez sur l’icône lien (chaîne), puis collez l’adresse.
- Appuyez sur Entrée pour créer un nouveau paragraphe (donc un nouveau bloc), ou sur Maj + Entrée pour un simple retour à la ligne dans le même bloc.
La barre d’outils qui surplombe le bloc sélectionné concentre ces commandes. Le schéma ci-dessous en détaille les repères.
5. Le panneau de réglages, à droite
À droite de l’éditeur se trouve le panneau de réglages. On l’affiche ou le masque avec l’icône en forme d’engrenage, en haut à droite. Il possède deux onglets qu’il ne faut pas confondre.
- L’onglet Bloc concerne uniquement le bloc actuellement sélectionné : il change selon sa nature. Pour un texte, on y règle la taille et la couleur ; pour une image, on y trouve le texte alternatif et les dimensions.
- L’onglet Publication (parfois nommé Article ou Page) concerne le contenu entier : statut, visibilité, catégories, image à la une, extrait, permalien. Nous l’explorerons en détail dans la leçon sur la publication d’une actualité.
6. Remplacer une image sans casser la mise en page
C’est la grande crainte des débutants : changer une photo et voir toute la page se décaler. La clé tient en un mot : remplacer plutôt que supprimer puis réinsérer. En remplaçant, vous gardez le même bloc, le même emplacement et le même alignement ; seule l’image change.
La marche à suivre :
- Cliquez sur l’image pour sélectionner son bloc : sa barre d’outils apparaît.
- Cliquez sur Remplacer.
- Choisissez Téléverser (une image de votre ordinateur) ou Médiathèque (une image déjà importée).
- Sélectionnez la nouvelle photo, puis validez.
- Renseignez ou vérifiez le texte alternatif dans le panneau de réglages.
| Commande du bloc image | Effet |
|---|---|
| Remplacer | Mettre une autre image à la place, sans toucher au reste. |
| Aligner | Gauche, centre, droite ou pleine largeur. |
| Recadrer | Rogner ou zoomer dans l’image sans logiciel externe. |
| Ajouter un lien | Rendre l’image cliquable vers une page. |
| Légende | Petit texte affiché sous l’image. |
| Texte alternatif | Description pour l’accessibilité et le référencement (panneau Réglages). |
7. Ajouter, déplacer ou retirer un bloc
Ajouter un bloc
Cliquez sur le bouton + (en haut à gauche, ou celui qui apparaît entre deux blocs quand vous survolez), puis choisissez le type de bloc. Encore plus rapide : dans une ligne vide, tapez la touche / suivie du nom du bloc (par exemple /image ou /titre) et validez. C’est le « raccourci slash », le préféré des habitués.
Déplacer un bloc
Sélectionnez le bloc : à gauche de sa barre d’outils apparaît une poignée (six points). Faites-la glisser vers le haut ou le bas pour repositionner le bloc. Les deux petites flèches ⌃ ⌄ permettent aussi de le monter ou le descendre d’un cran, plus précisément qu’un glisser-déposer.
Supprimer un bloc
Sélectionnez le bloc, ouvrez le menu ⋮ (trois points, « Options ») à droite de sa barre d’outils, puis cliquez sur Supprimer. Vous pouvez aussi sélectionner le bloc entier (touche Échap) puis appuyer sur Suppr.
8. Prévisualiser, puis enregistrer
Avant de rendre vos changements visibles, deux réflexes : prévisualiser pour vérifier le rendu, puis enregistrer pour publier. Le schéma résume ce cycle.
Prévisualiser
Le bouton Prévisualiser ouvre un aperçu du rendu réel. On peut choisir l’affichage Ordinateur, Tablette ou Mobile pour vérifier que tout reste lisible sur un téléphone — un point crucial, car la majorité des visiteurs d’un institut consultent depuis leur smartphone. L’option Prévisualiser dans un nouvel onglet montre la page telle qu’elle apparaîtra vraiment.
Enregistrer
Le bouton principal, en haut à droite, change de nom selon le contexte : Publier pour un contenu nouveau, Mettre à jour pour un contenu déjà en ligne. Tant que vous n’avez pas cliqué dessus, vos changements restent invisibles pour le public.
| Bouton | Quand l’utiliser |
|---|---|
| Enregistrer le brouillon | Sauvegarder un travail non encore publié, pour y revenir plus tard. |
| Prévisualiser | Voir le rendu réel (ordi, tablette, mobile) avant de valider. |
| Publier | Mettre en ligne un contenu nouveau, jamais publié. |
| Mettre à jour | Enregistrer les modifications d’un contenu déjà en ligne. |
Revenir en arrière : les révisions
WordPress conserve un historique de vos enregistrements. Dans le panneau Publication, la ligne Révisions ouvre une réglette qui permet de comparer les versions successives et de restaurer celle de votre choix. C’est le remède définitif au « j’ai tout gâché » : on revient à la version d’hier en trois clics.
🧭 Erreurs fréquentes et dépannage
| Symptôme | Cause probable | Solution |
|---|---|---|
| La mise en page s’est décalée après une frappe | La touche Entrée a scindé un bloc, ou Retour arrière l’a fusionné. | Ctrl + Z aussitôt ; au besoin, la vue en liste pour vérifier les blocs. |
| Le bouton « Remplacer » n’apparaît pas | Le bloc image n’est pas sélectionné. | Cliquez une fois sur l’image pour faire surgir sa barre d’outils. |
| Mes changements n’apparaissent pas sur le site | « Mettre à jour » non cliqué, ou cache actif. | Cliquez sur Mettre à jour ; rechargez la page publique, videz le cache. |
| Le panneau de réglages a disparu | L’icône d’engrenage a été désactivée. | Recliquez sur l’engrenage en haut à droite pour le réafficher. |
| La nouvelle image est floue | Photo trop petite, étirée au-delà de sa taille. | Importez une image plus grande (largeur ≥ 1200 px). |
| J’ai supprimé un bloc par erreur | Fausse manœuvre. | Ctrl + Z, ou restaurez une révision antérieure. |
| La photo déborde de son cadre sur mobile | Image très lourde ou proportions inadaptées. | Recadrez, allégez, et vérifiez en prévisualisation mobile. |
📋 Cas pratique nº 1 — Corriger un tarif
Situation. Le forfait « Soin Éclat » passe de 55 à 59 euros. Rosalie doit corriger sa page Tarifs, sans rien déranger d’autre.
Résolution.
- Ouvrir Pages → Tarifs → Modifier.
- Cliquer dans la cellule (ou la ligne) contenant « Soin Éclat — 55 € ».
- Effacer « 55 » et taper « 59 ».
- Cliquer sur Prévisualiser, choisir l’aperçu Mobile pour vérifier la lisibilité.
- Cliquer sur Mettre à jour. Le nouveau tarif est en ligne.
📋 Cas pratique nº 2 — Remplacer la photo d’accueil
Situation. Rosalie a refait sa vitrine et veut remplacer la grande photo d’accueil par la nouvelle, sans décaler la page.
Résolution.
- Ouvrir la page d’accueil en modification.
- Cliquer sur la grande photo pour sélectionner son bloc image.
- Dans sa barre d’outils, cliquer sur Remplacer, puis Téléverser la nouvelle photo (préalablement allégée, largeur ~1600 px, format paysage comme l’ancienne).
- Renseigner le texte alternatif : « Vitrine de l’Institut Rosalie à Murol ».
- Prévisualiser sur mobile, puis Mettre à jour.
Résultat. La photo change, le cadre et la mise en page restent identiques.
📋 Cas pratique nº 3 — Annuler une fausse manœuvre
Situation. En voulant corriger un mot, Rosalie a supprimé tout un paragraphe de présentation et a déjà cliqué ailleurs.
Résolution. Deux options. Si elle n’a pas encore enregistré : Ctrl + Z répété jusqu’à récupérer le paragraphe. Si elle a déjà mis à jour : ouvrir le panneau Publication → Révisions, faire glisser la réglette sur la version précédente, et cliquer sur Restaurer cette révision. Le paragraphe réapparaît intact.
📋 Cas pratique nº 4 — Ajouter un bouton « Prendre rendez-vous »
Situation. Rosalie souhaite qu’un bouton bien visible mène vers sa page de réservation, en bas de sa page d’accueil.
Résolution.
- Ouvrir la page d’accueil en modification et placer le curseur à l’endroit voulu.
- Cliquer sur + (ou taper /bouton) et choisir le bloc Bouton.
- Saisir le libellé : « Prendre rendez-vous ».
- Le sélectionner, cliquer sur l’icône lien et coller l’adresse de la page de réservation.
- Dans le panneau de réglages, choisir une couleur de fond lisible (texte foncé sur fond clair, ou l’inverse, jamais deux tons proches).
- Prévisualiser, vérifier sur mobile, puis Mettre à jour.
Résultat. Un appel à l’action clair, ajouté sans toucher au reste de la page.
🧩 Trois modifications express (mémo)
Voici les trois gestes que vous répéterez le plus souvent, résumés en quelques lignes chacun.
1. Changer un horaire ou une date
- Ouvrir la page ou l’article concerné.
- Cliquer dans le texte, sélectionner l’ancienne mention, taper la nouvelle.
- Prévisualiser, puis Mettre à jour.
2. Ajouter un témoignage client
- Placer le curseur à l’endroit voulu, taper /citation et valider.
- Écrire le témoignage, puis le nom du client sous la citation.
- Mettre à jour. Le bloc Citation met le texte en valeur automatiquement.
3. Mettre à jour une galerie de photos
- Cliquer sur la galerie pour la sélectionner.
- Cliquer sur Ajouter pour insérer une nouvelle photo, ou sélectionner une vignette et Remplacer.
- Vérifier les textes alternatifs, prévisualiser, Mettre à jour.
| Point à vérifier | Pourquoi |
|---|---|
| Relire le texte | Une faute en ligne nuit à l’image du commerce. |
| Texte alternatif des images | Accessibilité et référencement. |
| Tester les liens | Un lien mort fait fuir le visiteur. |
| Prévisualiser en mobile | La majorité des visiteurs sont sur téléphone. |
| Supprimer les blocs vides | Ils créent des trous disgracieux dans la page. |
🏋️ Exercices
À vous de jouer. Réfléchissez, puis dépliez le corrigé.
Exercice 1. Dans un paragraphe d’horaires, il faut remplacer « du lundi au vendredi » par « du mardi au samedi ». Décrivez les gestes.
✅ Voir le corrigé
Cliquer dans le paragraphe, sélectionner « lundi au vendredi » (glisser la souris dessus), taper « mardi au samedi ». Prévisualiser, puis Mettre à jour. Aucun autre bloc n’est touché.
Exercice 2. Comment mettre le mot « offert » en gras dans une phrase ?
✅ Voir le corrigé
Double-cliquer sur le mot « offert » pour le sélectionner, puis cliquer sur G dans la barre d’outils du bloc (ou utiliser le raccourci Ctrl + B).
Exercice 3. Il faut changer une photo dans une galerie sans déformer la grille. Quel bouton utiliser ?
✅ Voir le corrigé
Sélectionner l’image concernée dans la galerie, puis cliquer sur Remplacer. On garde ainsi la même case de la grille ; supprimer puis réinsérer, au contraire, changerait l’ordre.
Exercice 4. En tapant, un paragraphe s’est coupé en deux blocs distincts. Comment le réunifier ?
✅ Voir le corrigé
Placer le curseur tout au début du second bloc et appuyer sur Retour arrière : les deux blocs fusionnent. Sinon, Ctrl + Z annule la coupure si elle vient d’avoir lieu.
Exercice 5. Avant de publier, comment vérifier que la page reste lisible sur un téléphone ?
✅ Voir le corrigé
Cliquer sur Prévisualiser, puis choisir l’affichage Mobile. On contrôle que les textes ne débordent pas et que les photos restent nettes.
Exercice 6. Rosalie veut revenir à la version de sa page telle qu’elle était hier. Où va-t-elle ?
✅ Voir le corrigé
Dans le panneau Publication, ligne Révisions : faire glisser la réglette sur la version d’hier, puis cliquer sur Restaurer cette révision.
🚀 Aller plus loin
Les raccourcis qui font gagner du temps
| Raccourci (Windows) | Action |
|---|---|
| Ctrl + B | Mettre le texte sélectionné en gras. |
| Ctrl + I | Mettre en italique. |
| Ctrl + K | Insérer un lien sur le texte sélectionné. |
| Ctrl + Z | Annuler la dernière action. |
| Ctrl + Maj + Z | Rétablir ce que l’on vient d’annuler. |
| / (slash) | Insérer un bloc en tapant son nom. |
| Échap | Sélectionner le bloc entier (pour le déplacer/supprimer). |
Sur Mac, remplacez Ctrl par Cmd (⌘).
Modifier un bouton ou des colonnes
Un bouton se modifie comme un texte : cliquez dessus pour changer son libellé, utilisez l’icône lien pour changer sa destination, et le panneau de réglages pour sa couleur. Des colonnes se réorganisent en sélectionnant la colonne (via la vue en liste) puis en la déplaçant ; on peut aussi ajuster leur largeur dans les réglages. Là encore, on modifie sans reconstruire.
Adapter selon votre métier
- Restaurant : le menu du jour évolue souvent — un bloc Liste ou Tableau se met à jour en quelques secondes.
- Artisan : une Galerie de réalisations s’enrichit d’une photo par le bouton Ajouter, sans refaire la grille.
- Institut de beauté : la grille tarifaire vit dans un bloc Tableau ; on modifie une cellule et l’on met à jour, comme au cas pratique nº 1.
Dupliquer un bloc plutôt que le recréer
Besoin de répéter une carte de soin, un bouton ou une mise en forme ? Sélectionnez le bloc, ouvrez le menu ⋮ (Options) et choisissez Dupliquer (ou Ctrl + Maj + D). Une copie identique apparaît juste en dessous, prête à être personnalisée. On gagne du temps et l’on conserve une mise en forme homogène d’un bloc à l’autre.
Les compositions et les blocs synchronisés
WordPress propose des compositions (ou patterns) : des ensembles de blocs prêts à l’emploi — une section « tarifs », un bandeau d’appel à l’action — que l’on insère d’un seul clic depuis le bouton +. Plus puissant encore, un bloc synchronisé (autrefois appelé « bloc réutilisable ») se met à jour partout où il apparaît dès qu’on le modifie à un seul endroit. C’est idéal pour un bandeau d’horaires présent sur plusieurs pages : on corrige une fois, tout le site suit.
Le menu ⋮ (Options) d’un bloc concentre ces actions. Voici les plus utiles :
| Option du menu ⋮ | Effet |
|---|---|
| Dupliquer | Créer une copie du bloc juste en dessous. |
| Copier / Coller | Reprendre un bloc d’une page à une autre. |
| Verrouiller | Empêcher le déplacement ou la suppression accidentelle d’un bloc. |
| Créer un bloc synchronisé | Transformer la sélection en bloc réutilisable et mis à jour partout. |
| Supprimer | Retirer le bloc (réversible par Ctrl + Z). |
🔑 L’essentiel à retenir
- Toute page est une pile de blocs indépendants ; modifier un bloc ne touche que lui.
- On ouvre un contenu via Pages/Articles → Modifier, ou via « Modifier » dans la barre d’outils du site.
- Cliquer dans le texte pour écrire ; sélectionner le bloc (Échap) pour le déplacer ou le supprimer.
- La barre d’outils du bloc gère gras, italique, lien et transformation ; le panneau de réglages gère la mise en forme fine.
- Pour changer une photo, on utilise Remplacer — jamais supprimer/réinsérer — et l’on garde des proportions proches.
- Renseignez toujours le texte alternatif d’une image.
- Ctrl + Z annule presque tout ; les révisions restaurent une version antérieure.
- On prévisualise (surtout en mobile) avant de cliquer sur Mettre à jour.
- Rien n’est visible en ligne tant que l’on n’a pas enregistré : explorez sans crainte.
- La vue en liste est le moyen le plus sûr de sélectionner le bon bloc.
📖 Glossaire
| Terme | Définition |
|---|---|
| Éditeur de blocs (Gutenberg) | L’outil de rédaction de WordPress depuis la version 5.0. |
| Bloc | Brique de contenu autonome (paragraphe, titre, image, bouton…). |
| Barre d’outils du bloc | La mini-barre qui surplombe un bloc sélectionné (gras, lien, options…). |
| Panneau de réglages | La colonne de droite : réglages du bloc et de la publication. |
| Onglet Bloc | Réglages propres au bloc sélectionné. |
| Onglet Publication | Réglages du contenu entier (statut, catégories, image à la une…). |
| Vue en liste | Le plan hiérarchique de tous les blocs de la page. |
| Inséreur | Le bouton + qui ajoute un nouveau bloc. |
| Poignée de déplacement | Les six points qui servent à glisser un bloc. |
| Remplacer | Changer l’image d’un bloc en conservant le bloc et son emplacement. |
| Texte alternatif | Description d’une image pour l’accessibilité et le SEO. |
| Prévisualiser | Afficher le rendu réel (ordi, tablette, mobile) avant publication. |
| Mettre à jour | Enregistrer et publier les modifications d’un contenu en ligne. |
| Révision | Version antérieure enregistrée, que l’on peut restaurer. |
| Brouillon | Contenu enregistré mais non publié. |
❓ Questions fréquentes
Modifier un texte change-t-il tout de suite le site public ?
Non. Vos modifications restent à l’écran, invisibles pour les visiteurs, jusqu’à ce que vous cliquiez sur Mettre à jour. Vous pouvez donc travailler tranquillement.
Quelle différence entre « Publier » et « Mettre à jour » ?
« Publier » met en ligne un contenu nouveau. « Mettre à jour » enregistre les changements d’un contenu déjà publié. C’est le même bouton, dont le nom s’adapte.
Puis-je annuler une modification après l’avoir enregistrée ?
Oui, grâce aux révisions : dans le panneau Publication, on compare les versions et l’on restaure la bonne. Avant enregistrement, Ctrl + Z suffit.
Dois-je enregistrer chaque bloc séparément ?
Non. Un seul clic sur Mettre à jour enregistre l’ensemble de la page, tous blocs confondus.
Comment insérer une photo entre deux paragraphes ?
Placez le curseur en fin du premier paragraphe, appuyez sur Entrée, puis tapez /image (ou cliquez sur +) et choisissez votre photo.
Mon site utilise Elementor ou Divi, est-ce pareil ?
Les principes sont identiques (sélectionner, modifier, prévisualiser, enregistrer), mais l’interface et l’emplacement des boutons diffèrent. Reportez-vous à la documentation de votre constructeur pour les détails.
La photo est-elle stockée dans la page elle-même ?
Non : l’image vit dans la médiathèque, et la page ne fait qu’y renvoyer. C’est pourquoi « Remplacer » suffit et pourquoi une même photo peut servir à plusieurs endroits.
Combien de temps les révisions sont-elles conservées ?
Par défaut, WordPress les garde sans limite. Un professionnel peut en limiter le nombre pour alléger la base de données, mais ce n’est pas nécessaire pour un petit site vitrine.
Num Compagny accompagne les commerçants du Sancy dans la gestion autonome de leur site. Vous savez désormais modifier sans rien casser : la prochaine leçon vous apprend à publier une actualité qui travaille pour vous.