Les nouveautés Elementor Pro

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 !

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.