Ceci est une traduction de l’article publié sur le blog global d’elementor.com afin de vous permettre de mieux comprendre les nouveautés de la version 3.32.
La vidéo de présentation intégrée à l’article est en anglais. En attendant une version française, vous pouvez activer la traduction automatique sur YouTube :
cliquez sur l’icône en forme de roue dentée → “Sous-titres” → “Traduction automatique” → “Français”.
Editor V4 Alpha – un design plus rapide et évolutif
Les principales nouveautés de cette version font partie de l’Editor V4, la refonte en cours d’Elementor, qui introduit un style “CSS-first”, des principes de design atomique et un flux de travail orienté classes.
Note : Editor V4 est toujours en version Alpha et ne devrait être utilisé que sur des sites de test ou de staging.
Pour activer Editor V4 Alpha, mettez à jour vers la dernière version d’Elementor, puis dans le tableau de bord WordPress, allez à Elementor > Réglages > onglet Editor V4 et cliquez sur « Activer ».
Donnez du relief et de la précision avec Transform
Les nouveaux contrôles Transform de V4 permettent d’appliquer visuellement des transformations CSS à n’importe quel élément. Avec Transform, vous pouvez :
- Déplacer, redimensionner, faire pivoter et incliner des éléments.
- Empiler et attribuer différents types de transformation selon l’état (State).
- Déplacer et faire pivoter selon l’axe Z, avec des contrôles de perspective pour des effets de profondeur.
- Organiser et réordonner facilement les transformations.
En combinant Transform et les États, vous pouvez créer des micro-interactions fluides et cohérentes qui rendent les interfaces plus dynamiques :
- Au survol (hover), agrandir légèrement un bouton.
- Au focus, déplacer un champ de saisie vers le haut.
- En actif (active), faire pivoter une carte pour un retour visuel tactile.
Créez des interactions professionnelles avec Transitions
Le contrôle Transitions dans V4 Alpha vous permet de définir comment les éléments s’animent lorsque l’on passe d’un état à un autre (normal, hover, focus, active). Au lieu d’un changement brutal, les transitions permettent une animation progressive et agréable.
Sans transitions, les effets de survol ou de focus peuvent paraître abrupts. En contrôlant la durée et les propriétés animées, vous pouvez créer des micro-interactions élégantes qui améliorent l’expérience utilisateur et s’alignent avec les standards modernes de design.
Avec Elementor Pro, vous pouvez choisir les propriétés CSS à animer (par exemple : couleur de fond, border-radius, transform, opacité). Chaque transition est gérée dans un bloc répéteur, ce qui permet de superposer plusieurs transitions, les réordonner ou les supprimer. Les utilisateurs de la version gratuite peuvent appliquer une seule transition qui combine toutes les propriétés de style.
Combinées aux classes, Transform et Transitions deviennent réutilisables sur tout votre site. Par exemple, définissez une classe « primary-button » avec Transform et Transitions, puis appliquez-la partout où vous utilisez des boutons. Si vous modifiez les effets ou la durée, toutes les instances se mettront à jour automatiquement.
[Pro] Conservez la cohérence de vos designs avec les Variables de taille
Avec Elementor Pro, le système de Variables s’enrichit d’un troisième type : les Variables de taille. Aux côtés des Variables de couleur et de police (introduites en 3.31), vous pouvez désormais stocker et réutiliser des valeurs numériques de taille à travers tout votre site.
La cohérence des espacements, des tailles typographiques et des dimensions des composants est essentielle dans tout design system moderne. Avec les Variables de taille, vous définissez la valeur une fois et la réutilisez partout, ce qui réduit les erreurs et permet des modifications globales faciles.
Au lieu de saisir “12px” manuellement pour chaque paragraphe, vous créez une variable “text-size”. Vous reliez cette variable à vos éléments de texte, et si vous décidez plus tard de la passer à “16px”, il vous suffit de mettre à jour la variable — toutes les occurrences sont ajustées automatiquement.
Organisez et faites évoluer les Classes grâce aux filtres et à la conversion locale
Cette version introduit deux améliorations liées, pour mieux gérer et réutiliser vos styles : un outil de conversion des styles locaux en classes globales, et de nouveaux filtres dans le gestionnaire de classes pour garder votre bibliothèque propre.
- Convertir les styles locaux en classe globale : prenez des styles appliqués localement à un élément et transformez-les instantanément en classe réutilisable. Cliquez sur les 3 points à côté de la classe locale (en rose) dans la barre des classes, puis sélectionnez « Convert to global class ».
- Filtres du Class Manager : accessibles via une nouvelle icône à côté de la barre de recherche du gestionnaire de classes, ces filtres vous aident à repérer les classes :
- inutilisées (non appliquées à aucun élément)
- vides (aucune propriété définie)
- spécifiques à la page actuelle
Si vous avez stylé un layout de carte localement mais que vous réalisez que vous en avez besoin sur plusieurs pages, vous pouvez le convertir facilement en classe globale. En parallèle, les filtres vous aident à nettoyer les classes inutilisées ou vides accumulées pendant vos expérimentations.
[Pro] Export / import de templates de site – plus de personnalisation
L’export/import de templates de site vous permet de réutiliser des sites complets, migrer des configurations entre projets, et importer uniquement ce dont vous avez besoin. Avec la version 3.32, cet outil gagne en personnalisation et contrôle :
- Installation de thèmes : option d’inclure des thèmes publics WordPress compatibles avec le template.
- Contrôle des expériences (experiments) : décider, lors de l’import, d’appliquer ou non les expériences actives.
- Assets personnalisés : importer polices, icônes et code personnalisé avec votre template.
- Panneau de réglages affiné : couleurs globales, polices, styles de thème, expériences, fichiers personnalisés — chacun activable via des toggles.
- Sélection détaillée du contenu : pages, menus, types de posts, taxonomies : chacun peut être sélectionné individuellement.
- Séparation des templates : les templates de site, les parties du Theme Builder et les Widgets globaux sont affichés séparément, pour un meilleur contrôle.
- Visibilité claire des versions : pour éviter les incohérences, vous recevez une notification si un template importé ne correspond pas à la version d’Elementor.
Si vous gérez une agence avec plusieurs sites clients, vous pouvez désormais choisir d’importer uniquement les styles globaux, le thème et les templates nécessaires — sans contenu de démonstration ni plugins superflus. Résultat : un point de départ plus propre, plus efficace et plus rapide, tout en évitant le désordre.
Le niveau de personnalisation disponible dépendra de votre abonnement.
Essayez Editor V4 dès aujourd’hui !
Elementor 3.32 marque une nouvelle étape importante pour l’Editor V4 Alpha, en intégrant le motion design professionnel et la cohérence d’un design system directement dans votre flux de travail. C’est le moment idéal pour activer V4, tester ces fonctionnalités et apporter vos retours.
Mettez à jour, explorez les nouveaux outils, et partagez vos feedbacks sur GitHub et dans la communauté Elementor. L’avenir de la création web se construit maintenant — ensemble.
Note : Editor V4 est toujours en Alpha et doit être utilisé uniquement sur des sites de test ou de staging. Pour activer Editor V4 Alpha, mettez à jour Elementor, puis dans le tableau de bord WordPress, allez à Elementor > Réglages > onglet Editor V4 et cliquez sur « Activer ».
