Passer d’Elementor 3.x à l’Atomic Editor 4.0 sans tout casser

Mettre Elementor à jour ne transforme pas tes anciennes pages

Lorsque tu installes Elementor 4.0 sur un site existant, tes pages restent comme elles étaient et tes conteneurs et tes widgets 3.x continuent de fonctionner normalement. Tu peux ensuite activer l’Atomic Editor et utiliser ses nouveaux éléments là où ils t’apportent quelque chose.

Tu peux donc ouvrir une ancienne page, garder sa structure et ajouter un bloc atomique dans une nouvelle section. Pour ton visiteur, rien ne change. Il consulte toujours la même page. De ton côté par contre, tu dois simplement repérer ce qui fonctionne encore avec l’ancien système et ce que tu construis déjà avec le nouveau.

Elementor l’explique dans sa FAQ consacrée à la version 4. Tu n’as pas besoin de reconstruire ton site pour utiliser l’Atomic Editor. Les widgets 3.x et les nouveaux éléments peuvent rester sur une même page.

La mise à jour change la boîte à outils et tes anciennes constructions restent là. À toi de décider de celles qui méritent d’évoluer.

Elementor change la boîte à outils. Il ne range pas automatiquement tous les placards de ton atelier, surtout celui où quelques vis traînent depuis 2022.

Ce que l’Atomic Editor va changer dans ta façon de travailler

Dans Elementor 3.x, tu peux avoir deux boutons qui se ressemblent mais qui ne partagent pas vraiment les mêmes réglages. L’un utilise une couleur globale, l’autre une valeur ajoutée directement dans le widget. Le troisième possède encore un padding différent sur mobile. Tu ne le vois pas tant que tu ne touches à rien mais dès que tu veux modifier la charte, tu dois rouvrir les pages une par une.

L’Atomic Editor te pousse à travailler autrement. Tu définis d’abord les règles communes, puis tu les appliques aux éléments concernés.

• Les Variables regroupent les couleurs, les polices et les tailles que tu réutilises.
• Les Classes portent les styles de tes boutons, de tes cartes ou de tes sections.
• Les Components te permettent de réutiliser une même structure tout en gardant certains contenus modifiables.
• Les réglages responsive peuvent être adaptés selon l’écran sur toutes les propriétés de style.
• Les éléments atomiques utilisent une structure HTML plus simple, avec moins de couches inutiles.

Maintenant imagine que tu veuilles modifier la couleur de tous tes boutons principaux. Avec une classe bien utilisée, tu changes la règle une fois et les boutons suivent. Ils restent de la même famille sans devoir porter exactement la même tenue.

Tu ne pars plus à la chasse au vieux bleu oublié dans une page service, comme cette chaussette solitaire qui ressort toujours après la lessive.

Si tu veux d’abord comprendre la logique des variables et des classes, commence par ce guide sur le design system Elementor avec Editor V4. Tu comprendras plus facilement ce que tu dois préparer avant de commencer à reprendre tes pages.

Fais tes premiers essais sur une copie du site

Tu peux utiliser l’Atomic Editor sur un site en production. Cela ne veut pas dire que je te conseille d’y faire tes premiers essais. Ton installation possède son propre mélange de thème, d’Elementor Pro (lien affilié), d’add-ons, de cache et parfois de CSS ajouté au fil des années. C’est ce mélange que tu dois tester.

La production, ce n’est pas une éprouvette de laboratoire.

Commence par faire une sauvegarde complète des fichiers et de la base de données et vérifie aussi que tu sais la restaurer.

Le jour où un bouton disparaît après une mise à jour, ce n’est pas le meilleur moment pour découvrir le fonctionnement de ta sauvegarde.

Prépare ensuite un site de test protégé et non indexable sur lequel tu vas pouvoir travailler sans montrer tes essais aux visiteurs.

• Mets WordPress, Elementor et Elementor Pro à jour.
• Mets aussi à jour le thème, les add-ons et les extensions de cache.
• Vide les caches avant de comparer les pages.
• Ouvre Elementor > Editor > Réglages > Atomic Editor et active la nouvelle expérience.
• Parcours ensuite les pages importantes sans les modifier pour vérifier que l’existant fonctionne toujours.

Ne prends pas tout de suite ta page qui génère l’essentiel de tes demandes. Choisis une page représentative mais peu risquée, avec un titre, du texte, une image, un bouton, une grille et une version mobile. Elle doit être assez complète pour comprendre les difficultés, mais pas assez sensible pour bloquer ton activité si tu dois recommencer.

Regarde ce que ton site utilise vraiment

Avant de commencer à reconstruire un bloc, tu dois savoir de quoi il dépend. Sinon, tu risques de reproduire la même accumulation dans un éditeur plus récent.

Commence par ouvrir tes modèles et tes pages principales. Note les headers, les footers, les modèles d’articles, les archives et les éventuels modèles WooCommerce. Repère aussi les anciennes sections, les widgets Elementor Pro et ceux qui viennent d’une extension.

Continus avec les fonctions qui ne doivent pas cesser de fonctionner. Je pense aux formulaires, aux popups, aux boucles, aux champs dynamiques et aux conditions d’affichage. Enfin termine par les couleurs globales, les polices, les classes CSS et le code personnalisé ajouté dans Elementor ou dans ton thème enfant.

Inutile de créer un inventaire de trente pages, un tableau simple suffit. Pour chaque page importante, indique ce qu’elle utilise, le trafic ou les demandes qu’elle apporte et les éléments qui pourraient poser problème.

Sans cet inventaire, tu risques de construire un nouveau tiroir très propre pour y remettre exactement le même sac de câbles emmêlés.

Tu devrais voir alors trois cas se dessiner. Certaines pages peuvent rester en 3.x parce qu’elles fonctionnent et changent rarement. D’autres pourront accueillir de nouveaux blocs atomiques lors de leur prochaine modification. Certaines pages plus lourdes ou moins cohérentes mériteront peut-être une reconstruction complète.

Si tu trouves des anciennes sections, des widgets oubliés et plusieurs extensions qui font presque la même chose, prends le temps de décider s’il vaut mieux optimiser ou refaire ton vieux site Elementor. L’Atomic Editor t’aidera à repartir plus proprement, mais il ne fera pas le tri à ta place.

Prépare tes variables et tes classes avant les nouvelles pages

Commence par ce que tu répètes vraiment sur ton site. Dans le Variables Manager, reprends ta couleur principale, ton accent, la couleur du texte, les fonds et les quelques couleurs réellement utiles. Ajoute ensuite tes polices et tes tailles de référence. Donne-leur des noms qui expliquent leur rôle. Le nom « couleur action » restera compréhensible même si ton orange devient bleu lors d’une prochaine refonte de ton site.

Des variables mal nommées ressemblent à des bocaux sans étiquette. Tu crois prendre le sucre et tu verses le sel.

Ensuite crée les classes dont tu as besoin pour ton bouton principal, ton bouton secondaire, une section standard, un texte d’introduction et une carte simple. Applique-les sur une page de test, puis vérifie les états au survol, le focus au clavier et l’affichage sur mobile.

Elementor 4.0 peut envoyer certaines valeurs V4 vers l’ancien système. Une variable de couleur peut ainsi alimenter une couleur globale V3. Une classe typographique peut aussi être synchronisée avec une police globale héritée. Cette passerelle t’aide à garder la même identité pendant la transition.

Attention le chemin inverse n’est pas automatique. Tes anciennes couleurs et tes anciens réglages ne deviennent pas tout seuls des variables ou des classes atomiques. Tu dois choisir les valeurs que tu veux conserver, retirer les doublons et reconstruire une base claire.

Cela demande un peu de préparation mais tu y gagneras ensuite du temps chaque fois que tu modifieras un bouton, un titre ou une couleur sur plusieurs pages.

Migre une page pilote sans effacer l’originale

Il faut toujours être prudent, commence par dupliquer la page que tu as choisi de migrer sur ton site de test et garde l’ancienne version comme point de comparaison. Ne cherche pas à convertir chaque widget en reproduisant exactement la même arborescence, mais commence par regarder ce que chaque section doit accomplir.

Une page pilote ce n’est pas un concours de calque parfait.

Ton bloc présente peut-être une offre, une preuve ou un appel à l’action. Une fois son rôle identifié, reconstruis sa structure avec un conteneur Flex ou Grid adapté. Utilise les éléments atomiques disponibles en appliquant tes classes et garde les réglages locaux pour de vrais cas particuliers.

Travaille dans cet ordre.

1. Identifie le rôle du bloc.
2. Simplifie sa structure.
3. Choisis les éléments atomiques utiles.
4.  Applique les variables et les classes déjà préparées.
5. Ajoute seulement les réglages propres à ce bloc.
6. Compare le résultat sur ordinateur, tablette et mobile.

Un bouton n’a pas besoin de conserver quinze anciens réglages si sa classe globale en couvre déjà treize. Une grille de cartes n’a pas besoin de quatre conteneurs imbriqués lorsqu’une Grid gère directement les colonnes.

Tu peux garder un widget 3.x s’il n’a pas encore d’équivalent adapté ou si sa reconstruction ne t’apporte rien. Tu dois simplement éviter de mélanger plusieurs méthodes dans un même composant. Un titre atomique piloté par une classe, un bouton 3.x réglé à la main et plusieurs espacements corrigés en CSS deviendront vite difficiles à reprendre par la suite.

Vérifie les fonctions qui font travailler ton site

Une image ou un paragraphe se contrôle rapidement. Un formulaire, une boucle ou une popup peut sembler correct tout en ne faisant plus son travail.

Teste réellement les formulaires

Envoie réellement un message avec une adresse de test. Vérifie l’e-mail que tu as reçu, le message de confirmation, l’antispam, le consentement et la redirection éventuelle. Si le formulaire alimente un CRM ou une liste d’abonnés, contrôle aussi l’arrivée de la donnée dans l’outil concerné.

Un magnifique formulaire qui n’envoie rien ressemble à une sonnette neuve qui n’est pas reliée à la porte.

Compare les boucles avec les mêmes contenus

Depuis Elementor 4.2, Grid et Atomic Loop offrent davantage de possibilités dans le nouvel éditeur. Tu n’es pas obligé de remplacer immédiatement une boucle qui fonctionne. Reproduis-la d’abord avec les mêmes articles ou produits. Vérifie les filtres, la pagination, les champs dynamiques et l’affichage lorsqu’aucun résultat n’est disponible.

Garde les modèles globaux pour la suite

Un header, un footer ou une popup s’affiche souvent sur plusieurs pages. Attends d’avoir validé ta méthode sur la page pilote avant d’y toucher. Tu contrôleras ensuite les conditions d’affichage, la fermeture au clavier, le comportement mobile et les éventuels décalages de mise en page.

Le header, c’est la porte d’entrée du site. Évite de la démonter pendant que les visiteurs sonnent.

Contrôle les extensions et ton CSS personnalisé

Les widgets tiers peuvent continuer de fonctionner comme des éléments hérités. Ils ne profitent pas pour autant des classes et des variables de la V4. Tu dois vérifier leur compatibilité auprès de leur éditeur avant de les reconstruire.

Pense aussi à regarder ton CSS personnalisé. Si une règle cible une classe générée par Elementor, elle peut ne plus correspondre à la nouvelle structure. Tu peux même parfois la supprimer parce que l’Atomic Editor te propose le réglage dont tu avais besoin.

Un vieux correctif CSS peut rendre service, mais il ne doit pas devenir un pansement qu’on garde par habitude.

Compare l’ancienne page et la nouvelle

Il ne faut pas te contenter de regarder la page sur ton ordinateur en te disant qu’elle semble correcte. Ouvre l’ancienne et la nouvelle version, et vérifie les mêmes points dans le même ordre.

Une mise en page très sage sur ordinateur peut se mettre au yoga dès qu’elle arrive sur mobile.

Contrôle	Ce que tu vérifies	Signal d’alerte
Contenu	Titres, textes, liens, images et données dynamiques	Un bloc manque ou une valeur n’est plus alimentée
Responsive	Ordinateur, tablette, mobile et orientations utiles	Débordement, ordre incohérent ou texte trop petit
Interactions	Menus, accordéons, onglets, popups et formulaires	Clic sans réponse ou navigation clavier bloquée
SEO	H1, niveaux de titres, URL, canonique, données structurées	Changement d’URL ou balisage perdu
Accessibilité	Focus visible, contraste, labels, textes alternatifs	Action inaccessible au clavier ou champ sans nom
Performance	DOM, poids, LCP, CLS et INP dans les mêmes conditions	Nouvelle page plus lourde sans bénéfice réel

Fais aussi ce test sans être connecté à WordPress et sur plusieurs navigateurs différents. Vide les caches, régénère les fichiers CSS si nécessaire et regarde si la console du navigateur affiche des erreurs.

Si tu utilises beaucoup d’animations sur ta page, ne les recopie pas toutes par habitude. Profite de la migration pour garder celles qui aident vraiment ton visiteur. Mon article sur les patterns Elementor qui préservent l’INP t’aidera à faire le tri.

Mets les pages en ligne par petits groupes

Quand la page pilote fonctionne sur les principaux écrans et que tous les tests sont passés, tu peux préparer un premier groupe de pages similaires. Commence par exemple par deux pages de services, puis poursuis avec quelques contenus éditoriaux et garde les modèles globaux et les fonctions sensibles pour la suite.

On ne refait pas le toit, l’électricité et la cuisine le même jour si l’on veut encore dormir dans la maison le soir.

Ne profite pas de cette migration pour changer en même temps le thème, la navigation et toute la structure SEO. Si un problème apparaît, tu dois pouvoir retrouver rapidement ce qui l’a provoqué.

Quand tu es prêt, sauvegarde le site et met en ligne la copie updatée. Contrôle immédiatement les formulaires, les menus et les pages qui doivent générer un contact, après tu surveilles les erreurs, les performances et les conversions.

Garde sous la main l’ancienne version du site tant que la nouvelle n’est pas totalement validée. Tu pourras revenir en arrière rapidement si un problème apparaît.

Tu peux encore garder certaines zones en 3.x

Tu peux attendre lorsqu’un widget important n’a pas encore d’équivalent satisfaisant, qu’une extension métier n’est pas prête ou qu’une campagne ne peut pas être interrompue.

On ne remplace pas un fauteuil confortable simplement parce qu’un nouveau catalogue vient d’arriver.

Cela ne t’empêche pas d’utiliser l’Atomic Editor ailleurs. Tu peux déjà construire les nouvelles pages en V4, poser ton design system et remplacer les composants qui deviennent plus simples à maintenir.

Note bien les zones qui restent en 3.x et la raison de ton choix. Tu sauras ainsi ce qui devra être réévalué lors de la prochaine évolution.

En conclusion

Tu n’as pas besoin de reconstruire tout ton site pour passer à l’Atomic Editor 4.0. Sur un site de staging pose tes variables et tes classes, puis commence par une page pilote.

Garde les widgets 3.x qui font encore leur travail et reconstruis progressivement les pages qui gagneront vraiment en cohérence et en simplicité. Si tu veux définir cet ordre sans mettre ton site en production à l’épreuve, tu peux me contacter pour préparer la migration avec moi.