36. Maintenance et dépannage

Un site n’est jamais « fini » : WordPress, Elementor, le thème et les extensions reçoivent des mises à jour, l’hébergeur change de version de PHP, un formulaire cesse d’envoyer sans prévenir. Ce chapitre installe une routine mensuelle courte, présente les outils de réparation d’Elementor et dresse la liste des douze pannes les plus fréquentes avec leur remède.

En bref

Public: Toute personne qui aura la charge d’un site Elementor après sa mise en ligne, la sienne ou celle d’un client.
Enjeu: Garder un site à jour, sauvegardé et fonctionnel avec une heure par mois, et savoir quoi faire quand quelque chose casse.
Idée clé: On ne met jamais à jour sans sauvegarde, et le premier réflexe quand un style disparaît s’appelle Regénérer le CSS.
Prérequis: Chapitres 04 (réglages d’administration), 28 (formulaires) et 33 (cache, PHP).
Lecture: Environ 16 minutes (+ 30 minutes d’exercice).

36.1 — La routine mensuelle

La plupart des sites qui « tombent en panne » n’ont pas été touchés depuis des mois : les mises à jour se sont accumulées, l’une d’elles a fini par entrer en conflit avec une autre, et personne n’a de sauvegarde récente. La parade est une routine régulière, courte, toujours dans le même ordre. Une heure par mois suffit pour un site vitrine ; bloquez-la dans l’agenda comme un rendez-vous.

Sauvegardez. Avant tout le reste, lancez une sauvegarde complète (fichiers et base de données) et vérifiez qu’elle s’est bien terminée (voir 36.2). Sans sauvegarde, n’allez pas plus loin.
Mettez à jour dans l’ordre. Dans Tableau de bord › Mises à jour, appliquez d’abord la mise à jour de WordPress, puis celle d’Elementor, puis d’Elementor Pro, puis du thème Hello, puis des autres extensions, une par une. Entre chaque étape, rechargez la page d’accueil du site : si quelque chose casse, vous saurez quelle mise à jour est en cause.
Testez le formulaire. Envoyez une demande de test depuis le formulaire de contact et vérifiez que l’e-mail arrive, y compris l’accusé de réception au client (chapitre 28). C’est la panne la plus silencieuse : un formulaire qui n’envoie plus ne se signale à personne.
Parcourez les pages clés. Accueil, Prestations, Contact, sur ordinateur et sur téléphone. Regardez le menu, le bandeau, une galerie, un bouton d’appel.
Nettoyez. Supprimez les envois de formulaire plus anciens que la durée fixée au chapitre 35, videz la corbeille des pages et des médias, désinstallez les extensions désactivées.
Consignez. Notez la date, les versions installées et toute anomalie dans un simple fichier texte. Le jour où il faudra ouvrir un ticket, cette liste vaut de l’or.

Bonne pratique

Ne cochez jamais « Activer les mises à jour automatiques » pour Elementor et Elementor Pro sur un site que vous ne surveillez pas chaque jour. Une mise à jour majeure appliquée un samedi soir sans sauvegarde préalable est le scénario le plus courant des demandes de dépannage. Les mises à jour de sécurité mineures de WordPress, elles, peuvent rester automatiques.

36.2 — Sauvegarder, et tester avant de mettre à jour

Une sauvegarde est une copie complète du site — les fichiers (thème, extensions, images de la Médiathèque) et la base de données (pages, réglages, envois) — stockée ailleurs que sur le serveur du site. Deux voies existent. La plupart des hébergeurs proposent des sauvegardes automatiques quotidiennes, restaurables depuis l’espace client ; vérifiez qu’elles sont activées et combien de jours elles sont conservées. À défaut, ou en complément, une extension de sauvegarde (UpdraftPlus est un exemple courant) envoie une copie planifiée vers un espace de stockage en ligne.

Une sauvegarde qu’on n’a jamais restaurée n’est qu’un espoir. Au moins une fois, faites l’exercice de restaurer le site sur un espace de test pour vérifier que la copie est complète. Beaucoup d’hébergeurs proposent justement un site de test (staging), copie du site sur laquelle on applique les mises à jour avant de les reporter sur le site réel. Pour un site vitrine de cinq pages, ce luxe n’est pas indispensable si la sauvegarde est fiable ; pour un site avec une boutique ou de nombreux formulaires, il devient la règle.

Définition

Site de test (staging) — une copie complète du site, accessible à une adresse provisoire et invisible des visiteurs, sur laquelle on essaie une mise à jour, une nouvelle extension ou une refonte. Si tout va bien, on reporte sur le site réel ; sinon, on jette la copie et rien n’a été cassé.

36.3 — Les outils de réparation d’Elementor

Elementor regroupe ses outils de maintenance dans Elementor › Éditeur › Outils de l’administration WordPress. Il faut les connaître avant d’en avoir besoin.

Regénérer le CSS et les données

L’outil Regenerate CSS & Data (« Regénérer le CSS et les données ») est le premier réflexe quand une page perd ses styles, affiche un ancien design ou se déforme après une mise à jour ou une migration. Elementor enregistre les styles de chaque page dans des fichiers CSS placés dans le dossier des téléversements du site (c’est la Méthode d’impression CSS « fichier externe » du chapitre 33) ; si ces fichiers sont perdus ou périmés, cet outil les recrée à partir des réglages actuels. Il est sans danger et prend quelques secondes ; videz ensuite le cache.

Synchroniser la bibliothèque

Sync Library (« Synchroniser la bibliothèque ») met à jour la liste des modèles proposés par Elementor. La bibliothèque se synchronise seule chaque jour ; on n’utilise ce bouton que si elle paraît vide ou périmée.

Remplacer l’URL

Replace URL (« Remplacer l’URL ») réécrit, dans toutes les données Elementor, une ancienne adresse par une nouvelle. Il sert dans deux cas : un changement de nom de domaine, et le passage de http:// à https://. Elementor lui-même recommande de sauvegarder la base de données avant de l’utiliser ; saisissez l’ancienne adresse et la nouvelle très exactement, sans barre oblique finale, et complétez avec l’outil de remplacement de votre hébergeur pour les données hors Elementor.

Contrôle de version

Version Control (« Contrôle de version ») permet de revenir à une version précédente d’Elementor (et d’Elementor Pro) si une mise à jour a cassé quelque chose : choisissez la version dans la liste et cliquez sur le bouton de retour en arrière. C’est une solution d’attente, le temps que le correctif arrive ; ne restez pas des mois sur une version ancienne. Le même onglet propose de devenir bêta-testeur : laissez cette option désactivée sur un site en production.

Mode maintenance

Déjà rencontré au chapitre 04, le Mode maintenance affiche un modèle de votre choix à la place du site. Deux modes : Bientôt disponible (Coming Soon), qui laisse les moteurs de recherche visiter le site, pour un lancement ; et Maintenance, qui leur signale une indisponibilité temporaire, pour une intervention de quelques heures. Le réglage « Qui peut accéder » laisse les utilisateurs connectés voir le vrai site pendant les travaux.

Import / Export

Le dernier onglet exporte le site entier — contenu, modèles, Réglages du site, Classes et Variables — sous forme d’un fichier réutilisable, et importe un tel fichier sur un autre site (chapitre 21). C’est aussi une forme de sauvegarde de la construction, mais pas du site complet : les images et la base de données restent à sauvegarder autrement.

À savoir

Deux autres aides se trouvent hors du menu Outils. Le Mode sans échec (Safe Mode) charge l’éditeur sans le thème ni les autres extensions, sans rien changer pour les visiteurs : Elementor le propose de lui-même quand l’éditeur ne parvient pas à s’ouvrir ; si l’éditeur fonctionne en mode sans échec, le coupable est une extension ou le thème. La page Elementor › Éditeur › Système (« Informations système ») résume l’environnement — versions de PHP, WordPress, Elementor, mémoire disponible, thème et extensions actives — et propose de tout copier d’un clic : c’est ce que le support vous demandera en premier.

36.4 — Les douze pannes les plus fréquentes

Le tableau qui suit condense l’expérience de l’assistance : dans la très grande majorité des cas, le problème rencontré figure dans l’une de ces douze lignes. Lisez le symptôme, vérifiez la cause probable, appliquez le remède ; si rien n’y fait, passez à la section 36.5.

Symptôme	Cause probable	Remède
L’éditeur ne se charge pas (roue qui tourne, écran gris)	Extension en conflit, mémoire PHP insuffisante, bloqueur de publicité du navigateur, méthode de chargement de l’éditeur.	Accepter le Mode sans échec proposé ; tester dans un navigateur sans extension ; dans Réglages › Avancé, changer Switch Editor Loader Method ; porter la mémoire à 512 Mo (hébergeur ou ligne `WP_MEMORY_LIMIT` du fichier wp-config.php).
Les modifications ne sont pas visibles sur le site	Cache (extension, hébergeur, navigateur, CDN) ; page enregistrée en brouillon au lieu d’être mise à jour ; mauvaise page ouverte.	Vider tous les caches, recharger en navigation privée ; vérifier que le bouton cliqué était Mettre à jour ; vérifier l’adresse de la page ouverte dans l’éditeur.
Les styles ont disparu, la page est « nue »	Fichiers CSS d’Elementor absents ou périmés (migration, mise à jour, nettoyage de fichiers).	Elementor › Éditeur › Outils › Regénérer le CSS et les données, puis vider le cache.
« Erreur 500 » ou « erreur critique » sur le site	Mémoire PHP insuffisante ou erreur fatale d’une extension ou du thème après mise à jour.	Lire l’e-mail « mode de récupération » envoyé par WordPress ; augmenter la mémoire ; désactiver la dernière extension mise à jour ; Contrôle de version pour revenir en arrière.
Page entièrement blanche	Erreur fatale PHP (thème ou extension), souvent après un changement de version de PHP.	Depuis le gestionnaire de fichiers de l’hébergeur, renommer le dossier de l’extension suspecte dans `wp-content/plugins` ; revenir à la version de PHP précédente le temps de mettre à jour.
Images floues ou pixelisées	Résolution « miniature » ou « moyenne » choisie dans l’élément Image, ou fichier d’origine trop petit.	Élément Image › Résolution : choisir Large ou taille complète ; retéléverser une image d’au moins la largeur d’affichage (chapitre 14).
Mise en page cassée sur mobile seulement	Valeur héritée de la vue ordinateur (largeur en px, padding, direction ligne), élément plus large que l’écran.	Passer en vue mobile, ouvrir la Structure, repérer l’élément fautif, lui donner une valeur propre à cette vue (chapitre 12).
Le formulaire « s’envoie » mais rien n’arrive	Les e-mails de WordPress partent sans authentification et sont rejetés ; parfois clés reCAPTCHA invalides.	Vérifier dans Elementor › Envois si la demande est enregistrée (si oui, seul l’e-mail est en cause) ; installer une extension SMTP ou activer Site Mailer (chapitre 28) ; vérifier les clés dans Réglages › Intégrations.
La police du site n’est pas celle choisie	Google Fonts désactivé dans Réglages › Avancé, fichiers de police personnalisée manquants, ou chargement bloqué par le bandeau de cookies.	Vérifier le réglage Google Fonts ; contrôler les fichiers dans Polices personnalisées ; héberger la police localement ; regénérer le CSS.
Licence Elementor Pro « inactive » ou « expirée »	Abonnement non renouvelé, changement de domaine, nombre de sites du plan dépassé.	Depuis la page de licence du menu Elementor ou le compte my.elementor.com, désactiver l’ancien site puis réactiver ; renouveler si besoin. Le site continue de fonctionner, seules les mises à jour Pro s’arrêtent (chapitre 02).
Les Sections et Colonnes réapparaissent dans le panneau	Éditeur atomique ou conteneurs Flexbox désactivés dans les réglages, souvent après une réinitialisation.	Elementor › Éditeur › Réglages : onglet Éditeur Atomic activé, et dans Fonctionnalités les conteneurs Flexbox actifs (chapitre 11).
Un modèle du Constructeur de thème ne s’applique pas	Conditions d’affichage manquantes ou en conflit, modèle resté en brouillon (point gris), page en mise en page Canevas.	Constructeur de thème › Modifier les conditions ; publier le modèle ; vérifier la mise en page dans les Réglages de page (chapitre 24).

Piège classique

Réinstaller Elementor « pour voir » ou supprimer l’extension depuis l’administration en espérant repartir de zéro. Désinstaller Elementor ne supprime pas les pages, mais elles s’affichent sans mise en page tant qu’il n’est pas réactivé, et certaines options de nettoyage effacent définitivement les données. Avant toute manipulation lourde : sauvegarde, puis les remèdes du tableau, dans l’ordre.

36.5 — Demander de l’aide sans perdre de temps

Quand les remèdes du tableau ont échoué, il reste trois interlocuteurs. L’hébergeur, pour tout ce qui touche au serveur : version de PHP, mémoire, erreurs 500, sauvegardes, certificat https. Le support Elementor, réservé aux détenteurs d’une licence Pro active, joignable depuis le compte my.elementor.com, pour tout ce qui touche à l’éditeur et aux widgets. Et pour la version gratuite, le forum d’assistance de l’extension sur wordpress.org, où répondent des bénévoles et l’équipe Elementor.

Dans les trois cas, un ticket bien rédigé se résout trois fois plus vite. Il contient : ce que vous faisiez quand le problème est apparu (« après la mise à jour d’Elementor Pro 4.2.3 le 3 septembre »), le symptôme exact (le message d’erreur recopié, une capture d’écran), ce que vous avez déjà essayé (regénérer le CSS, mode sans échec), l’adresse d’une page où le problème est visible, et le contenu de la page Elementor › Éditeur › Système collé en fin de message. Ne donnez jamais votre mot de passe dans un ticket ; créez si nécessaire un compte administrateur temporaire que vous supprimerez ensuite.

Un site que l’on sauvegarde chaque mois et dont on connaît les six outils de réparation ne tombe pas en panne : il a des incidents, et ils durent une heure.

Exercice 36.1 — Panne simulée : les styles ont disparu 30 min

Objectif : vivre une panne courante sur le site bac à sable de la Menuiserie Roche et la résoudre méthodiquement, en six étapes, sans réflexe de panique.

Préparez la panne. Sur le site de formation (jamais sur un site en production), demandez à votre formateur de simuler la perte des styles : depuis le gestionnaire de fichiers de l’hébergeur, le dossier wp-content/uploads/elementor/css est renommé. Rechargez la page d’accueil : la mise en page est partie, les textes s’empilent sans couleur ni espacement. C’est exactement ce que voit un client après une migration ratée.
Étape 1 — Isolez le navigateur. Ouvrez la page en navigation privée et sur votre téléphone. Le problème persiste : ce n’est pas un cache de navigateur.
Étape 2 — Videz le cache du site. Extension de cache ou espace hébergeur. Rechargez. Le problème persiste : ce n’est pas un cache serveur.
Étape 3 — Regénérez le CSS. Elementor › Éditeur › Outils › Regénérer le CSS et les données. Videz de nouveau le cache et rechargez : la page est revenue. Notez le temps écoulé depuis l’étape 1.
Étape 4 — Vérifiez la cause. Ouvrez Réglages › Performance et confirmez que la Méthode d’impression CSS est bien « fichier externe » ; regardez dans le gestionnaire de fichiers que le dossier css a été recréé.
Étape 5 — Et si cela n’avait pas suffi ? Écrivez, sans l’exécuter, la suite de la procédure : retour à la version précédente par le Contrôle de version, puis restauration de la sauvegarde du matin.
Étape 6 — Rédigez le ticket. Sur le modèle de la section 36.5, rédigez le message que vous auriez envoyé au support si l’étape 3 avait échoué, en y collant les Informations système.

Résultat attendu : un site remis en état en moins de dix minutes, une compréhension claire de ce que fait « Regénérer le CSS », et un ticket de support complet rédigé à blanc, prêt à servir de modèle le jour où la panne sera réelle.

À retenir

La routine mensuelle tient en six gestes : sauvegarder, mettre à jour dans l’ordre (WordPress, Elementor, Pro, thème, extensions), tester le formulaire, parcourir les pages clés, nettoyer, consigner.
Une sauvegarde est stockée ailleurs que sur le serveur et a été restaurée au moins une fois ; un site de test est un confort, la sauvegarde une obligation.
Les outils de Elementor › Éditeur › Outils règlent l’essentiel : Regénérer le CSS quand un style disparaît, Remplacer l’URL au changement de domaine, Contrôle de version pour revenir en arrière, Mode maintenance pendant les travaux.
Le Mode sans échec dit si l’éditeur est en cause ou si c’est une extension ; les Informations système sont la première pièce d’un ticket de support.
Les douze pannes du tableau couvrent la quasi-totalité des cas : avant de chercher plus loin, lisez la ligne qui correspond au symptôme et appliquez le remède dans l’ordre.