Elementor V4 : les 5 changements qui changent tout

Temps de lecture : 12 minutes

Si vous construisez des sites WordPress avec Elementor, vous avez probablement suivi l’évolution de l’éditeur V4. Après une phase Alpha, V4 est officiellement passé en Beta en janvier 2026 (Elementor 3.35) et est désormais prêt pour la production. Ce n’est plus expérimental. C’est stable, utilisable sur de vrais sites, et c’est la dernière étape avant la version 4.0 — celle où V4 deviendra l’expérience par défaut pour tous les nouveaux sites.

Cet article n’est pas un changelog. Vous ne trouverez pas ici une liste de petites améliorations cosmétiques. Ce que je vais vous présenter, ce sont les 5 changements fondamentaux qui transforment la manière dont on construit un site avec Elementor — et pourquoi V4 n’est pas une simple mise à jour, mais un changement de paradigme.

Avant de commencer : comment activer V4

V4 coexiste avec l’éditeur 3.x. Vous pouvez utiliser les deux sur une même page — les widgets V3 fonctionnent aux côtés des éléments V4 sans conflit. Zéro risque pour vos projets existants.

Pour l’activer :

1. Mettez à jour Elementor vers la version 3.35 ou supérieure
2. Allez dans WordPress Admin > Elementor > Editor > Settings
3. Cliquez sur l’onglet Editor V4
4. Sélectionnez Activate the new experience
5. Cochez la case d’acceptation
6. Cliquez sur Activate

V4 est disponible pour tous : Free, Pro et One.

À l’activation, les Nested Elements, la Top Bar et les Containers s’activent automatiquement. Vous pouvez les désactiver individuellement si besoin.

Changement n°1 : les classes CSS — le plus gros tournant

C’est LE changement majeur. Celui qui à lui seul justifie le passage à V4.

Ce qui existait en V3

En V3, vous styliez chaque élément individuellement. Vous vouliez que tous vos titres H2 aient la même apparence ? Vous configuriez manuellement chaque widget Heading. Ou vous utilisiez les Global Fonts et Global Colors — un système utile mais limité.

Le résultat : du CSS redondant, des incohérences inévitables dès qu’un site dépasse 10 pages, et un cauchemar de maintenance.

Ce que V4 apporte

V4 repose sur une nouvelle architecture qu’Elementor appelle l’approche « Atomic ». Le principe : séparer clairement la structure, le styling et le contenu. Au lieu de manipuler des widgets préconfigurés, vous composez vos pages à partir de blocs élémentaires (containers, textes, liens, images) que vous assemblez librement.

Au cœur de cette approche, le système de classes CSS. Concrètement :

• Chaque élément a une classe locale (local class) créée automatiquement. C’est le style propre à cet élément précis.
• Vous pouvez créer des classes globales réutilisables sur l’ensemble du site.
• Vous pouvez convertir une classe locale en classe globale en deux clics.

Exemple concret : vous designez un bouton d’appel à l’action. Couleur, typographie, padding, border-radius — tout est configuré. Au lieu de refaire ce travail sur chaque page, vous convertissez la classe locale en classe globale cta_button. Désormais, chaque nouveau bouton reçoit cette classe et hérite de tous les styles. Vous modifiez la classe une fois, tous les boutons du site se mettent à jour.

La hiérarchie de priorité

Quand plusieurs classes se contredisent sur un même élément, V4 applique une règle simple :

1. La classe locale gagne toujours — elle a la priorité maximale
2. Les classes globales s’appliquent dans leur ordre d’ajout

Cette hiérarchie est prévisible et logique. Pas de surprises.

Le Class Manager

V4 ajoute un outil centralisé pour gérer toutes vos classes : le Class Manager. Depuis un seul endroit, vous pouvez renommer, supprimer, réorganiser et filtrer vos classes. C’est la tour de contrôle de votre design system.

Pourquoi c’est un game changer

Si vous avez déjà utilisé Webflow, vous reconnaissez ce système. C’est exactement le même principe : styler par classes plutôt que par styles inline. La différence, c’est que maintenant vous pouvez le faire dans WordPress, avec tout l’écosystème de plugins que cela implique.

Pour ceux qui travaillent avec des conventions de nommage comme Client-First (initialement conçu pour Webflow), V4 rend enfin possible leur application dans Elementor. Utility classes, custom classes, combo classes — tout devient faisable.

Mon conseil : avant de créer votre première page en V4, posez votre système de classes. Définissez vos conventions de nommage. Un site bien structuré par classes sera 10 fois plus facile à maintenir qu’un site stylé élément par élément.

Changement n°2 : les Components — la fin du copier-coller

Le problème en V3

V3 proposait deux options pour réutiliser des blocs de design :

• Les Templates : une copie statique. Vous modifiez l’original, les copies ne bougent pas.
• Les Global Widgets : synchronisés, mais impossibles à personnaliser par instance. Si votre CTA a le même design partout mais un texte différent sur chaque page, les Global Widgets ne servaient à rien.

Ce que V4 apporte

Les Components combinent le meilleur des deux mondes :

Système	Synchronisation globale	Personnalisation par instance
Templates	Non	Oui
Global Widgets	Oui	Non
Components	Oui	Oui

Un Component est un bloc de design synchronisé sur tout le site, mais dont certains éléments sont personnalisables par instance grâce aux Properties.

Comment ça fonctionne

1. Vous construisez votre bloc (par exemple un CTA avec un titre, une image, un texte et un bouton)
2. Clic droit sur le container > Create component
3. En mode édition, vous désignez quels champs sont personnalisables (le titre, le texte du bouton, l’image…)
4. Vous publiez

Désormais, sur chaque page où vous placez ce component :

• Le design reste synchronisé (vous modifiez le master, toutes les instances se mettent à jour)
• Le contenu est personnalisable (chaque page peut avoir son propre titre, sa propre image)

[CAPTURE : Screenshot du mode édition d’un Component, montrant l’icône Properties à côté d’un champ texte, avec la page assombrie en arrière-plan]

L’organisation par Properties

Les Properties peuvent être regroupées pour rester lisibles. Vous créez des groupes logiques (« Contenu principal », « Configuration du bouton », « Image ») et assignez chaque property à un groupe.

Mon conseil : utilisez les Components uniquement pour les blocs qui apparaissent réellement sur plusieurs pages. Un header, un CTA récurrent, une carte de témoignage. Ne transformez pas tout en component — ça alourdirait votre gestion sans bénéfice.

Changement n°3 : les Variables — un cran au-dessus des Global Settings

Ce qui existait déjà

Elementor proposait déjà les Global Colors et Global Fonts. Vous définissiez vos couleurs et polices une fois, puis vous les sélectionniez dans chaque élément. C’était déjà bien.

Ce que V4 ajoute

Les Variables vont plus loin. Ce sont des alias que vous définissez et qui se propagent partout automatiquement.

Trois types de variables sont disponibles :

Type	Disponibilité
Font family	Free et Pro
Text color	Free et Pro
Text size	Pro uniquement

La différence avec les Global Settings

Les Global Colors vous permettent de choisir une couleur dans une liste. Les Variables font la même chose, mais avec une couche d’abstraction supplémentaire : vous nommez la variable selon son rôle, pas selon sa valeur.

Exemple :

• Global Color : « Bleu #2563EB » → vous savez quelle couleur c’est, mais pas où l’utiliser
• Variable : « Primary_action_color » = #2563EB → vous savez exactement son rôle dans votre design system

Variables + Classes = puissance maximale

Là où ça devient redoutable, c’est quand vous intégrez des variables dans vos classes. Vous créez une classe cta_button qui utilise la variable Primary_action_color pour le background. Le jour où votre client change sa charte graphique, vous modifiez une seule variable et tous les boutons CTA du site entier changent de couleur instantanément.

[CAPTURE : Screenshot montrant l’icône variable à côté du champ Font family dans l’onglet Style > Typography, avec le popup de création de variable]

Mon conseil : nommez vos variables par leur fonction, jamais par leur valeur. Heading_font plutôt que Montserrat. Brand_primary plutôt que Bleu. Le jour où la valeur change, le nom reste pertinent.

Changement n°4 : les Interactions — des animations sans une ligne de code

L’état des lieux en V3

En V3, les animations d’entrée existaient mais restaient basiques. Pour faire quelque chose de sophistiqué, il fallait du CSS custom ou un plugin tiers.

Ce que V4 propose

V4 introduit les Interactions : un système d’animations JavaScript configurable visuellement.

Deux déclencheurs :

• Page Load : l’animation se lance au chargement de la page
• Scroll into view : l’animation se lance quand l’élément entre dans le viewport

Trois effets :

• Fade : apparition/disparition en fondu
• Slide : entrée/sortie par glissement
• Scale : agrandissement/rétrécissement

Pour chaque interaction, vous configurez :

• La direction (haut, bas, gauche, droite)
• La durée en millisecondes
• Le délai avant déclenchement

L’empilage d’interactions

Le plus intéressant : vous pouvez combiner plusieurs interactions sur un même élément. Un Slide depuis la gauche + un Fade simultané = un effet d’entrée en glissement avec fondu. Sans écrire une seule ligne de CSS ou de JavaScript.

[CAPTURE : Screenshot de l’onglet Interactions avec deux interactions empilées sur un même élément — un Slide et un Fade — avec les contrôles de durée et délai]

Mon conseil : la sobriété. Un fade de 400ms au scroll est élégant. Trois animations empilées sur chaque élément de la page, c’est un sapin de Noël. Utilisez les interactions pour guider l’œil, pas pour impressionner.

Changement n°5 : l’éditeur repensé — General + Style

Ce cinquième changement est moins spectaculaire que les autres, mais il affecte chaque minute de votre travail dans Elementor.

La confusion de V3

En V3, chaque widget avait ses propres onglets : Content, Style, Advanced. Le contenu de ces onglets variait d’un widget à l’autre. Un bouton n’avait pas les mêmes options qu’un titre, qui n’avait pas les mêmes options qu’une image. Chaque widget était un cas particulier.

La logique de V4

V4 standardise l’interface en deux onglets :

Onglet	Contenu	Varie selon l’élément ?
General	Options spécifiques : texte, liens, contenu, attributs	Oui
Style	Styling : typographie, couleurs, backgrounds, spacing + champ Classes	Non — identique pour tous

Cette uniformisation a un impact direct sur votre productivité : une fois que vous maîtrisez l’onglet Style d’un élément, vous le maîtrisez pour tous les éléments. Plus besoin de chercher où se trouve telle option dans tel widget.

[CAPTURE : Comparaison côte à côte — à gauche un widget V3 avec les onglets Content/Style/Advanced, à droite un élément V4 avec General/Style]

L’Inline Editing — éditer directement sur le canvas

Nouveauté arrivée avec la Beta : l’Inline Editing. Pour les éléments Atomic Heading et Paragraph, vous pouvez désormais cliquer directement sur le texte dans le canvas et le modifier sur place — sans passer par le panneau latéral.

Une barre d’outils flottante apparaît avec les options de formatage essentielles. Les modifications se synchronisent en temps réel avec le panneau. C’est un détail, mais sur une journée de travail, le gain de temps est considérable : moins d’allers-retours entre le canvas et le panneau, plus de fluidité dans la création.

[CAPTURE : Screenshot de l’Inline Editing — un texte en cours d’édition directement sur le canvas avec la barre d’outils flottante visible]

Le responsive repensé

V4 améliore également le responsive. En V3, les options de personnalisation par taille d’écran étaient limitées et dispersées. En V4, toutes les options de style sont personnalisables par écran, avec un héritage automatique du plus grand au plus petit.

Vous définissez le style desktop, puis vous n’ajustez que ce qui doit changer en tablette et en mobile. Tout le reste s’hérite automatiquement.

[CAPTURE : Screenshot de la top bar V4 montrant les icônes Desktop/Tablet/Mobile pour basculer entre les vues responsive]

Récapitulatif : V3 vs V4

Aspect	V3	V4
Styling	Élément par élément	Par classes réutilisables
Blocs réutilisables	Templates (pas syncés) ou Global Widgets (pas personnalisables)	Components (syncés ET personnalisables)
Cohérence des valeurs	Global Colors/Fonts	Variables nommées par rôle
Animations	Basiques, CSS custom nécessaire	Interactions empilables, sans code
Interface	3 onglets, différents par widget	2 onglets, Style standardisé
Édition de texte	Via le panneau latéral uniquement	Inline Editing directement sur le canvas
Responsive	Options limitées	Toutes les options, héritage automatique
Statut	Version stable actuelle	Beta prête pour la production (v3.35+)

Par où commencer ?

Depuis janvier 2026, V4 est en Beta et prêt pour la production. Si vous ne l’avez pas encore activé, voici l’ordre que je recommande :

1. Mettez à jour vers Elementor 3.35 et activez V4 — c’est désormais safe pour vos vrais sites
2. Définissez vos variables : polices, couleurs principales, tailles de texte
3. Créez vos premières classes globales : boutons, titres, paragraphes, containers
4. Construisez un component réutilisable (header, CTA, ou carte)
5. Testez les interactions avec parcimonie sur un ou deux éléments clés

Ne cherchez pas à tout convertir d’un coup. V4 coexiste avec V3 sur une même page. Migrez progressivement, bloc par bloc, page par page.

Le mot de la fin

Elementor V4 n’est pas une mise à jour. C’est un changement de philosophie. On passe d’un outil où l’on stylait des éléments individuels à un outil où l’on construit un design system.

Classes, Components, Variables — ces trois piliers transforment Elementor d’un page builder en un véritable outil de conception systématique. Pour ceux qui construisent des sites professionnels, qui gèrent plusieurs pages, qui travaillent avec des clients exigeants, c’est exactement ce qu’il manquait.

Le meilleur moment pour apprendre V4, c’est maintenant. La Beta est stable, prête pour la production, et la version 4.0 — celle qui activera V4 par défaut sur tous les nouveaux sites — approche. Ceux qui s’y mettent aujourd’hui auront une longueur d’avance quand la majorité découvrira ces fonctionnalités.

Et ça, c’est exactement ce que la sagesse des temps nous enseigne : être prêt avant que les autres ne commencent.

Cet article fait partie d’une série sur Elementor V4 et la construction de design systems dans WordPress. Prochain article : comment adapter la convention Client-First de Webflow à Elementor V4.