Come aggiungere caselle di funzionalità con icone in WordPress

Guarda qualsiasi sito web di successo e probabilmente vedrai caselle di funzionalità con icone che evidenziano le loro offerte principali.

È un modello di design comprovato che abbiamo utilizzato innumerevoli volte perché funziona. Aiuta i visitatori a vedere rapidamente cosa rende speciale la tua attività senza leggere grandi blocchi di testo.

Avendo guidato molti utenti di WordPress attraverso miglioramenti del sito, sappiamo che la creazione di queste caselle di funzionalità dall'aspetto professionale potrebbe sembrare un problema.

Ma ecco cosa la maggior parte delle persone non capisce: non è necessario essere un designer o uno sviluppatore per aggiungere bellissime caselle di funzionalità al tuo sito.

In questa guida, condivideremo i modi più semplici per creare box di funzionalità con icone in WordPress.

Perché aggiungere box di funzionalità con icone?

I box di funzionalità con icone rendono le informazioni importanti facili da scansionare e visivamente accattivanti. La maggior parte dei visitatori non leggerà ogni parola su una pagina ricca di testo perché scansiona rapidamente per trovare ciò che conta di più.

I box di funzionalità evidenziano i punti chiave, spesso abbinati a icone, in modo che gli utenti possano comprendere il tuo prodotto o servizio a colpo d'occhio. Puoi anche includere un pulsante di call to action per incoraggiare gli utenti a saperne di più su una funzionalità specifica.

Ecco come WPForms utilizza i box di funzionalità per mostrare i suoi maggiori punti di forza:

Detto questo, ti mostreremo come aggiungere caselle di funzionalità con icone in WordPress. Usa semplicemente i collegamenti rapidi qui sotto per saltare direttamente al metodo che desideri utilizzare:

Metodo 1: Aggiungere box di funzionalità con icone utilizzando l'editor a blocchi di WordPress (Metodo gratuito)

Puoi aggiungere riquadri di funzionalità con icone al tuo sito WordPress utilizzando l'editor di contenuti standard e il blocco colonne.

Questa è un'ottima opzione se desideri creare un layout semplice senza utilizzare un page builder.

Passaggio 1: Apri la pagina e aggiungi il blocco Colonne

Per iniziare, apri la pagina in cui desideri aggiungere una casella di funzionalità. Quindi, fai clic sull'icona '+' per aggiungere un blocco.

Successivamente, digita 'Colonne' nella casella di ricerca.

Quando appare il blocco corretto, fai clic per aggiungerlo alla pagina.

WordPress mostrerà ora tutti i diversi blocchi di colonne. I numeri indicano quanto spazio occupa ciascuna colonna nel blocco. Ad esempio, '50/50' crea due colonne che occupano ciascuna il 50% della larghezza disponibile.

Come esempio, selezioneremo il blocco colonne '33/33/33' poiché questo ci fornisce tre colonne di larghezza uguale, ma puoi utilizzare qualsiasi layout desideri.

Passaggio 2: Aggiungi icone alle colonne

Dopodiché, sei pronto per aggiungere icone alle colonne.

Il modo più semplice per farlo è con i font di icone in primo piano, che sono simboli ridimensionabili che non rallenteranno il tuo sito web. Consigliamo di utilizzare Font Awesome poiché hanno una delle più grandi raccolte di icone gratuite.

Una volta che hai aggiunto font icona nel tuo tema WordPress, è facile mostrarli nelle tue colonne utilizzando uno shortcode.

Fai semplicemente clic sull'icona '+' della colonna e digita 'Shortcode'. Quando appare il blocco corretto, fai clic per aggiungerlo al tuo layout.

Dopodiché, puoi inserire il seguente shortcode, ma assicurati di sostituire 'bus' con il nome dell'icona che desideri utilizzare:

[icon name="bus"]

Per vedere un elenco completo delle icone disponibili, vai semplicemente alla libreria di icone Font Awesome.

Quando trovi un'icona che ti piace, fai clic su di essa per vedere il nome di quell'icona.

Ad esempio, nell'immagine seguente, stiamo guardando un'icona chiamata 'address-book'.

Ora puoi aggiungere questo nome allo shortcode.

Per saperne di più sul funzionamento degli shortcode, consulta la nostra guida per principianti su come aggiungere uno shortcode in WordPress.

Se preferisci utilizzare un'immagine dalla libreria multimediale di WordPress, puoi aggiungere un blocco immagine invece di utilizzare un font icona.

Per fare ciò, fai semplicemente clic su '+' nella prima colonna e quindi aggiungi un blocco 'Immagine' invece di un blocco shortcode.

Ora puoi scegliere un'immagine dalla libreria multimediale o caricare un nuovo file dal tuo computer. Non dimenticare di aggiungere un testo Alt appropriato per descrivere l'icona per i motori di ricerca e gli screen reader.

Passaggio 3: Aggiungi testo al riquadro di funzionalità

Una volta aggiunte tutte le tue icone, il passo successivo è aggiungere testo alla casella delle funzionalità.

Per fare ciò, fai clic sul pulsante '+' all'interno del blocco Colonne. Quindi, aggiungi un blocco Paragrafo.

Dopodiché, digita semplicemente il tuo testo nel blocco paragrafo.

Puoi aggiungere icone e testo alle altre colonne ripetendo lo stesso processo.

Passaggio 4: Crea righe multiple (Opzionale)

Vuoi che la tua casella delle funzionalità abbia più righe?

Fai semplicemente clic sul blocco Colonne e quindi seleziona i tre puntini nella barra degli strumenti. Puoi quindi selezionare 'Duplica'.

Questo creerà una copia del blocco Colonne.

Ora, segui semplicemente lo stesso processo descritto sopra per aggiungere contenuti alla seconda riga.

Passaggio 5: Pubblica il tuo riquadro di funzionalità

Quando sei soddisfatto della casella delle funzionalità, puoi aggiungere altri contenuti alla pagina, come un'immagine del prodotto o categorie e tag.

Per rendere attiva la casella delle funzionalità, fai semplicemente clic sul pulsante 'Aggiorna' o 'Pubblica'.

Ora puoi visitare il tuo sito web, blog o negozio online per vedere la casella delle icone delle funzionalità in azione.

Ecco un esempio di ciò che le persone vedranno quando visiteranno il tuo blog WordPress.

Metodo 2: Aggiungere caselle di funzionalità con icone utilizzando un plugin page builder (consigliato)

Se vuoi creare una semplice feature box, allora l'editor a blocchi di WordPress è una buona scelta. Tuttavia, se vuoi creare una box più avanzata con un design completamente personalizzato, allora avrai bisogno di un plugin page builder.

SeedProd è il miglior page builder WordPress sul mercato che ti permette di creare pagine personalizzate utilizzando un editor drag-and-drop.

Ha oltre 300 modelli progettati professionalmente che puoi utilizzare per creare bellissime pagine velocemente. Ha anche un'intera libreria di icone che puoi aggiungere alle tue feature box con un solo clic.

Ecco un esempio di feature box creata utilizzando i blocchi e le icone già pronti di SeedProd.

Abbiamo visto i nostri brand partner utilizzare questo strumento per creare i loro siti web e hanno avuto un'esperienza eccellente. Per maggiori dettagli, consulta la nostra recensione di SeedProd.

Passaggio 1: Installa e attiva SeedProd

La prima cosa da fare è installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida per principianti su come installare un plugin WordPress.

Dopo l'attivazione, vai su SeedProd » Impostazioni e inserisci la tua chiave di licenza.

Puoi trovare queste informazioni accedendo al tuo account SeedProd.

Passaggio 2: Scegli un modello dal design professionale

Per iniziare, vai su SeedProd » Pagine di destinazione e fai clic su ‘Aggiungi nuova pagina di destinazione’.

Nella schermata successiva, puoi scegliere un modello. Puoi personalizzare tutti questi modelli utilizzando il builder drag-and-drop di SeedProd, ma è comunque una buona idea scegliere un modello che corrisponda ai tuoi obiettivi.

Tutti i modelli di SeedProd sono organizzati in diversi tipi di campagne, come coming soon e campagne lead squeeze. Puoi persino utilizzare i modelli di SeedProd per migliorare la tua pagina 404.

Per questa guida, utilizzeremo il 'Modello vuoto', ma puoi usare qualsiasi modello desideri.

Per scegliere un modello, passaci sopra il mouse e fai clic sull'icona 'Segno di spunta'.

Questo apre un popup dove puoi dare un nome alla pagina. SeedProd utilizza il nome della pagina nell'URL, ma puoi modificare questo link se lo desideri. Ad esempio, potresti voler migliorare la tua SEO di WordPress includendo alcune parole chiave pertinenti.

Dopodiché, fai clic sul pulsante 'Salva e Inizia a Modificare la Pagina'.

Questo apre il modello nell'editor di pagine drag-and-drop di SeedProd.

Passaggio 3: Progetta il layout del tuo riquadro di funzionalità

Poiché stai utilizzando il modello vuoto, il primo passo è scegliere un layout. Per fare ciò, fai semplicemente clic su uno qualsiasi dei layout di colonne.

Successivamente, trova il blocco 'Icona' nel menu di sinistra.

Ora puoi trascinare e rilasciare questo blocco nella prima colonna vuota.

Questo aggiunge il blocco Icona al tuo layout, con un'icona predefinita già selezionata.

Per cambiare l'icona, fai clic su di essa e quindi seleziona il pulsante 'Scegli immagine'.

Questo apre la libreria di icone con centinaia di icone tra cui scegliere. Puoi usare la barra di ricerca per cercare un'icona specifica o sfogliare l'intero elenco.

Quando trovi un'immagine che desideri utilizzare, semplicemente passaci sopra con il mouse e quindi fai clic sul pulsante '+' per aggiungerla alla tua pagina.

Per personalizzare l'icona, fai clic per selezionarla.

Ora puoi modificare questa icona utilizzando le impostazioni nel menu di sinistra, inclusa la modifica dell'allineamento, delle dimensioni, del colore e altro ancora.

Per vedere altre opzioni, vai avanti e fai clic sulla scheda 'Avanzate'.

Qui, puoi modificare lo spazio, aggiungere un bordo e persino aggiungere effetti di animazione CSS.

Passaggio 4: Aggiungi testo alle funzionalità

Una volta fatto ciò, vai avanti e aggiungi un blocco 'Testo' sotto l'icona.

Semplicemente trova il blocco 'Testo' nel menu di sinistra, e poi posizionalo sotto la tua icona usando il drag and drop.

Per aggiungere del testo, fai clic per selezionare il blocco. Puoi quindi digitare nel piccolo editor di testo nel menu di sinistra.

Qui, puoi aggiungere link, cambiare l'allineamento del testo, cambiare il colore del testo e altro ancora.

Passaggio 5: Duplica righe e pubblica

Per personalizzare le altre colonne, segui semplicemente gli stessi passaggi di cui sopra.

Se desideri aggiungere un'altra riga di caselle funzionalità con icone, posiziona il mouse sulla sezione e fai clic sul pulsante 'Duplica riga'.

Puoi duplicare la sezione quante volte desideri per creare rapidamente altre caselle funzionalità con icone.

Puoi quindi aggiungere nuove icone e testo seguendo lo stesso processo descritto sopra.

Puoi continuare a lavorare sulla pagina aggiungendo altri blocchi e personalizzando tali blocchi nel menu a sinistra.

Quando sei soddisfatto dell'aspetto della pagina, fai clic sul pulsante 'Salva'. Puoi quindi selezionare 'Pubblica' per rendere la pagina attiva.

Domande frequenti sull'aggiunta di un box di funzionalità con icone

Ecco alcune domande che i nostri lettori pongono frequentemente sull'aggiunta di un riquadro di funzionalità con icone in WordPress:

Come inserisco le icone in WordPress?

Per inserire icone, il metodo più semplice è installare un plugin come Font Awesome o utilizzare un page builder come SeedProd. Se non vuoi usare un plugin, puoi caricare direttamente i file di icone SVG utilizzando il blocco Immagine standard.

Come inserisco simboli in WordPress?

Per inserire simboli, devi installare e attivare il plugin Insert Special Characters
. Dopo l'attivazione, lo strumento aggiungerà un pulsante 'Ω' (omega) nella barra degli strumenti dei blocchi di WordPress.

Puoi usarlo per accedere al menu dei caratteri speciali. Per maggiori informazioni, consulta il nostro tutorial su come aggiungere caratteri speciali nei post di WordPress.

Come aggiungere icone ai menu in WordPress senza plugin?

Per aggiungere icone ai menu senza un plugin, abilita ‘Classi CSS’ nella scheda Opzioni Schermo in alto nella pagina Aspetto » Menu. Quindi, aggiungi una classe CSS specifica alla tua voce di menu e usa il codice CSS personalizzato nel Personalizzatore per visualizzare l'immagine di sfondo dell'icona.

Come aggiungere icone social personalizzate in WordPress?

Per aggiungere icone social, utilizza semplicemente il blocco nativo ‘Icone Social’ all'interno dell'editor di WordPress. Fai clic sul pulsante ‘+’ all'interno del blocco per scegliere reti come Facebook o Twitter, quindi incolla i link del tuo profilo direttamente nei campi.

Come aggiungo un'icona dei social media a un menu di WordPress?

Per aggiungere icone social a un menu di navigazione, ti suggeriamo di utilizzare un plugin come Menu Image per caricare le icone direttamente nelle voci di menu. In alternativa, aggiungi un ‘Link personalizzato’ al menu e incolla il codice HTML dell'icona del font nel campo Etichetta di navigazione.

Se sei interessato, dai un'occhiata alla nostra guida su come aggiungere icone dei social media ai menu di WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere caselle funzionalità con icone in WordPress. Potresti anche voler consultare la nostra guida su come personalizzare i colori sul tuo sito WordPress e modi per creare un sito WordPress ottimizzato per dispositivi mobili.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.