Avec la version 4, Elementor change de philosophie. Fini les dizaines de réglages propres à chaque widget : le nouvel éditeur s'appuie sur des éléments « atomiques », des classes réutilisables et des variables, exactement comme on travaille en CSS.
Chez Alpixi, nous construisons déjà nos nouveaux sites avec Elementor V4. Voici le guide que nous aurions aimé avoir au départ : ce qui change, comment l'activer, et s'il faut migrer vos sites existants.
Elementor V4 en bref
- Une version stable depuis Elementor 4.0, sortie fin mars 2026, après une phase de test lancée en 2025.
- Des éléments atomiques : chaque élément produit une seule balise HTML, sans couches inutiles.
- Un onglet Style unique, identique pour tous les éléments et pensé comme du CSS.
- Des classes et des variables pour définir votre charte une fois et l'appliquer partout.
- Compatible avec V3 : vos anciens widgets continuent de fonctionner, sur la même page.
Elementor V4, qu'est-ce que c'est ?
Elementor V4 est la nouvelle génération de l'éditeur Elementor. Son principe tient en un mot : CSS-first. Au lieu de réglages différents pour chaque widget, tous les éléments se stylent avec les mêmes propriétés que le CSS (mise en page, marges, typographie, bordures), réunies dans un seul onglet Style.
Ces propriétés peuvent être enregistrées dans des classes réutilisables, et les valeurs de votre charte (couleurs, polices, tailles) dans des variables. C'est la logique d'un vrai système de design, directement dans l'éditeur visuel.
Les grandes étapes de V4
2025
Version de test
Les premiers éléments atomiques, les classes et les variables arrivent en test, à activer manuellement.
Janvier 2026
Elementor 3.34
Onglets atomiques et premières interactions d'entrée : fondu, glissement et zoom, au chargement ou au défilement.
Mars 2026
Elementor 4.0
La version stable : formulaires atomiques, interactions avancées, composants, vidéo et synchronisation avec les couleurs globales V3.
Juillet 2026
Elementor 4.2
Grilles CSS atomiques et boucles dynamiques pour afficher articles et produits, avec une pagination Ajax.
Septembre 2026
Elementor 4.3
Accordéon atomique avec schéma FAQ, vidéo d'arrière-plan, styles par défaut des balises HTML et connecteur MCP officiel pour l'IA.
À venir
La suite
Carrousel atomique, bibliothèque d'icônes SVG et variantes de composants sont annoncés sur la feuille de route d'Elementor.
Ce qui change concrètement par rapport à V3
En V3, un simple titre placé dans une section est enveloppé dans une succession de balises div, et chaque widget a sa propre interface de réglages. En V4, tout est plus direct.
Code
Un HTML plus léger
Un titre devient une vraie balise h2, un paragraphe une balise p. Moins de balises, c'est une page plus légère et un code plus clair pour Google et les lecteurs d'écran.
Interface
Un onglet Style unique
Mise en page, espacement, taille, position, typographie, fond, bordure et effets : les mêmes sections pour tous les éléments, avec une valeur possible par appareil.
Méthode
Des styles réutilisables
On ne règle plus chaque bouton un par un : on crée une classe, on l'applique, et chaque modification se répercute partout.
Les éléments atomiques disponibles : Div Block, Flexbox, Grille, Titre, Paragraphe, Image, SVG, Bouton, Séparateur, YouTube, Vidéo, Vidéo d'arrière-plan, Onglets, Accordéon, Formulaire et Boucle. Pour le reste, les widgets V3 sont toujours là.
Les classes globales : styler une fois, appliquer partout
Une classe regroupe un ensemble de propriétés de style sous un nom, par exemple .carte-service. Appliquez-la à trois cartes, modifiez-la une seule fois : les trois cartes changent en même temps.
- Plusieurs classes par élément : une classe pour la structure, une autre pour la couleur, comme en CSS.
- Un ordre de priorité : quand deux classes définissent la même propriété, celle placée en premier dans le gestionnaire de classes l'emporte.
- Des styles locaux restent possibles pour une exception, sans toucher à la classe.
- Des états : survol, focus et actif se règlent directement dans la classe.
- Import et export : classes et variables voyagent avec vos modèles, d'un site de préproduction au site en ligne.
Notre conseil : nommez vos classes selon leur rôle (bouton-principal, carte-service, titre-section) plutôt que selon leur apparence (bouton-rose). Le jour où la charte change, le nom reste juste.
Les variables : votre charte graphique centralisée
Les variables stockent les valeurs de votre identité visuelle : couleurs, polices et tailles. Les classes et les éléments y font référence au lieu d'utiliser une valeur fixe. Changez la couleur d'une variable, et tout le site suit.
- Couleurs : votre couleur principale, vos fonds, la couleur du texte.
- Polices : la typographie des titres et celle du texte courant.
- Tailles : espacements, marges de section ou tailles de police, y compris des valeurs fluides avec clamp().
- Un pont avec V3 : depuis la version 4.0, les variables de couleur peuvent se synchroniser avec les couleurs globales V3, pour que vos anciens widgets suivent aussi.
Exemple : sur notre site, une seule variable fluide règle l'espacement vertical de toutes les sections, de 50 px sur mobile à 100 px sur grand écran. Un réglage, et tout le rythme de la page change.
États, responsive et styles par défaut
- États : survol, focus et actif se règlent pour chaque élément ou chaque classe, sans une ligne de code.
- Responsive : chaque propriété peut avoir une valeur différente par appareil, de l'ordinateur au mobile.
- Styles par défaut : depuis la version 4.3, vous définissez une fois le style des balises h1 à h6, p, div ou button pour tout le site.
- Balises sémantiques : un conteneur peut devenir section, article, header, footer, nav ou main. C'est meilleur pour l'accessibilité et pour le référencement.
Interactions, composants, formulaires et boucles
Plusieurs briques avancées complètent l'éditeur. La plupart sont réservées à Elementor Pro.
Pro
Composants
Une section réutilisable et synchronisée : modifiez le composant, toutes ses copies se mettent à jour. Certaines propriétés restent modifiables à chaque utilisation, comme un titre ou une image.
Gratuit et Pro
Interactions
Animations d'entrée au chargement ou au défilement dans la version gratuite. Avec Pro : survol, clic, animations liées au défilement et effets personnalisés.
Pro
Formulaires atomiques
Chaque champ est un élément à part entière, que vous placez et stylez librement. Depuis la version 4.2, un formulaire peut envoyer deux e-mails différents.
Pro
Boucles
Les boucles atomiques affichent vos articles ou vos produits, avec une pagination classique ou en Ajax. La grille CSS atomique, elle, est disponible pour tous.
Comment activer Elementor V4
Sur une nouvelle installation, V4 est activé par défaut. Sur un site existant, la mise à jour ne change rien tant que vous n'activez pas les éléments atomiques.
En 4 étapes
- Faites une sauvegarde complète du site, et testez si possible sur une copie de préproduction.
- Mettez à jour Elementor et Elementor Pro en même temps, vers des versions compatibles.
- Ouvrez les réglages de l'éditeur Elementor dans WordPress, rubrique Atomic Editor, puis activez les éléments atomiques. Vous pouvez aussi passer par la notification affichée dans le panneau des éléments.
- Les nouveaux éléments apparaissent dans le panneau, à côté des widgets V3.
Attention : à la sortie de la version 4.3, des sites ont affiché une erreur bloquante parce qu'Elementor était passé en 4.x alors qu'Elementor Pro était resté en 3.x. Mettez toujours les deux à jour ensemble.
V3 ou V4 : faut-il migrer vos sites ?
Rien ne vous y oblige : vos pages V3 restent intactes, et les deux systèmes cohabitent sur la même page. Notre recommandation dépend du projet.
Nouveau site
Partez sur V4
Posez d'abord vos variables et vos classes, puis construisez. Vous gagnez un code plus propre et une charte facile à faire évoluer.
Site existant
Gardez V3
Inutile de tout reconstruire. Utilisez V4 pour les nouvelles pages ou les nouvelles sections, au fil des évolutions.
Refonte
Profitez-en
Une refonte est le bon moment pour passer à V4 et remettre à plat votre système de design.
Ce qui manque encore : le carrousel et la galerie n'existent pas encore en version atomique, le texte enrichi reste limité, et les extensions tierces (packs de widgets, JetEngine) s'adaptent progressivement. Pour ces besoins, les widgets V3 restent à portée de main, et un widget HTML suffit pour intégrer du code sur mesure.
Nos conseils pour bien démarrer
- Commencez par le système de design : couleurs, polices et espacements en variables, avant le premier bloc.
- Créez peu de classes, mais bien nommées, et réutilisez-les partout.
- Gardez les styles locaux pour les exceptions : s'ils se multiplient, c'est qu'il manque une classe.
- Utilisez les bonnes balises : un seul h1 par page, des h2 pour les sections, section et nav pour la structure.
- Testez sur une copie du site avant chaque mise à jour majeure.
- Profitez de l'IA : le connecteur MCP officiel, arrivé avec la version 4.3, permet de construire des mises en page atomiques depuis un assistant comme Claude.
Questions fréquentes
Elementor V4 est-il gratuit ?
Oui pour l'essentiel. Les éléments atomiques, les classes, les variables et les états sont inclus dans la version gratuite. Les composants, les formulaires atomiques, les boucles et les interactions avancées demandent Elementor Pro.
Mes pages V3 vont-elles changer à la mise à jour ?
Non. La mise à jour vers la version 4 ne modifie pas vos pages existantes. Sur un site déjà en ligne, les éléments atomiques s'activent manuellement, et les widgets V3 continuent de fonctionner.
Peut-on mélanger widgets V3 et éléments V4 ?
Oui, les deux cohabitent sur une même page. C'est même la meilleure façon d'adopter V4 progressivement, section après section.
Faut-il savoir coder pour utiliser V4 ?
Non, tout se règle visuellement. Connaître les bases du CSS (flexbox, marges, unités) aide toutefois à comprendre la logique de l'éditeur et à aller plus vite.
Elementor V4 rend-il un site plus rapide ?
Le code généré est plus léger, avec moins de balises inutiles, ce qui aide les performances. La vitesse dépend aussi de vos images, de votre hébergement et de vos extensions.
Mes add-ons Elementor fonctionnent-ils avec V4 ?
Les widgets de vos add-ons restent utilisables, comme tous les widgets V3. En revanche, ils ne profitent pas des classes et des variables tant que leurs éditeurs ne les ont pas adaptés.
Pour aller plus loin
Un projet en tête ?
Parlons de votre prochain site web
Site vitrine, refonte, identité visuelle ou référencement : Alpixi accompagne les entreprises des Alpes et d'ailleurs, avec un interlocuteur unique du premier échange à la mise en ligne.
★★★★★
Noté 5/5 par nos clients sur Google
Contact direct
Agence basée à Autrans-Méaudre en Vercors