Le constructeur de page Elementor pour WordPress annonce plusieurs nouveautés pour 2025, on y trouve les évolutions et changements à venir pour l’éditeur lui-même. Petit tour d’horizon.
Si vous développez des sites avec Elementor vous avez sans doute noté différents soucis avec son éditeur. Pour ma part la partie des styles CSS est encore trop pauvre car elle ne propose pas des « feuilles de styles » comme j’en utilise dans Indesign par exemple.
J’aimerais mixer en profondeur les styles pour exploiter très simplement des styles globaux localisés en quelques clics au lieu de parcourir ma feuille de styles personnalisées dans mon thème enfant.
La nouvelle interface de l’éditeur v4 d’Elementor ce veut plus responsive
Les vieux routiers comme moi vont avoir un peu de mal à utiliser la nouvelle interface car elle est globalement plus impactante à l’écran, et les réglages sont disposés de la même manière pour tous les widgets (conteneurs ou widgets), elle est maintenant disposée sur 2 onglets, c’est plus rationnel mais c’est un gros changement.
On trouve aussi de nouvelles options de positionnement qui apportent encore plus de souplesse (vivement la gestion des pseudo éléments dans Elementor).
Voici quelques aperçus des différentes boîtes de réglages, notez que la version Alpha actuelle ne propose que 7 éléments : 2 conteneurs et 5 widgets. On dispose aussi de 4 modes de définition des conteneurs/éléments : block, flex, inline-block et inline-flex. L’option d’overflow est plus limpide. On peut enfin déterminer des valeurs max-width et max-height pour tout élément.
Nouvelle gestion des classes CSS avec l’éditeur v4 d’Elementor
Avant de voir ce qui change par ailleurs dans l’interface je vous propose de voir ce qui va fondamentalement changer avec ce nouvel éditeur : la gestion de classes CSS. Il faut regarder le principe des styles comme il l’est à la base dans les CSS : les classes de style.
On va pouvoir définir toute un bibliothèque de styles qui pourront être combinés sur chaque widget. Vous pourrez appliquer un style caractère (famille de police, taille du texte, couleur, etc) en combinaison avec un autre définissant des marges (internes ou externes) et un dernier pour un effet d’ombrage.
Rien de plus simple pour unifier un style globalement sur des dizaines de pages ou d’éléments avec la possibilité (à terme) de faire des ajustements globalement sans passer du temps à copier/coller des styles ou reprendre certains réglages manuellement, un gain de temps important sur les gros projets.
Mais cette approche demande un peu de travail en amont lors de la définition desdits classes de style. Cette complexité peut vite virer au débordement et vous donner mal à la tête. Pour les pratiquants du code CSS c’est une aubaine, pour les néophytes une fonction a priori inutile.
Une fois une classe créée, si l’on l’on souhaite la modifier, il suffit de la sélectionner et lui apporter les changements souhaités, ils ce reportent instantanément sur tous les cléments associés à la classe, simple et limpide.
Pour chaque classe CSS vous pouvez déterminer les styles pour chaque état :
- Normal
- Au survol
- Au focus
- Actif
Je ne vois pas de possibilité de définir l’ordre des classes CSS actuellement (ça semble être de A à Z), j’espère que ce sera possible à l’avenir.
Une autre option qui serait bienvenue serait la possibilité d’associer des couleurs aux classes.
L’option de dégradé enfin plus complète
On peut enfin créer des dégradés à plusieurs points de couleurs. Rarement utile mais essentiel pour certains styles de présentation.
Couplé à la notion de multicouches d’arrière-plan on va pouvoir faire de belles (ou moches) choses !
L’arrière-plan des éléments enfin multicouches
J’ai parfois dû bricoler avec des règles CSS pour obtenir un arrière-plan avec 2 ou 3 images (possibilité des CSS), c’est enfin possible avec le nouvel éditeur v4 d’Elementor. Chaque image a ses propres comportements, quid des options de défilement ? À venir j’espère.
Les réglages pour chaque vue responsive et obligation de la barre supérieure
Nous avons l’habitude de la petite icône devant les réglages, elle à disparue, il faut passer dans le mode pour définir le bon réglage, cette perte ne semble pas importante mais sur grand écran ça fait pas mal d’allers et retours avec la barre supérieur de l’éditeur.
Autre nouveauté de éditeur v4 d’Elementor : les composants “Atomic”
les nouveaux widgets sont dénommés « Atomic Elements » et sont regroupés dans une section spécifique, la mixité dans une même page entre les widgets « standards » et les nouveau est tout fait possible?
Créez des widgets à partir de composants réutilisables pour une efficacité et une cohérence maximales grâce au nouveau système de conception modulaire. Par exemple, créez votre propre composant CTA à l’aide d’atomes comme un bouton, un titre et un paragraphe, et reproduisez-le sur l’ensemble de votre site.
Elementor pousse de nouveaux services
De nouveaux services sont apparus dernièrement, ils seront de plus en plus intégrés dans le flux de travail d’Elementor (je reste septique sur ce genre d’intégration) :
- Un service d’optimisation d’image (sur abonnement).
- Une sauvegarde dans le CLOUD (sur votre compte Elementor) pour vos modèles.
- Un service d’envois d’e-mail et SMS avec SEND.
- Un concepteur de site avec IA avec SITE PLANNER (en Bêta).
- Un assistant IA avec NOTETAKER pour des réunions avec Google Meet (en Bêta et seulement en anglais).
Sources : vidéo de présentation, télécharger la version de test, feuille de route d’Elementor.
