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.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.
