Evidenziazione del plug-in Divi: icone di caricamento Divi

Divi Upload Icons è un plug-in di terze parti per Divi che semplifica l'aggiunta di più icone a Divi Builder. A differenza di altri plug-in di icone che integrano solo Font Awesome e Material Icons, questo ti consente di aggiungere qualsiasi set di icone che desideri. Deve solo essere un tipo di file compatibile e capita di utilizzare i cinque tipi di file più popolari.

Il plugin aggiunge un uploader alla tua installazione di WordPress dove trascinerai e rilascerai i tuoi file di icone. Le icone vengono quindi aggiunte a qualsiasi modulo Divi che visualizza icone. Proprio come le icone Divi standard, qualsiasi set di icone che carichi può essere stilizzato con Divi Builder. In questo momento saliente del plug-in Divi, daremo un'occhiata alle icone di caricamento Divi e vedremo quanto è facile da usare.

Installazione e attivazione delle icone di caricamento Divi

Carica e attiva il plug-in normalmente, quindi vai su Impostazioni > Icone di caricamento Divi nel menu della dashboard per inserire la chiave di attivazione.

Caricamento di icone con Divi Upload Icons

Anche nella schermata delle impostazioni è la funzione di caricamento. Qui caricherai le tue icone. Le icone devono essere nei formati .eot, .svg, .ttf, .woff, .woff2 e .css. Puoi scaricare icone da qualsiasi fonte tu voglia e usarle con Divi Upload Icons purché siano in questi formati e includano il file CSS. Per installare le icone, trascinale nella finestra di caricamento. Le istruzioni sono fornite nell'area di caricamento e c'è un breve video che mostra come usarlo.

Le icone a volte includono più formati. Devi caricare i file CSS insieme alle icone e le icone devono essere un file supportato. In questo esempio, sto caricando diversi set. Includono diversi tipi di file e file CSS. Quelli nell'immagine sopra con le icone arancioni hanno file mancanti.

I file in questo esempio sono corretti. Ho caricato i tipi di file supportati con i loro file CSS. Ora ho oltre 2500 nuove icone. Li ho scaricati da iconfont, Dripicons, Foundation Icon Fonts e Map Icons. Lo sviluppatore mantiene un elenco di icone che sono state testate e che puoi utilizzare con Divi Upload Icons. Naturalmente, ci sono molte altre icone che puoi usare.

Per confronto, ecco il modulo blurb Divi prima di caricare le nuove icone. Divi include 360 ​​icone. Puoi avere un'idea di quanti sono guardando la lunghezza della barra nella finestra.

Questa immagine include tutte le 2500 icone che ho caricato. Ora ho molte più icone tra cui scegliere e la barra per la finestra è molto più piccola. Puoi vedere le icone in Visual Builder, ma non include il nuovo filtro e gli strumenti di ricerca.

Divi Upload Icons Filter and Search

Se utilizzi il builder classico viene aggiunto un nuovo strumento di filtro. Puoi aprire o chiudere il filtro. È chiuso in questo esempio.

Fare clic su Icone filtro per visualizzare le famiglie di icone installate e una funzione di ricerca. Fare clic su una delle famiglie di icone per visualizzare solo quella famiglia. Puoi anche visualizzare tutte le famiglie o chiudere il filtro e l'opzione di ricerca. Il filtro funziona velocemente. Facendo clic su una famiglia di icone o cercando icone, le icone vengono visualizzate quasi istantaneamente, anche con le mie 2500 icone. Sono sicuro che dipende in parte da quante icone hai installato, quindi la tua esperienza potrebbe essere diversa.

In questo esempio, ho selezionato le icone della mappa che ho caricato. Ci sono quasi 200 icone in questa famiglia di icone.

Ecco le Icone della Fondazione . Ha anche quasi 200 icone.

Ecco gli Icofont . Questa famiglia di icone aggiunge oltre 2000 icone.

Puoi cercare per parola chiave o per nome di famiglia di icone. I risultati includono icone di tutte le famiglie di icone che hai caricato e quelle che erano già disponibili in Divi.

Sarebbe interessante se il filtro funzionasse dopo la ricerca per vedere i risultati per famiglia di icone. Ti mostra il nome con la famiglia di icone quando passi con il mouse su ciascuna icona. Nell'immagine sopra, sto passando con il mouse sulla seconda icona da destra. Questo è abbastanza utile, quindi il filtro di ricerca non è davvero una priorità alta.

Esempi di icone di caricamento Divi

Naturalmente, uno dei vantaggi dell'utilizzo delle icone è la possibilità di regolare dimensioni, colori, aggiungere cerchi, bordi, ecc., utilizzando Divi Builder. Il plug-in e le icone funzionano con Visual Builder, ma non mostra le icone nella visualizzazione live. Questo esempio mostra le icone nella selezione delle icone del modulo, ma l'anteprima dal vivo non funziona.

Le icone vengono visualizzate correttamente nella pagina o nel post pubblicato. Puoi ancora utilizzare Visual Builder per personalizzare le dimensioni e i colori, semplicemente non li vedrai nell'anteprima dal vivo. Preferisco il Visual Builder quando personalizzo i colori e le dimensioni, ma utilizzerò il Classic Builder per il resto degli esempi. Questa è la pagina di destinazione del pacchetto di layout Mutuo.

Le icone hanno un bell'aspetto e possono essere personalizzate proprio come le icone Divi standard. Ho trovato tutte queste icone utilizzando la funzione di ricerca. Queste sono le impostazioni predefinite.

Ho cambiato i colori in modo che corrispondano al layout, proprio come le immagini originali utilizzate dal layout.

Per questo, ho scelto di utilizzare la dimensione del carattere per l'icona e l'ho regolata su 32 px. Comincia a sembrare più simile al design originale, ma con le mie icone.

In questo, ho aggiunto un cerchio a ciascuna icona. Ho cambiato i colori dei cerchi e delle icone e ho aggiunto un bordo al secondo e al quarto da sinistra. Ho scelto colori diversi solo per mostrare che aspetto hanno.

Ecco come appaiono le icone posizionate a sinistra del testo.

In questo, ho sostituito le immagini nel layout del campo da golf con delle icone. Ho usato i colori dal layout e li ho ridimensionati a 48px.

Per questo esempio, ho disabilitato la regolazione della dimensione del carattere per le icone. Questa è la dimensione predefinita, a 96 px. Si fondono bene con il design del layout.

Hanno anche un aspetto fantastico quando si utilizzano le impostazioni dell'icona del cerchio. Ho cambiato il colore dell'icona in bianco e ho usato l'abbronzatura del layout come colore del cerchio. Le icone sono ancora a 48px.

Per questo, ho usato una delle tonalità di verde del layout. Ci sono molte possibilità con le personalizzazioni di Divi Builder.

Divi Upload Icons Price

Le icone di caricamento Divi costano $ 24,97. Ha un utilizzo e aggiornamenti illimitati. Puoi acquistare Divi Upload Icons nel marketplace.

Pensieri finali

Divi Upload Icons semplifica il caricamento delle icone esatte che desideri da qualsiasi libreria di font. L'idea alla base del plug-in è invece di installare migliaia di icone che non ti servono, puoi installare le icone esatte e le famiglie di icone che desideri utilizzare con il tuo sito Web Divi.

Poiché stai caricando le icone in Divi Builder, vengono archiviate sul tuo server. Ho caricato oltre 2500 icone e non ho avuto problemi di velocità con Divi Builder o il mio sito web.

Tieni presente che richiede caratteri con il file dei caratteri e il file CSS. È facile caricare i caratteri in modo errato (indovina come lo so). Assicurati di seguire esattamente le indicazioni o i caratteri saranno quadrati vuoti. Inoltre, non funziona con Font Awesome 5, ma funziona benissimo con 4.7.

Mi è piaciuto usare Divi Upload Icons. Mi piacerebbe usarlo con Visual Builder, ma funziona benissimo con il builder classico. Ci è voluto un ulteriore tentativo per assicurarmi di avere i file giusti, ma considerando quante famiglie di icone ci sono su Internet vale la pena dedicare del tempo a trovare le icone con i file giusti. Le icone non sono difficili da trovare e lo sviluppatore fornisce molti collegamenti a icone che ha già testato.

Se sei interessato ad aggiungere le tue icone a Divi Builder, vale la pena dare un'occhiata a Divi Upload Icons.

Vogliamo sentire da voi. Hai provato Divi Upload Icons? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite hanss / shutterstock.com