Point culminant du plugin Divi: icônes de téléchargement Divi

Divi Upload Icons est un plugin tiers pour Divi qui permet d'ajouter facilement plus d'icônes au Divi Builder. Contrairement à d'autres plugins d'icônes qui n'intègrent que Font Awesome et Material Icons, celui-ci vous permet d'ajouter n'importe quel ensemble d'icônes que vous souhaitez. Il doit simplement s'agir d'un type de fichier compatible, et il se trouve qu'il utilise les cinq types de fichiers les plus populaires.

Le plugin ajoute un téléchargeur à votre installation WordPress où vous allez faire glisser et déposer vos fichiers d'icônes. Les icônes sont ensuite ajoutées à n'importe quel module Divi qui affiche des icônes. Tout comme les icônes Divi standard, tout jeu d'icônes que vous téléchargez peut être stylisé avec le Divi Builder. Dans ce point culminant du plugin Divi, nous examinerons les icônes de téléchargement Divi et verrons à quel point il est facile à utiliser.

Installer et activer les icônes de téléchargement Divi

Téléchargez et activez le plugin comme d'habitude, puis accédez à Paramètres > Icônes de téléchargement Divi dans le menu du tableau de bord pour entrer votre clé d'activation.

Télécharger des icônes avec Divi Upload Icons

Dans l'écran des paramètres se trouve également la fonction de téléchargement. Ici, vous allez télécharger vos icônes. Les icônes doivent être aux formats .eot, .svg, .ttf, .woff, .woff2 et .css. Vous pouvez télécharger des icônes à partir de n'importe quelle source et les utiliser avec les icônes de téléchargement Divi tant qu'elles sont dans ces formats et incluent le fichier CSS. Pour installer les icônes, faites-les glisser et déposez-les dans la fenêtre de téléchargement. Les instructions sont fournies dans la zone de téléchargement et il y a une courte vidéo qui montre comment l'utiliser.

Les icônes incluent parfois plusieurs formats. Vous devez télécharger les fichiers CSS avec les icônes, et les icônes doivent être un fichier pris en charge. Dans cet exemple, je télécharge plusieurs ensembles. Ils incluent plusieurs types de fichiers et fichiers CSS. Ceux de l'image ci-dessus avec les icônes oranges ont des fichiers manquants.

Les fichiers de cet exemple sont corrects. J'ai téléchargé des types de fichiers pris en charge avec leurs fichiers CSS. J'ai maintenant plus de 2500 nouvelles icônes. Je les ai téléchargés depuis iconfont, Dripicons, Foundation Icon Fonts et Map Icons. Le développeur tient à jour une liste d'icônes qui ont été testées et que vous pouvez utiliser avec les icônes de téléchargement Divi. Bien sûr, il existe de nombreuses autres icônes que vous pouvez utiliser.

À titre de comparaison, voici le module de présentation Divi avant de télécharger les nouvelles icônes. Divi comprend 360 icônes. Vous pouvez avoir une idée du nombre en regardant la longueur de la barre dans la fenêtre.

Cette image comprend toutes les 2500 icônes que j'ai téléchargées. J'ai maintenant beaucoup plus d'icônes parmi lesquelles choisir et la barre de la fenêtre est beaucoup plus petite. Vous pouvez voir les icônes dans Visual Builder, mais il n'inclut pas les nouveaux outils de filtrage et de recherche.

Filtre et recherche d'icônes de téléchargement Divi

Un nouvel outil de filtrage est ajouté si vous utilisez le générateur classique. Vous pouvez ouvrir ou fermer le filtre. Il est fermé dans cet exemple.

Cliquez sur Filtrer les icônes pour voir les familles d'icônes que vous avez installées et une fonction de recherche. Cliquez sur l'une des familles d'icônes pour n'afficher que cette famille. Vous pouvez également afficher toutes les familles ou fermer l'option de filtre et de recherche. Le filtre fonctionne rapidement. Cliquer sur une famille d'icônes ou rechercher des icônes affiche les icônes presque instantanément, même avec mes 2500 icônes. Je suis sûr que cela dépend en partie du nombre d'icônes que vous avez installées, votre expérience peut donc être différente.

Dans cet exemple, j'ai sélectionné les icônes de carte que j'ai téléchargées. Il y a près de 200 icônes dans cette famille d'icônes.

Voici les icônes de la Fondation . Il compte également près de 200 icônes.

Voici les Icofonts . Cette famille d'icônes ajoute plus de 2000 icônes.

Vous pouvez effectuer une recherche par mot-clé ou par nom de famille d'icônes. Les résultats incluent des icônes de toutes les familles d'icônes que vous avez téléchargées et celles qui étaient déjà disponibles dans Divi.

Il serait intéressant que le filtre fonctionne après la recherche afin de voir les résultats par famille d'icônes. Il vous montre le nom avec la famille d'icônes lorsque vous survolez chaque icône. Dans l'image ci-dessus, je survole la deuxième icône en partant de la droite. C'est assez utile, donc le filtre de recherche n'est pas vraiment une priorité élevée.

Exemples d'icônes de téléchargement Divi

Bien entendu, l'un des avantages de l'utilisation des icônes est la possibilité d'ajuster les tailles, les couleurs, d'ajouter des cercles, des bordures, etc., à l'aide du Divi Builder. Le plugin et les icônes fonctionnent avec Visual Builder, mais il n'affiche pas les icônes dans la vue en direct. Cet exemple montre les icônes dans la sélection d'icônes du module, mais l'aperçu en direct ne fonctionne pas.

Les icônes s'affichent très bien sur la page ou la publication publiée. Vous pouvez toujours utiliser Visual Builder pour personnaliser la taille et les couleurs, vous ne les verrez tout simplement pas dans l'aperçu en direct. Je préfère le Visual Builder lorsque je personnalise les couleurs et les tailles, mais j'utiliserai le Classic Builder pour le reste des exemples. Il s'agit de la page de destination du pack de mise en page Hypothèque.

Les icônes ont fière allure et peuvent être personnalisées tout comme les icônes Divi standard. J'ai trouvé toutes ces icônes en utilisant la fonction de recherche. Il s'agit des paramètres par défaut.

J'ai changé les couleurs pour qu'elles correspondent à la mise en page, tout comme les images originales utilisées par la mise en page.

Pour celui-ci, j'ai choisi d'utiliser la taille de la police pour l'icône et de l'ajuster à 32px. Il commence à ressembler davantage au design original, mais avec mes icônes.

Dans celui-ci, j'ai ajouté un cercle à chaque icône. J'ai changé les couleurs des cercles et des icônes, et j'ai ajouté une bordure aux deuxième et quatrième en partant de la gauche. J'ai choisi différentes couleurs juste pour montrer à quoi elles ressemblent.

Voici à quoi ressemblent les icônes placées à gauche du texte.

Dans celui-ci, j'ai remplacé les images de la mise en page du parcours de golf par des icônes. J'ai utilisé les couleurs de la mise en page et les ai dimensionnées à 48px.

Pour cet exemple, j'ai désactivé le réglage de la taille de la police pour les icônes. C'est la taille par défaut, à 96px. Ils se marient bien avec la conception de la mise en page.

Ils ont également l'air incroyable lors de l'utilisation des paramètres de l'icône de cercle. J'ai changé la couleur de l'icône en blanc et j'ai utilisé le bronzage de la mise en page comme couleur du cercle. Les icônes sont toujours à 48px.

Pour celui-ci, j'ai utilisé l'une des nuances de vert de la mise en page. Il y a beaucoup de possibilités avec les personnalisations du Divi Builder.

Prix ​​des icônes de téléchargement Divi

Les icônes de téléchargement Divi coûtent 24,97 $. Il a une utilisation et des mises à jour illimitées. Vous pouvez acheter des icônes de téléchargement Divi sur le marché.

Mettre fin aux pensées

Divi Upload Icons facilite le téléchargement des icônes exactes que vous souhaitez à partir de n'importe quelle bibliothèque de polices. L'idée derrière le plugin est au lieu d'installer des milliers d'icônes dont vous n'avez pas besoin, vous pouvez installer les icônes exactes et les familles d'icônes que vous souhaitez utiliser avec votre site Web Divi.

Puisque vous téléchargez les icônes dans le Divi Builder, elles sont stockées sur votre serveur. J'ai téléchargé plus de 2500 icônes et je n'ai eu aucun problème de vitesse avec le Divi Builder ou mon site Web.

Gardez à l'esprit qu'il nécessite des polices avec le fichier de police et le fichier CSS. Il est facile de télécharger les polices de manière incorrecte (devinez comment je le sais). Assurez-vous de suivre exactement les instructions ou les polices seront des carrés vides. De plus, cela ne fonctionne pas avec Font Awesome 5, mais cela fonctionne très bien avec 4.7.

J'ai aimé utiliser les icônes de téléchargement Divi. J'aimerais l'utiliser avec Visual Builder, mais cela fonctionne très bien avec le constructeur classique. Il a fallu un essai supplémentaire pour m'assurer que j'avais les bons fichiers, mais compte tenu du nombre de familles d'icônes sur Internet, cela vaut la peine de prendre le temps de trouver des icônes avec les bons fichiers. Les icônes ne sont pas difficiles à trouver et le développeur fournit de nombreux liens vers des icônes qu'il a déjà testées.

Si vous souhaitez ajouter vos propres icônes au Divi Builder, Divi Upload Icons vaut le détour.

Nous voulons de vos nouvelles. Avez-vous essayé les icônes de téléchargement Divi ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via hanss / shutterstock.com