Evidenziazione del plug-in Divi: icone WP e Divi

WP e Divi Icons è un plug-in di terze parti per WordPress che funziona con qualsiasi tema WordPress e si integra in Divi Builder. Per l'utilizzo con Divi, include layout esclusivi che puoi utilizzare nei tuoi progetti. Le icone sono disponibili nell'editor di WordPress e in qualsiasi modulo Divi che ti consente di scegliere le icone. In questo articolo, daremo un'occhiata alle icone WP e Divi e vedremo cosa lo distingue dalla massa.

WP e Divi Icons aggiungono oltre 2500 icone a WordPress. Include Font Awesome Icons, Material Icons e 450 icone personalizzate tra cui 48 icone multicolori. È disponibile sia in versione gratuita che in versione pro. Sto testando l'edizione pro.

Installazione di icone WP e Divi

Carica e attiva il plugin normalmente. Sto usando la versione 1.1.0 con Divi versione 3.17 e WordPress 4.9.8.

Successivamente, dovrai attivare la tua licenza. Puoi accedere alla schermata di attivazione o fare clic sul messaggio che appare nella parte superiore dello schermo. Tuttavia, è comunque utile sapere come navigare lì, perché questa pagina diventerà la schermata delle opzioni una volta inserita la chiave di licenza.

Per accedere allo schermo indipendentemente dal tema che stai utilizzando, fai clic sul collegamento Istruzioni nella descrizione del plug-in nell'elenco dei plug-in. Se stai usando Divi, una nuova voce di menu viene aggiunta al menu Divi nella dashboard chiamata WP e Divi Icons. Fare clic su questo e inserire la chiave di licenza.

Personalizzazione delle icone multicolori

Dopo aver inserito la chiave di licenza, si apre la schermata con le istruzioni, l'elenco di 48 icone multicolori e gli strumenti per creare le proprie combinazioni di colori per tali icone.

Hai il controllo su tre colori. Regola i controlli del colore e attendi qualche secondo per vedere i risultati. Facendo clic su Rimuovi si elimina la combinazione di colori. I colori aggiungono un piccolo effetto di ombreggiatura, che crea versioni più scure di ogni colore e sembra incredibile.

Facendo clic su Aggiungi combinazione di colori viene creato un nuovo set di icone multicolori che è possibile regolare.

Aggiungi tutte le combinazioni di colori che desideri. Questo espande notevolmente ciò che puoi fare con le icone. I controlli sono intuitivi. A quanto pare, l'ho trovato un po' avvincente.

Utilizzo delle icone WP e Divi in ​​WordPress con qualsiasi tema

Per utilizzare le icone con qualsiasi tema, seleziona la nuova icona aggiunta all'editor di WordPress.

Si apre l'editor in cui è possibile scegliere un'icona, modificare il colore digitandolo nel campo del colore o utilizzando il selettore di colori, modificare le dimensioni inserendo il numero in pixel o utilizzando il dispositivo di scorrimento, aggiungere un titolo e aggiungere una classe. Puoi anche cercare le icone.

Tutte le modifiche apportate vengono mostrate in tempo reale. In questo esempio, ho inserito il colore che volevo, ho cambiato la dimensione a 106 pixel e ho cambiato il nome in Green Leaf.

Facendo clic su OK si aggiunge l'icona al contenuto.

Fare doppio clic sull'icona per aprire l'editor e apportare modifiche.

Fare clic su OK e le modifiche si riflettono sull'icona all'interno del contenuto.

Questo editor non modifica le icone multicolori. Dovrai modificarli nella schermata delle impostazioni principali che ho mostrato sopra. Puoi ancora selezionarli da questo editor, modificarne le dimensioni, aggiungere un titolo, aggiungere una classe e inserirli nel tuo contenuto da qui.

Le icone hanno un bell'aspetto all'interno del contenuto.

Utilizzo delle icone WP e Divi con Divi Builder

Molte nuove icone sono state aggiunte a Divi Builder a cui è possibile accedere da qualsiasi modulo che ti permetta di selezionare le icone. Viene aggiunta una nuova funzione di ricerca e le icone sono molto più grandi, rendendole più facili da vedere (il che mostra che questo plugin è stato probabilmente progettato da un vecchio come me. Posso sia riconoscere che apprezzare questa funzione).

Vorrei vedere un filtro aggiunto in modo da poter scegliere tra Font Awesome, Material o le icone personalizzate. In questo modo potrei facilmente vedere le icone personalizzate e ignorare le icone Font Awesome e Material se volevo qualcosa di diverso da tutti gli altri, o costruire solo con Font Awesome o Material Icons, o fondere le mie icone in modo selettivo.

Include icone singole e multicolori.

Cerca e cambia le icone in tempo reale dal frontend.

Sono regolabili proprio come qualsiasi icona Divi.

Puoi anche aggiungere icone multicolori dal generatore di frontend. Non puoi regolare i colori dell'icona qui (questo viene fatto nell'editor di icone multicolori), ma puoi aggiungere un cerchio, aggiungere un bordo, regolare i loro colori e regolare le dimensioni dell'icona dalle impostazioni del modulo.

In questo esempio, ho aggiunto un cerchio con un bordo.

Puoi usarli sia dal frontend che dal backend.

L'editor di icone di WordPress è disponibile anche nel modulo di testo Divi. Questo editor funziona esattamente come con qualsiasi tema WordPress.

Layout delle icone WP e Divi

Il plugin funziona con qualsiasi tema, ma ha funzionalità speciali solo per Divi. Uno dei maggiori vantaggi dell'utilizzo con Divi sono gli esclusivi layout personalizzati. Sono stati progettati su misura utilizzando le icone WP e Divi e il collegamento per il download è disponibile solo all'interno del plug-in. Sono disponibili per il download a chiunque disponga del plug-in e possono essere utilizzati su qualsiasi progetto. Sono layout completi con molti moduli in stile.

Ce ne sono già diversi disponibili e molti altri in arrivo. Ecco uno sguardo a ciascuno con un focus su come usano le icone. Puoi vederli nella pagina demo dello sviluppatore.

Layout e-commerce

Questo layout include un'intestazione in stile con bolle per mostrare i tipi di gateway di pagamento e partner di spedizione utilizzati dall'azienda. Le icone multicolori mostrano i servizi offerti. Il funzionamento è mostrato nelle schede. Include anche tabelle dei prezzi, testimonianze, iscrizione alla newsletter delle domande frequenti e piè di pagina.

Layout Agenzia Creativa

Questo include un'intestazione in stile, un'area sui tipi di servizi che offri, un portfolio, uno slider che copre come lavori e i passaggi che fai, testimonianze, premi, sulla tua squadra, contatto e piè di pagina. Utilizza molti angoli angolati ed effetti di ombre profonde. Le icone multicolori mostrano i servizi.

Layout aziendale scuro

Questo ha un'intestazione a due colonne con un'immagine su un lato e del testo sull'altro. Una sezione che mostra i servizi che offri utilizza icone multicolori e mostra immagini e testo alternati lungo la pagina. Altre sezioni utilizzano un testo di sfondo di grandi dimensioni e mostrano la storia dell'azienda, i membri del team con icone multicolori in sovrimpressione, modulo di contatto, informazioni di contatto e piè di pagina.

Luce layout aziendale

Questo è lo stesso layout di Business Layout Dark, ma con colori chiari.

Layout senza scopo di lucro

Questo mostra un dispositivo di scorrimento dell'immagine a schermo intero con un menu verticale a destra e utilizza le icone per i pulsanti di follow social. Una sezione sottile sotto questa mostra una CTA di donazione. Include anche una sezione informazioni, cause supportate, una sezione eventi, progetti, descrizioni con icone, sponsor e un piè di pagina.

Licenza e documentazione

I prezzi vanno da gratis per un'edizione limitata, $ 39 per un singolo sito, $ 59 per 3 siti e $ 79 per siti illimitati. Puoi acquistare il plugin sul sito web dello sviluppatore.

Include supporto premium e 3 anni di aggiornamenti. La documentazione è disponibile sul sito Web dello sviluppatore.

Pensieri finali

WP e Divi Icons è facile da usare. Ci vogliono alcuni secondi in più per caricare le icone quando faccio clic su di esse nei moduli Divi. Sono sicuro che questo sia dovuto principalmente alla mia lenta connessione Internet "benvenuta in campagna". Vorrei vedere un filtro aggiunto ai moduli Divi. La funzione di ricerca è utile per trovare icone in base a parole chiave.

Mi piace che aggiunga Font Awesome e Material Icons, ma le mie preferite sono le icone personalizzate e soprattutto le icone multicolori. L'editor è semplice e divertente da usare. Penso che sia un ottimo plugin anche senza Divi, ma è ancora meglio con Divi grazie ai layout gratuiti.

Vogliamo sentire da voi. Hai provato le icone WP e Divi? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite VettoriMarket / shutterstock.com