Débuter

Elementor v4 : éléments atomiques, classes et variables, ce qui change

Les nouveaux éléments atomiques, les classes et les variables, la compatibilité avec vos pages existantes et comment activer (ou non) la v4.

Par Gregory, fondateur d’Expertor2 min de lectureMis à jour le

Les menus sont cités tels qu’ils apparaissent dans Elementor en français. Selon votre version et vos réglages de langue, certains libellés restent en anglais (Single Post, Loop Item…).

Illustration : Elementor v4 : éléments atomiques, classes et variables, ce qui change

Elementor déploie la version 4 de son éditeur, construite autour d’éléments dits « atomiques ». Si vous installez Elementor aujourd’hui, vous la verrez probablement dès le départ. Bonne nouvelle : elle ne casse rien, et vous pouvez avancer à votre rythme.

Ce qui change concrètement

  • Une nouvelle famille d’éléments apparaît en haut du panneau, repérable à son icône d’atome et regroupée dans la catégorie « V4 Elements ».
  • Un système de style unique : tous les éléments v4 partagent le même onglet Style, ce qui rend l’interface plus homogène.
  • Des classes : vous définissez un style une fois (par exemple « bouton principal ») et l’appliquez à autant d’éléments que nécessaire.
  • Des variables : couleurs, tailles et polices nommées, réutilisées partout. Modifier la variable met à jour tout le site.
  • Un code plus léger : les éléments atomiques produisent un HTML sans couches superflues, ce qui aide les performances.

Et mes pages existantes ?

D’après Elementor, rien ne change sur les sites existants lors de la mise à jour : vos pages et vos widgets classiques restent tels quels, sans reconstruction. Les éléments v4 et les widgets classiques peuvent être mélangés sur une même page. Quand vous déposez un élément v4, l’éditeur le place automatiquement dans un conteneur classique.

Deux limites à connaître :

  • les classes et variables ne s’appliquent pas aux widgets classiques (Elementor 4.0 permet toutefois de synchroniser les variables de couleur et les classes de typographie vers les couleurs et polices globales classiques) ;
  • certaines fonctions avancées, comme la grille et le Loop, n’existent pas encore en version atomique : on continue d’utiliser les widgets classiques pour cela.

Activer ou désactiver la v4

Sur les nouvelles installations, les fonctions atomiques sont activées par défaut. Sur un site existant (Elementor 3.29 ou plus récent) :

  1. Faites une sauvegarde complète du site.
  2. Dans WordPress, ouvrez Elementor › Editor › Settings.
  3. Ouvrez l’onglet Atomic Editor et cliquez sur Try out the new experience.

Activer la v4 active aussi automatiquement les conteneurs Flexbox, les éléments imbriqués et la nouvelle barre supérieure. Vous pouvez désactiver les fonctions atomiques à tout moment depuis le même onglet.

Faut-il s’y mettre ?

Elementor conseille de démarrer les nouveaux sites avec les éléments v4 et un système de design (classes et variables), en complétant avec des widgets classiques si besoin. Sur un site existant, rien ne presse : vous pouvez introduire les éléments atomiques dans les nouvelles pages ou sections. La v4 n’est pas un abonnement supplémentaire : la version gratuite reste gratuite, et Pro ajoute ses fonctions comme avant.

Pour aller plus loin : passer un site existant à la v4, la méthode sans risque, et classes, variables et composants.