La nouvelle version d’Elementor Pro 3.12 est arrivée avec son lot de nouveautés et d’améliorations.
Elementor Pro est l’un des constructeurs de pages les plus populaires pour WordPress, cette mise à jour devrait plaire à tous ses utilisateurs. Mais quelles sont les nouveautés Elementor Pro 3.12 ? Dans cet article, notre agence WordPress explore les nouveautés et améliorations apportées par cette mise à jour.
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.
Vérifiez vos mises à jour pour bénéficier des nouveautés Elementor Pro 3.12
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, cette mise à jour nécessite une version minimale de WordPress 5.9.
