Point culminant du plugin Divi : icônes WP et Divi

WP and Divi Icons est un plugin tiers pour WordPress qui fonctionne avec n'importe quel thème WordPress et s'intègre au Divi Builder. À utiliser avec Divi, il comprend des mises en page exclusives que vous pouvez utiliser dans vos projets. Les icônes sont disponibles dans l'éditeur WordPress et dans n'importe quel module Divi qui permet de choisir des icônes. Dans cet article, nous examinerons les icônes WP et Divi et verrons ce qui les distingue de la foule.

WP et Divi Icons ajoutent plus de 2500 icônes à WordPress. Il comprend des icônes Font Awesome, des icônes matérielles et 450 icônes personnalisées, dont 48 icônes multicolores. Il est disponible en édition gratuite et pro. Je teste l'édition pro.

Installation des icônes WP et Divi

Téléchargez et activez le plugin comme d'habitude. J'utilise la version 1.1.0 avec Divi version 3.17 et WordPress 4.9.8.

Ensuite, vous devrez activer votre licence. Vous pouvez accéder à l'écran d'activation ou cliquer sur le message qui apparaît en haut de l'écran. Cependant, il est toujours utile de savoir comment s'y rendre, car cette page deviendra l'écran des options une fois que vous aurez entré votre clé de licence.

Pour accéder à l'écran quel que soit le thème que vous utilisez, cliquez sur le lien Instructions dans la description du plugin dans la liste des plugins. Si vous utilisez Divi, un nouvel élément de menu est ajouté au menu Divi dans le tableau de bord appelé WP et Divi Icons. Cliquez dessus et entrez votre clé de licence.

Personnalisation des icônes multicolores

Après avoir entré votre clé de licence, il ouvre l'écran avec les instructions, une liste de 48 icônes multicolores et des outils pour créer vos propres schémas de couleurs pour ces icônes.

Vous avez le contrôle sur trois couleurs. Ajustez les commandes de couleur et attendez quelques secondes pour voir les résultats. Cliquer sur Supprimer supprime le schéma de couleurs. Les couleurs ajoutent un petit effet d'ombrage, ce qui crée des versions plus sombres de chaque couleur et est incroyable.

Cliquer sur Ajouter un schéma de couleurs crée un nouvel ensemble d'icônes multicolores que vous pouvez ajuster.

Ajoutez autant de schémas de couleurs que vous le souhaitez. Cela élargit considérablement ce que vous pouvez faire avec les icônes. Les commandes sont intuitives. En fin de compte, j'ai trouvé cela un peu addictif.

Utilisation des icônes WP et Divi dans WordPress avec n'importe quel thème

Pour utiliser les icônes avec n'importe quel thème, sélectionnez la nouvelle icône ajoutée à l'éditeur WordPress.

Cela ouvre l'éditeur où vous pouvez choisir une icône, modifier la couleur en la tapant dans le champ de couleur ou en utilisant le sélecteur de couleurs, modifier la taille en entrant le nombre en pixels ou en utilisant le curseur, ajouter un titre et ajouter une classe. Vous pouvez également rechercher des icônes.

Toutes les modifications que vous apportez sont affichées en direct. Dans cet exemple, j'ai entré la couleur que je voulais, changé la taille en 106 pixels et changé le nom en Feuille verte.

Cliquer sur OK ajoute l'icône à votre contenu.

Double-cliquez sur l'icône pour ouvrir l'éditeur et apporter des modifications.

Cliquez sur OK et les modifications sont répercutées sur l'icône dans votre contenu.

Cet éditeur ne modifie pas les icônes multicolores. Vous devrez les modifier dans l'écran principal des paramètres que j'ai démontré ci-dessus. Vous pouvez toujours les sélectionner dans cet éditeur, modifier leur taille, ajouter un titre, ajouter une classe et les insérer dans votre contenu à partir d'ici.

Les icônes ont fière allure dans le contenu.

Utilisation des icônes WP et Divi avec le Divi Builder

De nombreuses nouvelles icônes sont ajoutées au Divi Builder auxquelles vous pouvez accéder depuis n'importe quel module vous permettant de sélectionner des icônes. Une nouvelle fonctionnalité de recherche est ajoutée et les icônes sont beaucoup plus grandes, ce qui les rend plus faciles à voir (ce qui montre que ce plugin a probablement été conçu par un vieil homme comme moi. Je peux à la fois m'identifier et apprécier cette fonctionnalité).

J'aimerais voir un filtre ajouté pour pouvoir choisir entre Font Awesome, Material ou les icônes personnalisées. De cette façon, je pouvais facilement voir les icônes personnalisées et ignorer les icônes Font Awesome et Material si je voulais quelque chose de différent de tout le monde, ou créer simplement avec Font Awesome ou Material Icons, ou mélanger mes icônes de manière sélective.

Il comprend à la fois des icônes simples et multicolores.

Recherchez et modifiez les icônes en direct depuis le frontend.

Ils sont réglables comme n'importe quelle icône Divi.

Vous pouvez également ajouter des icônes multicolores à partir du générateur de frontend. Vous ne pouvez pas ajuster les couleurs de l'icône ici (cela se fait dans l'éditeur d'icônes multicolores), mais vous pouvez ajouter un cercle, ajouter une bordure, ajuster leurs couleurs et ajuster la taille de l'icône à partir des paramètres du module.

Dans cet exemple, j'ai ajouté un cercle avec une bordure.

Vous pouvez les utiliser à la fois depuis le frontend et le backend.

L'éditeur d'icônes WordPress est également disponible dans le module de texte Divi. Cet éditeur fonctionne exactement de la même manière qu'avec n'importe quel thème WordPress.

Dispositions des icônes WP et Divi

Le plugin fonctionne avec n'importe quel thème, mais il possède des fonctionnalités spéciales uniquement pour Divi. L'un des plus grands avantages de son utilisation avec Divi réside dans ses mises en page personnalisées exclusives. Ils ont été conçus sur mesure à l'aide d'icônes WP et Divi et le lien de téléchargement n'est disponible que dans le plugin. Ils sont disponibles en téléchargement pour toute personne disposant du plugin et peuvent être utilisés sur n'importe quel projet. Ce sont des mises en page complètes avec de nombreux modules stylisés.

Il y en a déjà plusieurs disponibles et plusieurs autres en route. Voici un aperçu de chacun en mettant l'accent sur la façon dont ils utilisent les icônes. Vous pouvez les voir sur la page de démonstration du développeur.

Mise en page du commerce électronique

Cette mise en page comprend un en-tête stylisé avec des bulles pour montrer les types de passerelles de paiement et de partenaires d'expédition que l'entreprise utilise. Des icônes multicolores indiquent les services offerts. Son fonctionnement est indiqué dans des onglets. Il comprend également des tableaux de prix, des témoignages, une inscription à la newsletter de la FAQ et un pied de page.

Mise en page de l'agence de création

Celui-ci comprend un en-tête stylisé, une zone sur les types de services que vous proposez, un portfolio, un curseur couvrant votre façon de travailler et les étapes que vous suivez, des témoignages, des récompenses, sur votre équipe, un contact et un pied de page. Il utilise beaucoup de coins inclinés et d'effets d'ombre profonde. Les icônes multicolores montrent les services.

Mise en page de l'entreprise sombre

Celui-ci a un en-tête à deux colonnes avec une image d'un côté et du texte de l'autre. Une section présentant les services que vous proposez utilise des icônes multicolores et affiche des images et du texte en alternance vers le bas de la page. D'autres sections utilisent un grand texte d'arrière-plan et montrent l'historique de l'entreprise, les membres de l'équipe avec des icônes multicolores dans la superposition, le formulaire de contact, les informations de contact et le pied de page.

Lumière de mise en page d'entreprise

C'est la même mise en page que Business Layout Dark, mais avec des couleurs claires.

Mise en page à but non lucratif

Celui-ci affiche un curseur d'image en plein écran avec un menu vertical à droite et utilise des icônes pour les boutons de suivi social. Une section mince en dessous montre un CTA de don. Il comprend également une section à propos, les causes que vous soutenez, une section d'événements, des projets, des présentations avec des icônes, des sponsors et un pied de page.

Licence et documentation

Les prix varient de gratuit pour une édition limitée, 39 $ pour un seul site, 59 $ pour 3 sites et 79 $ pour des sites illimités. Vous pouvez acheter le plugin sur le site Web du développeur.

Il comprend un support premium et 3 ans de mises à jour. La documentation est fournie sur le site Web du développeur.

Mettre fin aux pensées

WP et Divi Icons sont faciles à utiliser. Il faut quelques secondes supplémentaires pour charger les icônes lorsque je clique dessus dans les modules Divi. Je suis sûr que cela est principalement dû à ma lenteur de connexion Internet « bienvenue à la campagne ». J'aimerais voir un filtre ajouté aux modules Divi. La fonction de recherche est utile pour trouver des icônes en fonction de mots-clés.

J'aime le fait qu'il ajoute Font Awesome et Material Icons, mais mes favoris sont les icônes personnalisées, et en particulier les icônes multicolores. L'éditeur est simple et amusant à utiliser. Je pense que c'est un super plugin même sans Divi, mais c'est encore mieux avec Divi à cause des mises en page gratuites.

Nous voulons de vos nouvelles. Avez-vous essayé WP et Divi Icons ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via VectorsMarket / shutterstock.com