Using icon fonts in the WordPress editor
Tempo di lettura: 8 minuti

Vuoi utilizzare i caratteri icona nell’editor di post di WordPress?

I caratteri icona consentono di utilizzare facilmente immagini e simboli nel testo. Sono leggeri e non rallentano il tuo sito e possono essere facilmente ridimensionati a qualsiasi dimensione e stilizzati come qualsiasi altro carattere di testo.

In questo articolo, ti mostreremo come utilizzare facilmente i caratteri icona nell’editor di post di WordPress senza scrivere alcun codice HTML.

Ti mostreremo più metodi, ognuno dei quali utilizza un approccio leggermente diverso dall’altro. Puoi scegliere quello che funziona meglio per te.

Metodo 1. Aggiunta di caratteri icona in WordPress Post Editor utilizzando icone JVM Rich Text

Questo metodo è consigliato per l’uso su qualsiasi tipo di Sito WordPress. È facile da usare e funziona perfettamente con il editor di blocchi.

Innanzitutto, è necessario installare e attivare il Icone di testo RTF JVM collegare. Per maggiori dettagli, consulta la nostra guida passo-passo su come installare un plugin WordPress.

Dopo l’attivazione, puoi semplicemente modificare un file WordPress post o pagina o crearne uno nuovo. All’interno dell’editor dei post, aggiungi un nuovo blocco di paragrafo e vedrai una nuova icona Flag nella barra degli strumenti del blocco.

Pulsante icona carattere nella barra degli strumenti del blocco

Facendo clic su di esso verrà visualizzato un popup di icone tra cui scegliere. Per impostazione predefinita, utilizza i popolari caratteri icona Font Awesome.

È possibile utilizzare la ricerca per cercare un’icona o semplicemente scorrere verso il basso per trovare l’icona desiderata, quindi fare clic per aggiungerla.

Scegli le icone da inserire

Un vantaggio dell’utilizzo dei caratteri icona è che puoi usare i CSS per modellarli.

Tuttavia, poiché stai già utilizzando l’editor di blocchi, puoi semplicemente utilizzare gli strumenti di colore integrati per modellare le icone.

Stile dei caratteri delle icone utilizzando gli strumenti dell'editor di blocchi

Il plug-in consente di utilizzare i caratteri icona nella maggior parte dei blocchi di testo come Paragrafo, Elenco, Pulsantecolonne, copertina e altro ancora.

Di seguito è riportato un esempio di utilizzo di caratteri icona e opzioni di blocco per definire lo stile di tre colonne.

Caratteri icona nelle colonne

Un altro utile esempio di utilizzo dei caratteri icona è con i pulsanti.

Questa volta utilizziamo i caratteri delle icone in linea insieme a del testo per i due pulsanti.

Utilizzo dei caratteri icona nei pulsanti e negli elenchi

Sentiti libero di utilizzare gli strumenti dell’editor di blocchi come l’allineamento del testo, i colori, la spaziatura e altro per ottenere il massimo dai caratteri delle icone.

Metodo 2. Aggiungi i caratteri delle icone nell’editor dei post di WordPress con Font Awesome

Questo metodo richiede l’aggiunta di codici brevi nell’editor dei post per visualizzare i caratteri delle icone. Puoi utilizzare questo metodo se non hai bisogno di utilizzare regolarmente i caratteri delle icone nei tuoi post e pagine di WordPress.

Innanzitutto, è necessario installare e attivare il Carattere fantastico collegare. Per maggiori dettagli, consulta la nostra guida passo-passo su come installare un plugin WordPress.

Dopo l’attivazione, puoi modificare un post o una pagina in WordPress e utilizzare il seguente shortcode per aggiungere un’icona del carattere.

Aggiunta di caratteri icona utilizzando shortcode

Il parametro name qui è il nome del font utilizzato da Font Awesome. Puoi trovare l’intero elenco sul Font Fantastico cheatsheet pagina.

Una volta aggiunto, puoi visualizzare in anteprima il tuo post o la tua pagina per vedere come apparirà l’icona sul sito live poiché non verrà visualizzata come icona nell’editor di blocchi.

Ecco come appariva sul nostro sito di test.

Anteprima dell'icona del carattere

Puoi utilizzare lo shortcode all’interno di un paragrafo e in linea con altro testo. Puoi anche aggiungerlo da solo utilizzando il blocco “Shortcode”.

Tuttavia, l’utilizzo del blocco “Shortcode” non ti darà le opzioni di stile che otterrai con altri blocchi di testo.

Puoi anche aggiungere lo shortcode all’interno delle colonne per creare una riga delle caratteristiche.

Shortcode in colonne

Sarebbe un po’ più complicato in quanto non sarai in grado di vedere le immagini reali e le altezze delle colonne continueranno a cambiare all’interno dell’editor.

Ecco come appariva sul nostro sito Web di test. Le colonne hanno la stessa altezza, anche se non sono nell’editor.

Anteprima dei font delle icone utilizzando Font Awesome

Probabilmente dovrai visualizzare l’anteprima del tuo lavoro in una nuova scheda del browser molte volte per vedere come apparirà agli utenti.

Metodo 3. Utilizzo dei caratteri icona con i page builder di WordPress

Questo metodo è ottimo se stai creando una landing page o progettando il tuo sito web utilizzando un page builder di WordPress come SeedProd.

SeedProd è il miglior generatore di pagine WordPress sul mercato. Ti consente di creare facilmente bellissime pagine di destinazione o progettare il tuo sito Web completo.

SeedProd WordPress Costruttore di siti web

Innanzitutto, è necessario installare e attivare il SeedProd collegare. Per maggiori dettagli, consulta la nostra guida passo-passo su come installare un plugin WordPress.

Al momento dell’attivazione, ti verrà chiesto di inserire la chiave di licenza del plug-in. Puoi trovare queste informazioni sotto il tuo account sul sito web di SeedProd.

Chiave di licenza SeedProd

Dopo aver inserito il codice di licenza e aver fatto clic su “Verifica codice”, puoi iniziare a lavorare sulla pagina di destinazione.

Basta andare al SeedProd » Pagine di destinazione pagina e fare clic sul pulsante “Aggiungi nuova pagina di destinazione”.

Aggiungi una nuova pagina di destinazione

Successivamente, ti verrà chiesto di scegliere un modello per la tua pagina di destinazione.

SeedProd viene fornito con una serie di bellissimi design che puoi utilizzare come punto di partenza, oppure puoi iniziare con un modello vuoto e progettare tutto da solo.

Scegli il modello della pagina di destinazione

Per questo tutorial, utilizzeremo un modello predefinito. Basta fare clic su un modello per selezionarlo e continuare.

Successivamente, ti verrà chiesto di fornire un titolo per la tua pagina di destinazione e scegliere un URL.

Fornisci il titolo della pagina e l'URL

Dopo averli inseriti, fai clic sul pulsante “Salva e inizia a modificare la pagina” per continuare.

SeedProd avvierà ora l’interfaccia del generatore di pagine. È uno strumento di progettazione drag-and-drop in cui puoi semplicemente puntare e fare clic su qualsiasi elemento per modificarlo.

Interfaccia del generatore di pagine SeedProd

Puoi anche trascinare e rilasciare i blocchi dalla colonna di sinistra per aggiungere nuovi elementi al tuo progetto.

Per il bene di questo tutorial, aggiungeremo il blocco Icona.

Aggiungi blocco icona

Dopo aver aggiunto il blocco, puoi semplicemente fare clic per modificarne le proprietà.

La colonna di sinistra cambierà per mostrare le opzioni per il blocco Icona. Puoi fare clic sulla sezione “Icona” a sinistra e scegliere un’immagine dell’icona diversa o modificare il colore e lo stile.

Impostazioni del blocco delle icone

Un altro modo per utilizzare le icone in SeedProd è aggiungere il blocco “Icon Box”.

La differenza tra questo e il blocco “Icona” che abbiamo usato in precedenza è che “Icon Box” ti consente di aggiungere testo insieme all’icona scelta.

Questo è uno dei modi più comuni per utilizzare le icone durante la visualizzazione del prodotto caratteristicheservizi e altri articoli.

Blocco box icona

Puoi posizionare la tua icona all’interno delle colonne, scegliere i colori e regolare le dimensioni dell’icona a tuo piacimento.

Inoltre, puoi anche formattare il testo di accompagnamento utilizzando la barra degli strumenti di formattazione di SeedProd.

Casella dell'icona all'interno delle colonne

Una volta terminata la modifica della pagina, non dimenticare di fare clic sul pulsante “Salva” nell’angolo in alto a destra dello schermo.

Se sei pronto, puoi fare clic su “Pubblica” per pubblicare la pagina oppure puoi fare clic su “Anteprima” per assicurarti che appaia come desideri.

Salva e pubblica la tua landing page

Puoi anche fare clic su “Salva come modello” in modo da poter riutilizzare questo design con SeedProd su altre parti del tuo sito web.

Ecco come apparivano i caratteri delle icone sul nostro sito Web di test.

Anteprima dei caratteri delle icone

Speriamo che questo articolo ti abbia aiutato a imparare come utilizzare i caratteri icona nell’editor di post di WordPress senza scrivere codice HTML. Potresti anche voler vedere il nostro Guida alle prestazioni di WordPress per ottimizzare la velocità del tuo sito web o i migliori plugin per landing page per WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale Youtube per i video tutorial di WordPress. Puoi trovarci anche su Cinguettio E Facebook.



Source link

Di Simone Serra

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.