Avec les nouvelles versions gratuite et PRO d’Elementor, le constructeur de page populaire pour WordPress, l’éditeur V4 passe en version bêta est devient, officiellement, utilisable sur des sites en production.
C’est avec la v3.34 (décembre 2025) que l’équipe de développement a annoncé une version suffisamment stable pour être utilisée sur des sites en production. Avec l’historique de ce constructeur on restera quand même raisonnable et je vais produire mon prochain site avec cette version mais ce site est corporate et ne fait pas parti du domaine du e-commerce (on attendra un peu plus pour ce domaine).
Elementor 3.34 : les nouvelles capacités atomiques
Toutes les fonctionnalités de cette version d’Elementor sont conçues pour l’éditeur V4, la nouvelle architecture se complète, elle a introduit le style CSS-first, les principes de conception atomique et un flux de travail axé sur la classe.
Cette version apporte 1 nouveau widget : les onglets imbriqués, des Interactions et animations d’entrée/sortie, un nouveau Flexbox plus efficace et léger et d’autres améliorations.
Onglets imbriqués : flexibles, atomiques et entièrement personnalisables
Ce nouveau widget porte les fonctionnalités et la personnalisation du tableau à onglets à un autre niveau. Il est très flexible, personnalisable sur plusieurs points intéressants et délivre un code bien plus propre et léger.
Vous pouvez imbriquer tout type de contenu dans des onglets déclencheurs ou des panneaux de contenu, ce qui ouvre la voie à des mises en page inédites.
Les onglets imbriqués sont entièrement compatibles avec les fonctionnalités de l’éditeur atomique :
- Attribuez des classes globales à n’importe quel élément de la structure et créez des systèmes de conception réutilisables qui se mettent à jour automatiquement.
- Appliquez des styles qui se propagent harmonieusement à travers la hiérarchie.
- Visualisez la mise en page grâce à un panneau de structure clair doté de garde-fous intégrés.
Nouvel état « sélectionné » pour les onglets actifs
Cette version introduit également un état « Sélectionné » dédié aux onglets, disponible uniquement dans les éléments d’onglets imbriqués, vous permettant ainsi de styliser les onglets sélectionnés avec n’importe quel contrôle de style. Vous obtenez ainsi une méthode simple et conforme aux normes CSS pour définir un comportement interactif sans code personnalisé.
Interactions d’entrée : animation personnalisée pour les éléments atomiques
Les interactions d’entrée constituent la première étape des nouvelles interactions atomiques de l’éditeur V4 d’Elementor, apportant des mouvements plus subtils et performants. Un troisième onglet introduit des mouvements légers pour les éléments atomiques.
Jusqu’à présent, les éléments atomiques comportaient deux onglets, Général et Style, axés sur la structure HTML et le style CSS. Les interactions nécessitaient un espace dédié, car elles introduisent un comportement différent de celui des deux premiers onglets, notamment les futures fonctionnalités JavaScript. Cette séparation garantit plus de clarté pour les utilisateurs.
Cette première étape prend en charge les deux modèles d’entrée les plus courants :
- Au chargement de la page : une animation se lance pendant l’initialisation de la page.
- A l’apparition de l’élément à l’écran : une animation se lance dès qu’il entre dans la zone d’affichage.
Au lieu de sélectionner des effets prédéfinis, on paut configurer le mouvement avec les propriétés suivantes :
- Effets : Fondu, Glissement, Mise à l’échelle.
- Type : Entrée, Sortie.
- Directions : Haut, Bas, Gauche, Droite.
- Durée : 0,1 s à 3 s.
- Délai : 0 s à 2 s.
Chaque interaction comprend un bouton Aperçu qui rejoue l’animation dans l’éditeur, offrant un retour immédiat lors de la modification des propriétés. On peut également superposer plusieurs effets d’entrée sur un élément.
Chaque effet est ajouté comme une entrée distincte, vous permettant ainsi de combiner Fondu, Glissement et Mise à l’échelle pour des mouvements plus complexes. Dans les versions ultérieures, d’autres types d’interaction seront ajoutés selon la même approche atomique.
Les nouvelles améliorations de cette version 3.34 d’Elementor
Le conteneur Flexbox atomique pour les éléments atomiques
Les éléments atomiques sont désormais automatiquement encapsulés dans un conteneur Flexbox atomique, remplaçant ainsi le conteneur V3 précédent. Ceci garantit :
- Un balisage propre et prévisible.
- Un espacement et une mise en page cohérents.
- Une structure de mise en page entièrement atomique dès l’ajout d’un élément.
Les conditions d’affichage pour les éléments atomiques
Les conditions d’affichage sont désormais prises en charge directement dans l’onglet Général des éléments atomiques, offrant un flux de travail unifié et accessible pour contrôler l’affichage des éléments.
Les requêtes média dans les CSS personnalisés
On peut désormais rédiger des requêtes média directement dans le panneau CSS personnalisé en mode ordinateur. Bien qu’il soit recommandé de définir les styles par appareil à l’aide des commandes responsives, cette option est désormais disponible pour les utilisateurs qui préfèrent travailler avec des requêtes média et une logique de points de rupture personnalisée.
Une nouvelle prise en charge de l’élément Paragraphe
L’élément Paragraphe inclut désormais une option Span pour appliquer un balisage sémantique en ligne. Cela permet une mise en forme de texte précise sans avoir recours à des solutions de contournement ni à des widgets HTML supplémentaires.
Il ne vous reste plus qu’à vous lancer avec l’éditeur V4 (à activer dans les réglages d’Elementor).
Sources : vidéo de l’annonce, présentation sur le GitHub, présentation des onglets Atomiques par Web Squadron.
