Modifier une page de votre site sans casser la mise en page

Vous voulez juste changer un numéro de téléphone, corriger une faute, remplacer une photo. Vous ouvrez la page, vous modifiez, vous enregistrez — et la mise en page a bougé. Un texte est passé sous une image, un bloc a disparu, la page ne ressemble plus à rien. Voici comment faire ces modifications sans jamais…

7 min de lecture

Par Benoit

Vérifié

Vérifié sur WordPress 7.0 avec l’éditeur de blocs. Si votre site utilise un constructeur de pages (Elementor, Divi, WPBakery), l’écran sera différent — mais les précautions décrites ici restent les mêmes.

Pourquoi une simple modification casse une page

Une page WordPress moderne n’est pas un document texte. C’est un empilement de blocs : un bloc titre, un bloc paragraphe, un bloc image, un bloc colonnes qui en contient d’autres. Chaque bloc a une place précise dans cet empilement, et certains sont imbriqués dans d’autres, comme des boîtes dans des boîtes.

Le problème vient de là. Quand vous cliquez dans un texte, vous ne sélectionnez pas toujours le bloc que vous croyez : vous pouvez avoir attrapé le paragraphe, ou la colonne qui le contient, ou le groupe qui contient la colonne. Appuyer sur Supprimer à ce moment-là n’efface pas un mot, il efface la boîte entière et tout ce qu’elle contenait.

L’autre cause, plus sournoise, c’est le copier-coller depuis Word ou depuis un autre site. Le texte arrive avec sa mise en forme d’origine — une police, une taille, une couleur, parfois un tableau invisible — qui entre en conflit avec le style de votre site.

Ce qui se passe si on ne prend aucune précaution

Rien de dramatique, et c’est important de le dire : WordPress conserve un historique des versions de chaque page. Une modification ratée se rattrape presque toujours. Le vrai risque n’est pas la perte définitive, c’est le temps perdu et le stress — découvrir trois semaines plus tard que la page tarifs est cassée depuis trois semaines, alors que des clients l’ont vue.

D’où une règle simple : on ne modifie jamais une page en aveugle, et on regarde toujours le résultat avant de partir.

La marche à suivre

1

Sauvegarder, avant de toucher à quoi que ce soit

Pour une modification de texte, l’historique des versions de WordPress suffit. Pour tout ce qui touche à la structure — déplacer des blocs, changer une mise en page, modifier un modèle — faites une sauvegarde complète du site avant.

Si vous avez une extension de sauvegarde, lancez-la à la main et attendez qu’elle finisse. Si vous n’en avez pas, votre hébergeur en propose presque toujours une dans son panneau d’administration : cherchez « sauvegardes » ou « backups ». Notez la date et l’heure quelque part. Une sauvegarde dont on ne sait pas de quand elle date ne sert à rien le jour où il faut l’utiliser.

2

Ouvrir la page et afficher la vue en liste

C’est l’astuce qui change tout, et presque personne ne l’utilise. En haut à gauche de l’éditeur, une icône représentant trois traits superposés ouvre la vue en liste : l’arborescence complète de la page, bloc par bloc, avec les imbrications visibles.

Travaillez toujours avec cette vue ouverte. Vous y sélectionnez le bloc exact que vous voulez modifier, vous voyez immédiatement dans quoi il est contenu, et vous ne supprimez plus jamais une colonne en croyant effacer une phrase.

3

Modifier le texte, sans jamais coller de mise en forme

Pour changer un mot, cliquez dedans et tapez. Rien de plus.

Pour coller un texte venu d’ailleurs, copiez-le d’abord avec Ctrl + C (Cmd + C sur Mac), puis n’utilisez jamais Ctrl + V seul pour le coller. Utilisez Ctrl + Maj + V sur Windows et Linux (Cmd + Maj + V sur Mac) : c’est le collage sans mise en forme. Le texte arrive nu et prend automatiquement le style de votre site. C’est le réflexe le plus rentable de toute cette liste.

4

Remplacer une image sans déformer la page

Sélectionnez le bloc image, puis cherchez le bouton Remplacer dans la barre d’outils qui apparaît au-dessus. Ne supprimez pas le bloc pour en créer un nouveau : vous perdriez au passage ses réglages de taille, d’alignement et de recadrage, et c’est exactement ce qui décale les mises en page.

Deux précautions sur la photo elle-même. D’abord son poids : une photo sortie d’un téléphone pèse souvent plusieurs mégaoctets, ce qui ralentit la page pour tout le monde. Redimensionnez-la à 2 000 pixels de large au maximum avant de l’envoyer. Ensuite ses proportions : si l’ancienne image était au format paysage et la nouvelle au format portrait, la page changera de hauteur, et c’est normal. Choisissez si possible une image de proportions comparables.

Pensez enfin au texte alternatif, ce champ souvent laissé vide dans la colonne de droite. Il décrit l’image pour les personnes qui ne la voient pas et pour les moteurs de recherche. Une phrase simple et descriptive suffit.

5

Prévisualiser avant d’enregistrer

Le bouton Prévisualiser, en haut à droite, ouvre la page telle qu’elle sera réellement. Regardez-la, et regardez-la aussi en mobile : le menu déroulant de prévisualisation propose les formats bureau, tablette et mobile. La majorité des visiteurs vous lisent sur un téléphone, et c’est là que les mises en page cassées se voient le plus.

6

Enregistrer, puis vérifier sur le site

Cliquez sur Mettre à jour, puis allez voir la page sur le site public — pas dans l’éditeur. Si elle vous semble inchangée alors que vous venez de la modifier, votre site utilise probablement un cache : rechargez en forçant (Ctrl + F5 sur Windows et Linux, Cmd + Maj + R sur Mac), ou videz le cache depuis l’extension qui s’en occupe.

Dépannage

Si ça tourne mal

Ne paniquez pas, et surtout ne continuez pas à modifier pour rattraper : c’est comme ça qu’on transforme un petit problème en gros.

  1. Vous n’avez pas encore enregistré ? Ctrl + Z sur Windows et Linux (Cmd + Z sur Mac) autant de fois qu’il faut. L’annulation fonctionne dans l’éditeur de blocs comme ailleurs.
  2. Vous avez enregistré ? Dans la colonne de droite, onglet Page, cherchez la ligne Révisions. Elle liste les versions précédentes avec leur date. Vous pouvez comparer et restaurer celle d’avant votre modification.
  3. Les révisions ne suffisent pas ? C’est là que la sauvegarde de l’étape 1 sert. Restaurez-la depuis votre extension ou depuis le panneau de votre hébergeur.

Un détail qui compte : les révisions couvrent le contenu de la page. Elles ne couvrent pas les réglages du thème, les modèles, ni les extensions. C’est précisément pour ça que la sauvegarde complète reste nécessaire dès qu’on sort de la simple retouche de texte.

Quand appeler quelqu’un

Tout ce qui précède, vous pouvez le faire seul, et c’est très bien ainsi : un site dont on ne peut pas changer un numéro de téléphone soi-même est un site qui vous appartient à moitié.

En revanche, appelez quelqu’un dans ces cas-là :

  • la page est cassée et les révisions ne remontent pas assez loin ;
  • l’éditeur affiche un bloc en rouge avec « Ce bloc contient du contenu inattendu » — la structure est abîmée, la réparer à la main demande de lire le code ;
  • vous devez modifier quelque chose qui apparaît sur toutes les pages (le menu, le pied de page, l’en-tête) : ce n’est plus une page, c’est un modèle, et une erreur s’y voit partout à la fois ;
  • vous n’avez aucune sauvegarde et vous vous en apercevez maintenant. C’est le moment de régler ce point avant tout le reste.

Je forme mes clients à ces manipulations à la livraison de leur site, et la maintenance comprend les sauvegardes et leur restauration. Si une page est déjà cassée et que vous ne savez pas par quel bout la reprendre, c’est ce que couvre le dépannage.

Benoit — Ben Dev

Création et maintenance de sites WordPress optimisés SEO pour les indépendants, artisans et petites entreprises de Bordeaux et de Gironde.

Un site que vous pouvez modifier vous-même

Chaque site que je livre vient avec une heure de formation et un guide écrit sur mesure pour vos pages.

D’autres articles de cette catégorie arrivent bientôt.

Les autres catégories

Une question sur votre propre site ? Prenez un créneau ci-dessous, ou écrivez-moi — la réponse est gratuite, et souvent plus courte qu’un article.

Chargement des disponibilités…

La prise de rendez-vous nécessite JavaScript.
Écrivez-moi et je vous propose un créneau.

Calendrier fait maison par Ben.Dev — sans service tiers ni cookie.