Elementor Pro est un outil incontournable pour les concepteurs et développeurs no-code WordPress, notamment grâce à sa polyvalence et son potentiel en matière de création de sites web attrayants et fonctionnels. Il est devenu un des constructeurs de pages les plus populaires pour WordPress. Les fonctionnalités puissantes et intuitives, les améliorations de performance et la flexibilité accrue promettent d’ouvrir de nouvelles perspectives pour les créatifs cherchant à repousser les limites de leur travail et à offrir des expériences en ligne captivantes.
Ici, notre agence WordPress vous parle des dernières nouveautés et améliorations apportées par les dernières mises à jour du plugin Elementor Pro. On ne vous le cache pas, ça devrait plaire à tous ses utilisateurs !
On vous aide à façonner votre présence en ligne à petit prix avec WordPress et Elementor Pro
Les nouveautés Elementor Pro 3.27
La version 3.27 d’Elementor introduit plusieurs améliorations visant à enrichir l’expérience utilisateur et à optimiser les performances des sites web. On vous dit tout.
Disposition des éléments de grille
Les conteneurs en grille bénéficient désormais de contrôles avancés, permettant aux éléments de s’étendre sur plusieurs lignes et colonnes.
L’objectif est de donner plus de flexibilité pour la création de mises en page complexes et dynamiques sans recourir à des solutions de contournement. On peut dorénavant ajuster combien d’espace le widget ou le conteneur occupe dans la grille.

Polices Google en local
La nouvelle version d’Elementor offre la possibilité de charger les polices Google directement depuis votre serveur, éliminant ainsi les requêtes externes vers les serveurs de Google.
Lors de l’enregistrement d’une page ou lors du premier chargement, Elementor détecte automatiquement les références aux polices Google et télécharge localement les fichiers nécessaires sur le serveur.
Cette fonctionnalité améliore les performances du site en réduisant les temps de chargement et renforce la confidentialité des utilisateurs en évitant le partage de données avec des tiers.
Vous devez activer cette fonctionnalité pour la tester : Elementor → Réglages → Fonctionnalités → Load Google Fonts Locally.

Améliorations de l’accessibilité et des performances
Plusieurs mises à jour ont été effectuées pour rendre les sites plus accessibles et performants :
- Support des sous-titres YouTube
- Structure HTML standardisée pour les carrousels
- Attribut « aria-label= »Search » » pour le widget de recherche
- Styles CSS chargés dans la balise <head> dès le premier chargement de la page
- Optimisation du balisage HTML, suppression des <div> inutiles
- Chargement de Swiper.js uniquement sur les pages qui en ont besoin
Elementor montre encore une fois qu’ils travaillent dans le but de créer un outil puissant et accessible, tout en optimisant les performances des sites web.
Support des YouTube Shorts
Le widget Vidéo prend désormais en charge l’intégration des YouTube Shorts. Vous pouvez facilement intégrer ces vidéos en collant le lien du Short et en ajustant le ratio d’aspect à 9:16 dans l’onglet « Style », pour assurer une lecture optimale des vidéos.
Les nouveautés Elementor Pro 3.26
C’est le cadeau d’Elementor pour la fin d’année, une nouvelle mise à jour pour apporter quelques nouveautés et pas mal d’optimisations !
Comptabilité des navigateurs
Elementor Pro a mis à jour sa compatibilité avec les navigateurs, nécessitant désormais Safari 15.5 ou une version ultérieure. La comptabilité reste la même pour Chrome (Chrome 100) et Firefox (Firefox 100).
Cela permet l’utilisation les propriétés CSS et les attributs HTML les plus récents, pour des sites encore plus performants et modernes.
Optimisations
On retrouve dans cette mise à jour quelques belles améliorations côté performance et accessibilité :
- Allègement du code : Le DOM a été optimisé pour être plus léger et plus rapide, notamment grâce à des ajustements dans les widgets et les attributs d’accessibilité.
- Carrousels améliorés : Navigation au clavier simplifiée, attributs ARIA uniformisés et possibilité d’ajouter des noms sémantiques. Bref, vos carrousels n’ont jamais été aussi accessibles.
Autres petites nouveautés
- Détection d’AdBlock pour les popups : Une fonctionnalité bien pratique pour afficher des messages personnalisés aux utilisateurs équipés de bloqueurs de pub.
- Contenu dynamique dans les grilles : Le widget Off-canvas peut maintenant être utilisé à l’intérieur d’un modèle de boucle pour afficher du contenu dynamique supplémentaire.
Les nouveautés Elementor Pro 3.25
Elementor Pro 3.25 vient de voir le jour. Elle apporte une série d’optimisations qui visent à améliorer la performance, la vitesse de chargement et l’expérience utilisateur globale des sites construits avec Elementor.
Optimisation CSS
Dans cette nouvelle version, Elementor Pro 3.25 améliore la gestion des styles CSS en chargeant uniquement ceux nécessaires pour la page active.
Au lieu de charger les styles de tous les widgets, le CSS se charge seulement lorsqu’ils sont utilisés. Ce chargement sélectif permet une meilleure performance en ne chargeant que ce qui est nécessaire.
Les « Styles Globaux » sont également optimisés dans leur manière de se charger permettant de réduire le temps de chargement des pages.
Toutes ces optimisations ont un impact direct sur la vitesse de chargement et donc l’expérience utilisateur et le SEO.
Ancre CSS
La gestion des ancres connaît également une amélioration significative grâce à une solution CSS native qui rend le défilement plus rapide, plus fluide et plus efficace, sans nécessiter de JavaScript.
Avec ceci, Elementor introduit un paramètre supplémentaire : l’offset des ancres.
En définissant un offset sur les éléments sticky, les ancres défilent désormais jusqu’à la position exacte souhaitée sans cacher une partie du contenu sous un header fixe. Cette précision garantit que le contenu reste visible pour une navigation plus agréable.

Widget recherche : pagination pour les résultats
Le widget de recherche évolue aussi. Il bénéficie désormais d’une option de pagination pour les résultats en direct (live results).
Auparavant, les utilisateurs ne pouvaient pas accéder aux résultats supplémentaires lorsque leur nombre dépassait le maximum affiché par défaut. Avec cette mise à jour, des options de pagination apparaîtront en haut ou en bas du widget de recherche, permettant de naviguer entre les résultats.

Les nouveautés Elementor Pro 3.24
Les mises à jour Elementor ne s’arrête pas, la version 3.24 vient d’être publié. Voici les nouveautés et les améliorations :
Polices variables (variable fonts)
Ça y est, Elementor Pro a introduit les polices variables, une fonctionnalité qui permet encore plus de personnalisation sur de nouvelles polices. En téléchargeant simplement un fichier TTF depuis des sources comme Google Fonts, vous pouvez ajuster avec précision le poids et la largeur du texte.
Pour l’utiliser, il suffit d’ajouter une nouvelle police variable via le tableau de bord Elementor > Polices personnalisées. En ajoutant une police, vous avez le choix entre police statique (les polices classiques avec un fichier pour chaque style et graisse) ou une police variable.
Les réglages de largeur et de graisse vont apparaitre dans l’éditeur Elementor quand une police variable sera sélectionnée.

Barres flottantes (floating bars)
Elementor Pro 3.24 introduit les « barres flottantes », une nouvelle fonctionnalité destinée à améliorer l’engagement des visiteurs et les conversions sur les sites.
Ces barres se configurent en lien avec des modèles prédéfinis personnalisables :
- Des appels à l’action
- Des coupons de réduction
- Des bandeaux d’information clicables
Elles sont affichées soit en haut de la fenêtre ou en bas. Et elles sont aussi utilisables avec les conditions dynamiques pour les afficher seulement sur certaines pages du site !
Pour créer un ou plusieurs éléments, c’est simple, sur votre interface administrateur, allez dans modèles > Floating Element. Vous pourrez alors ajouter un élément et choisir entre un bouton flottant ou une barre flottante.

Optimisation du chargement CSS
Cette mise à jour d’Elementor améliore le chargement des fichiers CSS afin qu’il se fasse de manière conditionnelle. Cela permet de charger uniquement le CSS nécessaire pour la page consultée, réduisant ainsi la quantité totale de CSS chargé. Tous les styles de widgets sont désormais chargés conditionnellement, évitant le chargement des styles pour les widgets inutilisés.
Cette optimisation améliore les performances de l’éditeur et réduit le poids du CSS, jusqu’à 668KB pour les sites n’ayant pas activé cette fonctionnalité auparavant.
De plus, la nouvelle méthode de chargement minimise les décalages de mise en page (CLS), en chargeant les styles plus tôt, ce qui stabilise les éléments visuels en évitant des décalages brusques lors du chargement et accélère le temps de chargement, améliorant ainsi le référencement SEO et la satisfaction des visiteurs.
Les nouveautés Elementor Pro 3.23
Cette mise à jour d’Elementor 3.23 amène de nombreuses nouveautés ! On vous explique tout ci-dessous.
Widget de recherche avec résultats en direct (live results)
La grosse nouveauté, c’est un nouveau widget de recherche. Il permet d’afficher des résultats de recherche en direct au fur et à mesure que les visiteurs tapent leur requête.
L’affichage des résultats est possible grâce à un modèle de boucle permettant une personnalisation poussée. La boîte déroulante est également paramétrable pour afficher le nombre de résultats et leur disposition.
Il permet également de filtrer les requêtes de recherche pour se concentrer sur le contenu pertinent, en choisissant des sources spécifiques comme les produits ou les articles.
Les capacités de design ont aussi été améliorées, permettant de personnaliser le champ de recherche et les boutons et d’ajouter des icônes ou des SVG personnalisés.
Pour activer cette fonctionnalité, il suffit de l’activer dans le tableau de bord WordPress sous Elementor → Réglages → Fonctionnalités, puis de tester et personnaliser selon les besoins.


Boutons flottants
Ce nouveau widget permet d’afficher des boutons fixes n’importe où sur votre page web.
Lorsqu’ils sont cliqués, ils se déploient pour afficher divers boutons de contact et informations selon le modèle choisi, ou pour activer une plateforme de messagerie connectée comme l’email, WhatsApp, Viber, etc.
Activez cette fonctionnalité via le tableau de bord Elementor > Réglages > Fonctionnalités en activant les options « Flexbox Container » et « Floating Buttons ».
Pour ajouter des boutons flottants, allez dans l’administration WordPress > Modèles. Cliquez sur « Ajouter un nouveau modèle », sélectionnez le type de modèle « Floating Button », nommez le modèle et cliquez sur « créer un modèle ».
L’éditeur Elementor va alors se charger et ouvrir la bibliothèque de modèle. Vous pourrez choisir un modèle préconçu personnalisable. Chaque modèle peut être adapté avec vos informations comme le numéro de téléphone ou l’email, et le contenu visuel comme l’avatar et le message de la bulle de chat. La section « style » permet de personnaliser les éléments graphiques pour rester conforme à votre marque, y compris les animations d’entrée et de sortie.

Widget lien en bio
Les nouveaux widgets « Lien en bio » peuvent être ajoutés sur une page, par exemple lorsque votre site est en construction, pour centraliser vos informations importantes sur une seule page ou pour utiliser une page de votre site dans les biographies des réseaux sociaux.
Ces widgets offrent sept options différentes pour les abonnés Elementor Pro avec un objectif spécifique pour chaque comme promouvoir un service, afficher une carte de visite ou présenter un portfolio.
Personnalisez le contenu et le style comme vous le souhaitez. Vous pouvez choisir des images, écrire vos propres titres et sélectionner les icônes sociales à afficher.
Pour activer cette fonctionnalité, allez dans le tableau de bord Elementor → Réglages → Fonctionnalités et activez « Lien en bio ».

D’autres optimisations
Les éléments imbriqués dans Elementor sont des éléments très pratiques dans la création de pages web complexes. Ils ont malheureusement également fortement ralenti l’éditeur lors de leur utilisation. Cette mise à jour 3.23 améliore considérablement le flux de travail en réduisant le temps d’interaction de l’éditeur de 60% à 98%.
Cette mise à jour ajuste l’infrastructure des widgets, ce qui permet que chaque modification n’affecte que l’élément pertinent sans recharger tout le widget. Cela améliore la fluidité lors de la création de mises en page complexes dans les widgets comme Accordéon, Onglets, Carrousel, Mega Menu et Off Canvas.
Les Mega Menus sont également plus accessibles aux utilisateurs de lecteurs d’écran en restructurant la sortie DOM, permettant une meilleure association des éléments de menu avec leurs zones de contenu.
Les nouveautés Elementor Pro 3.22
Nouveau widget : Off-Canvas
Elementor Pro a introduit un nouveau widget appelé « Off-Canvas ». Ce widget peut être placé n’importe où sur la page et est activé en cliquant sur un lien connecté. C’est un élément de conteneur, il offre la flexibilité de construire et de personnaliser tout agencement à l’intérieur.
Le widget Off-Canvas peut être lié à d’autres widgets via une entrée de lien, avec la possibilité de configurer l’action du lien pour ouvrir, fermer ou basculer le widget. Il est important que le lien soit sur la même page ou partie du site que le widget.
Les utilisateurs peuvent personnaliser les animations d’entrée et de sortie, le comportement d’interaction, et empêcher le défilement de la page lors de son activation.
Pour utiliser ce widget, vous devez activer les conteneurs flexbox et les éléments imbriqués dans les réglages. Le widget sera alors disponible dans l’éditeur des pages.

Meilleures performances : mise en cache, librairies JavaScript natives…
La version 3.22 d’Elementor apporte des améliorations significatives en termes de performance qui promettent d’améliorer les scores Google Lighthouse et de réduire considérablement les temps de chargement.
Parmi ces améliorations, on note l’introduction d’une nouvelle fonctionnalité de mise en cache des widgets Elementor, qui réduit l’utilisation de la mémoire et améliore le temps de réponse du serveur (TTFB) de 33% à 70%.
Cette version voit également le remplacement des bibliothèques JavaScript externes par des solutions basées sur JavaScript natif, réduisant ainsi le code inutilisé et améliorant les performances et les scores SEO.
Un nouvel onglet Performance a été ajouté dans le tableau de bord de WordPress sous Elementor > Réglages, permettant une activation facile des fonctionnalités de performance stabilisées.

Les nouveautés Elementor Pro 3.21
La version 3.21 d’Elementor amène à nouveau de meilleures performances pour les pages, ainsi qu’une amélioration du widget de boucle.
Widget boucle : filtre par taxonomies
Pour améliorer la construction de sites de contenu dynamique, le widget de boucle évolue pour permettre l’affichage des éléments en fonction des taxonomies (catégories, étiquettes, etc.). Cette amélioration est disponible sur les grilles de boucle (Loop Grids) et les carrousels de boucle (Loop Carousels). Il est également possible d’inclure ou d’exclure certaines taxonomies.
On peut donc maintenant afficher des produits ou des articles de façon plus précise et personnalisée. Par exemple, en faisant des blocs distincts de catégories de produits sur une page.
Ce système de requête est compatible avec des plugins tiers comme CPT et ACF qui ouvrent les possibilités pour vos contenus dynamiques créés avec ces outils.

Amélioration des performances
Elementor version 3.21 apporte plusieurs améliorations de performance qui réduisent le temps de chargement des sites web.
La nouvelle fonctionnalité « Optimize Control Loading » permet de diminuer le « Time To First Byte » (TTFB) de 20 à 30% lorsque le site est affiché aux visiteurs. Il faudra activer l’option dans les réglages d’Elementor pour en bénéficier.
D’autres fonctionnalités ont été améliorées comme le « Lazy Load Background Images ». Cette version utilise une approche native CSS pour le chargement différé des images en background (sur les conteneurs) en utilisant des media queries pour détecter lorsque les images sont en dessous du pli de page, et les charge de manière différée. Et on peut désactiver ce chargement différé avec une simple classe CSS « e-no-lazyload ».
Le code est à nouveau nettoyé et optimisé en supprimant le balisage redondant.
Les widgets avec des zones de contenu vides cesseront de créer du code inutile, comme des balises div superflues. Par exemple, si un Icon Box est placé sans description, le widget n’ajoutera pas de balise div inutile, réduisant ainsi la quantité de code produit.
Les nouveautés Elementor Pro 3.20
Cette mise à jour d’Elementor et Elementor Pro est axé sur les performances, l’accessibilité et la résolution d’issu pour rendre l’outil plus stable et performant.
Réduction de la taille du DOM pour les conteneurs
Elementor Pro 3.20 réduit considérablement la taille du DOM pour les conteneurs, avec une diminution allant jusqu’à 39% pour les flex conteneurs et jusqu’à 85% pour les conteneurs grille, accélérant le chargement des pages.
C’est une « alerte » que l’on retrouvait régulièrement via les analyses Google Page Speed pour les pages contenant beaucoup d’éléments, ayant un impact sur la complexité du code et du temps de chargement.
Auparavant, Elementor utilisait des attributs HTML data-* volumineux pour chaque conteneur, alourdissant le code HTML.
Désormais, cette information est exclusivement passée dans l’éditeur, pas sur le frontend, rendant le code HTML plus léger.
Amélioration de conditions dynamiques
La nouvelle fonctionnalité des conditions d’affichage a été amélioré avec cette dernière mise à jour introduisant l’opérateur logique « OU » pour compléter l’opérateur « ET », permettant une plus grande souplesse dans l’affichage des éléments.
De nouvelles conditions sont également ajoutées, incluant le nombre de commentaires, l’archive de l’auteur, et l’image à la une, enrichissant les options de personnalisation. La prise en charge des conditions basées sur les tags dynamiques a été aussi intégrée, couvrant les archives, les images à la une, les auteurs et les champs personnalisés (custom fields).
Ces améliorations facilitent la création d’expériences visiteurs sur mesure et dynamiques, renforçant la capacité des créateurs de sites à personnaliser le contenu affiché.

Performance et stabilité des fonctionnalités
Avec la version d’Elementor 3.20, trois fonctionnalités majeures entrent dans le noyau : le guide de style global, les transitions de page et le scroll snap.
Deux autres fonctionnalités, les polices d’icônes « inline » et la possibilité de construire avec l’IA ont évolué du statut de beta à stable, les rendant fiables pour tous les sites.
Quatre fonctionnalités expérimentales ont vu leur statut amélioré, dont le filtre de taxonomie et les conditions d’affichage passant en beta, et le conteneur grille ainsi que la mise à jour de la librairie swiper devenant actives par défaut.
Cette mise à jour introduit des optimisations significatives de l’éditeur, offrant une expérience de modification plus rapide et efficace grâce à une réduction du CSS et à la suppression d’éléments inutilisés, améliorant ainsi la performance générale.
Amélioration de l’accessibilité
Elementor continue encore de travailler sur l’accessibilité de son outil et des pages créées.
Le widget de mega menu a évolué pour améliorer le code, la navigation via le clavier et son utilisation en version mobile. Pour le widget de connexion, les améliorations incluent le maintien des balises <label> même lorsqu’elles sont visuellement cachées pour ne pas compromettre l’accessibilité, et l’assignation d’identifiants uniques aux champs de saisie pour éviter les problèmes de focus.
L’accessibilité de l’éditeur d’Elementor a également eu son lot d’ajustements significatifs, permettant une navigation et une utilisation plus aisée du panneau des éléments via le clavier.
Les nouveautés Elementor Pro 3.19
La première mise à jour majeure d’Elementor Pro pour l’année 2024 est arrivée avec des améliorations et une nouveauté très prometteuse. Sans plus attendre, on vous en dit plus !
Conditions dynamiques
La version 3.19 introduit une grande nouveauté : les conditions dynamiques. Cela signifie que les éléments d’une page peuvent désormais être affichés ou masqués selon des règles spécifiques, permettant encore plus de personnalisation sans créer de nouveaux modèles de page.
Ces règles peuvent inclure :
- La date et l’heure
- L’état de connexion de l’utilisateur
- L’auteur d’une page
- La catégorie ou le tag
- La source de trafic de l’utilisateur
- Etc.
Pour bénéficier de cette fonctionnalité, il faudra l’activer dans Elementor > Réglages > Fonctionnalités > Conditions d’affichage.
Dans l’éditeur Elementor, cette option apparaît pour tous les widgets dans l’onglet « Avancé » sous les paramètres « ID de CSS » et « Classes CSS ». En cliquant sur l’option, vous ouvrez une fenêtre rendant accessible l’ensemble des règles d’affichage de l’élément. Pour en savoir plus sur son fonctionnement, on vous propose d’aller voir la documentation.
C’est une belle nouveauté, on a hâte de voir son évolution !

Stabilité des fonctionnalités
Depuis plusieurs mises à jour, Elementor tend à simplifier son code en réduisant le nombre de div HTML. Cette simplification permet une meilleure performance et une maintenance plus aisée. Ce code plus propre se traduit aussi par des sites plus rapides et un meilleur classement SEO.
La nouvelle version d’Elementor intègre cette simplification dans son noyau.
D’autres fonctionnalités sont devenues plus stables, c’est le cas des options de chargement optimisé des images et de chargement optimisé de Gutenberg. La fonctionnalité « Menu », permettant de créer des menus et méga-menus directement depuis l’éditeur, passe au statut Beta.
Amélioration du workflow
La version 3.19 d’Elementor exige PHP 7.4 au minimum. Ce qui peut paraitre comme un souci de compatibilité pour les utilisateurs est en réalité un gage de sécurité et de performances.
Elementor prend de plus en plus en compte les problématiques SEO des sites internet. En plus d’améliorer le temps de chargement, Elementor propose maintenant une aide pour détecter les éléments sans balises ALT directement depuis l’éditeur.

Les nouveautés Elementor Pro 3.18
Elementor finit l’année 2023 en beauté avec une nouvelle mise à jour, et bien sûr, l’ajout de quelques fonctionnalités intéressantes, pour toujours plus de personnalisation. On vous parle tout de suite !
Choisir les widgets disponibles
Il est désormais possible de désactiver des widgets sur Elementor. Ces widgets ne seront plus disponibles dans le panneau de l’éditeur.
Pourquoi désactiver les widgets ? Pour maintenir la légèreté et la rapidité de votre site, mais aussi pour avoir un panneau de widgets simplifié, permettant une gestion plus intuitive et rapide.
Cette fonctionnalité est disponible dans l’onglet Elementor > Element Manager. Vous trouverez la liste des widgets sur le site, avec leur nombre d’utilisations sur l’ensemble des pages du site. Il ne vous reste plus qu’à désactiver les widgets non utiles à votre site. Mais attention ! Lorsqu’un widget est désactivé, il ne sera pas visible sur le site, même s’il est utilisé sur une de vos pages.

La sélection multiple sur le filtre de taxonomie
Une nouveauté très intéressante se trouve dans le filtre de taxonomie appliqué aux boucles de grille. On peut maintenant autoriser une sélection multiple, au lieu de filtrer avec un seul terme à la fois. La sélection multiple a deux paramètres : la logique « et » ou « ou ».
Cela permet un contrôle plus précis sur la manière dont les visiteurs filtrent les posts et produits affichés. Cette flexibilité améliore considérablement l’expérience utilisateur, en rendant la navigation et la recherche de produits ou d’articles spécifiques plus intuitives et efficaces.
Cette option n’est disponible qu’avec un minimum de 12 publications ou produits à travers différentes catégories.

Les grilles de boucles sans résultat
Les grilles de boucles sont un outil très pratique sur Elementor. En les associant à un filtre de taxonomie, elles deviennent très puissantes, notamment pour un e-commerce en filtrant des produits. Seulement, à ce jour, lorsqu’une recherche ne donnait rien, rien ne s’affichait sur la page.
Elementor a remédié à ça. Vous avez maintenant la possibilité d’écrire un message personnalisé. Ce message peut être adapté pour fournir des orientations, des suggestions ou simplement pour rassurer l’utilisateur.
Quelques réglages sont possibles au niveau du design de ce message, alignement, couleur, police.
La présence de ce message renforce l’expérience utilisateur de la page. Elle est moins frustrante pour les utilisateurs qui ne trouvent pas immédiatement ce qu’ils cherchent.

Les fichiers des formulaires envoyés en pièce jointe
Elementor Pro 3.18 introduit une amélioration dans les formulaires de contact pour le champ « téléchargement de fichier ».
Avec cette mise à jour, il est possible de recevoir des fichiers téléchargés directement en pièce jointe des e-mails récapitulatifs, et non plus avec un lien d’accès du fichier stocké sur le serveur.
En choisissant cette option, les fichiers soumis ne sont plus stockés sur le serveur du site, mais directement dans la boîte de réception de l’e-mail. Ce qui pouvait impacter l’espace de stockage disponible sur l’hébergement web, permet maintenant de maintenir des performances optimales du site tout en gérant efficacement les soumissions de formulaires.

Amélioration performance et accessibilité
L’optimisation des performances et de l’accessibilité reste un objectif constant pour Elementor. Cette nouvelle version améliore à nouveau le Time To First Byte (TTFB) de 3 à 5% en moyenne.
Elle introduit également des réglages d’accessibilité comme le contrôle des balises HTML des en-têtes du widget vidéo (Video Playlist Widget), les enveloppes sémantiques du formulaire de recherche (Search Form Widget) et du filtre de taxonomie (Taxonomy Filter).
La mise à jour rend également plus facile de naviguer et de cliquer sur les éléments de menu et les accordéons. Cette amélioration est particulièrement bénéfique pour les personnes ayant des difficultés de manipulation fine ou utilisant des technologies d’assistance.
Les nouveautés Elementor Pro 3.17
Ce mois d’octobre est synonyme de nouvelle version d’Elementor Pro avec son lot de nouveautés et d’améliorations. Un des objectifs majeurs est d’améliorer les performances d’Elementor, à la fois pour les utilisateurs, mais aussi pour le référencement naturel des sites (SEO).
Chargement AJAX pour les boucles
La dernière mise à jour d’Elementor Pro 3.17 apporte du changement pour le widget « Grille de boucle » avec un rechargement AJAX du contenu. Ce qui veut dire que seul le contenu de cette boucle sera rechargé. Un changement synonyme de rapidité et d’efficacité.
Ce n’est pas tout. Le paramètre « autoscroll » fait son apparition. Suite à un chargement, vous pouvez maintenant revenir automatiquement en haut du contenu. Et pour ceux qui mettent en avant des filtres, l’option d’ajouter une marge est disponible, assurant ainsi leur visibilité permanente.
Une autre amélioration majeure réside dans la pagination individualisée. En modifiant la page d’une section boucle, vous ne perturberez plus les autres sections boucles présentes sur la page. Une précision qui rend l’expérience des utilisateurs nettement plus agréables.

Meilleure performance LCP
Elementor a franchi une étape supplémentaire en matière de performance web. Cette mise à jour 3.17 permet de prioriser le chargement des images selon leur emplacement sur la page. Les éléments susceptibles de figurer dans le « LCP » (Largest Contentful Paint) sont désormais identifiés pour être chargés en priorité.
En suivant cette même logique, les images qui ne sont pas immédiatement visibles à l’écran lors du chargement initial vont être chargées en lazy-loading.
Grâce à ces améliorations, il est possible d’augmenter le score LCP de 5 à 10%, bien que cela puisse varier selon la complexité de la page. Un bond significatif qui profitera à tous les utilisateurs.
Pour bénéficier de ces optimisations, il suffit d’activer l’option « Optimize Image Loading ». Dirigez-vous vers Elementor > Réglages > Fonctionnalité, et vous y trouverez cette option.

Nouveau widget notation
Elementor enrichit sa palette d’outils avec un tout nouveau widget de notation. Cette mise à jour offre davantage de flexibilité pour la création d’éléments de notation, permettant une personnalisation plus poussée.
Avec le nouveau widget, vous allez pouvoir :
- Choisir l’icône de votre choix : avec Font Awesome ou votre propre SVG
- Sélectionner de l’échelle du score : un score entre 0 et le nombre de votre choix
- Avoir un meilleur schéma SEO

En plus des innovations précédemment mentionnées, Elementor continue de progresser avec d’autres améliorations notables, telles que le FAQ Schema pour le widget accordéon, des optimisations sur l’accessibilité avec l’élément focus pour le contenu des pop-ups, l’introduction du scroll horizontal pour le widget menu.
Attention, à partir de cette mise à jour, Elementor fonctionne avec la version PHP minimale 7.3.
Les nouveautés Elementor Pro 3.16
Cette dernière mise à jour, 3.16, adopte définitivement les conteneurs flexbox ! Mais ce n’est pas tout, Elementor Pro s’améliore encore en termes de performance et d’accessibilité.
Les conteneurs flexbox par défaut
Bien plus efficace et flexible, les conteneurs flexbox remplacent pour de bon les sections, sections internes et colonnes d’Elementor. Ces conteneurs permettent également d’accéder aux fonctionnalités et aux widgets avec des capacités imbriquées. Très pratique pour réaliser un design moderne et dynamique.
À partir de cette version, les conteneurs Flexbox seront activés par défaut sur tous les nouveaux sites. Cependant, pour ceux d’entre vous qui ont déjà des sites construits à l’aide de sections et de colonnes, ne vous inquiétez pas. Cette mise à jour ne perturbera pas votre flux de travail, et vous pourrez continuer à les utiliser comme avant.

Ceux qui ont l’œil ont dû remarquer une modification des réglages pour l’écartement entre les éléments d’un conteneur. Il est maintenant possible d’indiquer un écart différent pour les colonnes et les lignes. De quoi donner des designs encore plus minutieux.

Amélioration des performances et de l’accessibilité
La version 3.16 d’Elementor Pro apporte des améliorations significatives en termes de performances et d’accessibilité.
L’optimisation des performances s’est notamment fait sur le Time to First Byte (TTFB), un indicateur clé mesurant le temps nécessaire pour établir une connexion et la réactivité du serveur web. Les résultats sont probants, avec une amélioration notable du TTFB, renforçant ainsi la rapidité de chargement de la partie visible d’un site.
Par ailleurs, Elementor a apporté des améliorations essentielles aux éléments imbriqués et à d’autres widgets, en particulier pour les outils de lecture d’écran.
Amélioration des widgets menus et onglets
Ces éléments bénéficient d’une nouvelle structure HTML afin d’éviter des doublons de code, tout en étant plus performant et respectant les critères d’accessibilité.
Ce sont deux widgets clés apparus depuis plusieurs versions qui viennent démultiplier les possibilités de construction de page avec Elementor Pro.
D’autres widgets ont été améliorés comme le widget « Icône » qui permet maintenant d’adapter la taille du conteneur aux proportions réel du fichier sélectionné, si la hauteur et la largeur sont différentes.

Les nouveautés Elementor Pro 3.15
Les nouveautés n’arrêtent jamais chez Elementor ! La dernière mise à jour du page builder nous amène une nouveauté très attendue.
Filtre de taxonomie
Il est enfin arrivé : le widget de filtre avec taxonomies (Taxonomy Filter Widget) spécialement conçu pour les éléments d’une grille de boucle. Cette fonctionnalité s’avère particulièrement utile pour classer et organiser les publications, mais aussi et surtout les produits d’une boutique avec WooCommerce sur un site WordPress.
L’ajout de plusieurs filtres est possible et permet d’améliorer les possibilités de tri, offrant ainsi une navigation plus ciblée aux visiteurs.
Pour avoir cette nouvelle fonctionnalité dans le catalogue des widgets, il faudra l’activer dans les réglages des fonctionnalités bêta d’Elementor Pro.

Amélioration des carrousel et des boucles carrousel
Le nouveau widget de la version précédente d’Elementor pro, les carrousels ont été améliorés. Des options de “offset” sur les côtés du carrousel permet d’indiquer aux visiteurs qu’il y a davantage de contenu qui les attend.
La pagination et la navigation de ces widgets a également été améliorées afin d’offrir plus de possibilité de personnalisation.
Chez Webalia, on a hâte de tester tout ça !
Les nouveautés Elementor Pro 3.14
En juin dernier, Elementor Pro a sorti une nouvelle mise à jour de son plugin apportant des corrections, mais aussi une nouveauté intéressante.
Nouveau widget : le carrousel d’éléments imbriqués
Elementor Pro présente une fonctionnalité très intéressante avec son dernier widget : le carrousel d’éléments imbriqués.
Pour accéder à ce widget, il est nécessaire d’activer deux fonctionnalités bêta :
- les conteneurs Flexbox
- les éléments imbriqués
On vous explique plus en détails ces deux fonctionnalités, depuis la version 3.12 d’Elementor Pro, dans la suite de cet article.
Une fois activé, ce widget permet de créer un carrousel entièrement personnalisé en utilisant n’importe quel autre widget disponible dans Elementor Pro. Vous pouvez désormais ajouter autant de diapositives que vous le souhaitez, chaque diapositive pouvant contenir des éléments différents pour une mise en page totalement adaptée à vos besoins.
C’est l’outil idéal pour créer des éléments dynamiques, uniques, et sur-mesure sur votre site web.
Ce nouveau carrousel inclut toutes les fonctionnalités d’un carrousel classique, avec le défilement automatique, le contrôle du nombre de diapositives à afficher, la navigation et la pagination, offrant ainsi une expérience utilisateur optimale.


Introduction d’AI Images
La version 3.13 d’Elementor Pro introduisait l’intelligence artificielle pour aider à rédiger des textes et du code depuis l’interface Elementor. Avec la mise à jour 3.14, l’IA est plus poussée et est maintenant disponible pour la création d’images. Cette fonctionnalité permet de décrire les images souhaitées et de les générer instantanément, éliminant ainsi la nécessité de rechercher des images libres de droits.
Vous pouvez personnaliser les images, ajuster leur taille et les modifier à l’aide de l’outil « Generative Fill ».
Elementor AI pour les images offre une approche novatrice pour accélérer le flux de travail et améliorer la créativité, tout en permettant de créer des images uniques et diversifiées pour des sites captivants.
Attention tout de même, cette fonctionnalité est contrainte à des crédits qui sont utilisés à chaque prompt. Deux types d’abonnement sont disponibles : AI Starter et AI Power.

Les nouveautés Elementor Pro 3.12
La nouvelle version d’Elementor Pro 3.12 est arrivée avec son lot de nouveautés et d’améliorations. Mais quelles sont les nouveautés Elementor Pro 3.12 ? On vous explique tout.
Les unités personnalisables disponibles partout
Les développeurs chez Elementor travaille depuis plusieurs versions pour permettre de modifier les types d’unités utilisant en intégrant, en plus des pixels et pourcentages, des unités comme REM, VW, VH, etc. Il était également possible à certains endroits de définir des mots-clés et des fonctions CSS personnalisés pour encore plus de contrôle sur le design. Il est notamment possible d’utiliser des fonctions CSS comme “calc(100% – 40px)”.
La version d’Elementor Pro 3.12 intègre, par soucis de cohérence, les unités px, %, EM et REM partout où il est possible d’ajuster la taille et les dimensions d’un élément. La sélection d’unité personnalisable est, elle aussi, disponible à ces différents endroits.
Un nouveau design d’interface
Elementor s’est fait un lifting ! L’interface de l’éditeur se dote d’une nouvelle palette de couleur. Les couleurs ont été optimisées pour améliorer l’accessibilité et prendre en compte les modes d’affichage clair et foncé (light/dark mode).

L’interface se modifie progressivement avec des nouvelles fonctionnalités disponibles en version beta. Elles ne sont donc pas activées par défaut, vous pouvez le faire dans les réglages d’Elementor Pro 3.12. Je parle ici de la « Top Bar ». Afin d’améliorer l’expérience utilisateur et la productivité, Elementor a voulu créer un accès facile et rapide aux actions courantes effectuées dans l’éditeur. Elle réunit les fonctionnalités comme la publication, le panneau des widgets, les paramètres de la page et du site, le panneau des révisions, les points de ruptures, etc.
Fonctionnalités à activer (fonctionnalités Beta)
Chaque version d’Elementor dispose de fonctionnalités qui ne sont pas activées par défaut, car elles ne sont pas totalement stables et sont encore en développement. Il faut donc se rendre dans les réglages d’Elementor Pro 3.12 sur WordPress afin d’activer ces fonctionnalités.

Conteneur Flexbox (Flexbox container)
Les conteneurs flexbox d’Elementor exploitent toute la puissance des flexbox CSS. Ils remplacent le fonctionnement des sections, sections internes et colonnes que l’on avait précédemment sur l’interface de l’éditeur. Cette fonctionnalité permet de mettre en page, de jouer avec l’alignement, la distribution des éléments de manières beaucoup plus simple et fluide, et avec moins de code qu’auparavant. Et permettent donc à votre site de se charger et s’exécuter beaucoup plus rapidement.
Le principal avantage d’utiliser ces éléments sera pour améliorer le design responsive lorsque la page s’affiche en mobile ou sur une tablette. Plus besoin d’utiliser des colonnes et des lignes, les éléments bougent plus facilement en fonction de la largeur de l’écran. Vous pouvez incorporer autant d’éléments que vous souhaitez dans un conteneur afin qu’ils soient être facilement alignés, ordonnés et espacés dans une direction horizontale ou verticale.
Lorsque vous cliquez sur un conteneur, vous trouverez plusieurs nouveaux paramètres tels que la direction, la justification du contenu, l’alignement des éléments, le wrap, etc, directement dans l’interface éditeur d’Elementor Pro.

Éléments imbriqués (Nested elements)
Les éléments imbriqués ont été introduits pour la première fois lors de la version 3.10 d’Elementor. En ayant activé la fonctionnalité des conteneurs flexbox et celle des éléments imbriqués, vous pouvez placer n’importe quel élément à l’intérieur d’un autre (pour les widgets qui supportent cette fonctionnalité).
Ces éléments sont particulièrement utiles lorsque l’on utilise les widgets tels que les carrousels, les accordéons, les onglets, etc.

Mega Menu
C’est la grande nouveauté d’Elementor Pro 3.12 ! Elle est disponible seulement dans la version payante de l’outil, on parle ici du Mega Menu sur Elementor.
Le widget menu a été repensé pour intégrer l’option d’un mega menu permettant d’afficher davantage de contenu, sans plugin supplémentaire. Pour utiliser la fonctionnalité du mega menu, vous aurez besoin d’activer les conteneurs flexbox et les éléments imbriqués, vu précédemment, dans les options d’Elementor.
La création de menu dans les paramètres de WordPress n’est plus obligatoire, vous pouvez le créer de zéro depuis l’interface d’Elementor Pro. Vous pouvez donc ajouter, pour chaque élément de menu que vous souhaitez, un contenu déroulant (dropdown content) comprenant absolument ce que vous voulez ! Vous pouvez y glisser n’importe quel widget disponible dans le panneau à gauche de l’interface.

Le mega menu fonctionne également en responsive et s’adapte automatiquement. Il faudra seulement prendre en compte les ajustements à faire pour garder la lisibilité des sous-menus.
Amélioration des performances
La nouvelle mise à jour 3.12 d’Elementor intègre également des optimisations de performances, notamment en améliorant le score LCP des pages. Le score LCP, c’est le “Largest Contentful Paint”, il s’agit en fait du temps de chargement des éléments les plus volumineux.
Cette version améliore le chargement des images en arrière-plan en retardant leur chargement. Elementor va d’abord utiliser la couleur dominante de l’image comme couleur d’arrière-plan avec un effet de flou. C’est lorsque l’utilisateur scroll vers le bas que la page récupère l’image d’arrière-plan. Le chargement différé de ces images (souvent volumineuses) permettent d’obtenir un affichage plus rapide de la page.
Bien évidemment, nous vous recommandons d’optimiser vos images pour le web, mais celles positionnées en background afin de faciliter et d’amélioration le temps de chargement.
C’est le moment de vérifier vos mises à jour
Si vous utilisez Elementor Pro, c’est le moment de vérifier vos mises à jour et de profiter de toutes les améliorations de cette dernière version.
Par ailleurs, nous vous conseillons vivement de toujours rester à jour sur vos outils afin de bénéficier des fonctionnalités et améliorations, mais également pour bénéficier des correctifs de sécurité. Cela protègent votre site Web contre les vulnérabilités potentielles et les failles de sécurité qui pourraient être exploitées par les pirates informatiques
À noter, à partir de la version Elementor Pro 3.12 nécessite une version minimale de WordPress 5.9.