Elementor v2.6 : des icônes à gogo !

Avec cette nouvelle version d’Elementor l’équipe Pojo fait évoluer la gestion des icônes de manière efficace et très complète.

Certains utilisateurs ont fait remonter leur impatience de retrouver la version 5 de Font Awesome dans Elementor depuis quelques temps, cette police d’icônes est maintenant disponible avec la version 2.6 du constructeur de page pour WordPress.

Seulement la version gratuite de Font Awesome 5

C’est la version gratuite qui est mise à disposition dans la nouvelle gestion proposée avec cette nouvelle version d’Elementor, soit 1 534 icônes. Deux jeux d’icônes (filaires ou pleines) sont ainsi visibles dans la nouvelle interface bien plus pratique que précédemment.

Une migration de FA4 à FA5 qui peut poser des problèmes

Le fait de passer vers Font Awesome 5 depuis la version 4 (1) peut engendrer des problèmes car les icônes sont sensées être similaires dans les 2 polices, en réalité il y a des changements parfois surprenants ! L’équipe POJO en est bien consciente et alerte de plusieurs façons sur ces éventuels problèmes de migration.
Une vidéo en fait le point ici.

Il n’y a pas trop de problèmes car une librairie Javascript shim.js (2) est présente pour faire la liaison entre les noms d’icônes FA4 et FA5. Dans les pires cas il vous faudra refaire le choix dans la nouvelle police 5, ce n’est pas insupportable mais sur un site utilisant beaucoup d’icônes cela peut demander pas mal de travail. Réfléchissez bien à ce problème avant de vous lancer !

Un support natif du format SVG en option

Autre nouveauté liée à cette nouvelle fonction de gestion d’icônes, il est maintenant possible d’utiliser directement des images au format SVG en lieu et place des icônes, ceci dans la plupart des widgets d’Elementor proposant une icône. Pour que cela soit transparent il faut activer le support du SVG dans les réglages d’Elementor.

Cette fonction est un must tant le format SVG est devenu incontournable avec le responsif et les écrans Rétina. Plus d’icônes floues, le rendu est nettement meilleur sur smartphone et tablette, le dimensionnement est illimité.

L’extension Custom Icons for Elementor toujours valable

Avec l’apparition de cette nouvelle gestion des icônes Elementor PRO ajoute la possibilité d’importer vos propres packs créés sur Fontello, IcoMoon, et Fontastic. Cette fonctionnalité permet de se passer de l’extension Custom Icons for Elementor qui réalisait ça auparavant.

Le développeur de Custom Icons for Elementor à mis à jour cette dernière de manière à faire apparaître les packs Fontello dans la nouvelle bibliothèque, vous n’êtes donc pas limité sans Elementor PRO et ça c’est quand même bien.

Liste des widgets Elementor qui utilisent la bibliothèque d’icônes :

• Bouton
• Accordéon
• Boîte à icône
• Liste d’icône
• Icône
• Icônes Sociales
• Va-et-vient
• Appel à l’action (PRO)
• Évaluation (PRO)
• Boîte dynamique (PRO)
• Formulaire (PRO)
• Tableau des prix (PRO)
• Information de publication (PRO)

Une aide accrue dans l’interface

Outre cette fonctionnalité évoluée Elementor v2.6 apporte un lien d’aide toujours présent dans la colonne d’édition pour vous renvoyer à la documentation (encore en anglais). Un autre ajout vient compléter la palette du Navigateur pour certaines fonctions liées aux widgets : le positionnement, les effets d’animation et les CSS personnalisées. Vous aurez une icône vous indiquant si le widget utilise un de ces réglages avec un accès direct à ce dernier.

Conclusion

Ce n’est certes pas une version majeure du constructeur de page, elle n’apporte pas une des fonctions demandées par les développeur de tous bords par rapport au constructeur de thème. La refonte de la gestion des icône est tout de même salutaire, outre le support (enfin) de Font Awesome c’est surtout l’introduction du SVG qui est notable, même si ce dernier n’est pas exempt de soucis de sécurité majeurs.

1 – Font Awesome 4 a été lancé pour la première fois en 2013 et utilisait 675 icônes. Font Awesome 5 est sorti en 2017 et est plus récent avec une meilleure vitesse, plus d’icônes, des familles de polices et plus.

2 – Qu’est-ce que shim.js ? Font Awesome version 5 a changé certains noms d’icônes. Un code JavaScript s’exécute dans chaque page et convertit les icônes FA4 en FA5. Il vous permet de conserver les noms d’icône v4 sur v5.

Sources : Elementor, Custom Icons for Elementor, Font Awesome 5,