Come aggiungere caselle di funzionalità con icone in WordPress

La maggior parte dei visitatori scansiona una pagina prima di decidere se leggerla. Se i tuoi vantaggi principali sono sepolti in paragrafi di testo, molte persone potrebbero andarsene senza averli mai visti.

I riquadri delle funzionalità risolvono questo problema abbinando ogni vantaggio a una piccola icona e una breve descrizione, in modo che i visitatori comprendano a colpo d'occhio cosa offri. Puoi anche aggiungere un pulsante di invito all'azione a ciascun riquadro per indirizzare i lettori a maggiori dettagli.

In questa guida, ti mostreremo come aggiungere riquadri delle funzionalità con icone in WordPress utilizzando l'editor a blocchi integrato o un plugin page builder.

Quale metodo dovresti usare per aggiungere i riquadri delle funzionalità?

Se stai aggiungendo una o due sezioni di funzionalità a una pagina o a un post esistente, usa il metodo dell'editor a blocchi. È gratuito, integrato in WordPress 7.0 e versioni successive e non richiede un altro plugin.

Se stai progettando una landing page completa da zero, un page builder è la scelta migliore. Ottieni modelli pronti all'uso e più opzioni di stile per ogni icona.

Puoi utilizzare i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare:

Metodo 1: Aggiungere Box Funzionalità con Icone usando l'Editor a Blocchi (Gratuito)

L'editor a blocchi di WordPress costruisce pagine con blocchi, che sono singoli pezzi di contenuto come un paragrafo, un'immagine o un pulsante.

WordPress 7.0 ha aggiunto un blocco Icona integrato che ti consente di inserire icone SVG senza un plugin. SVG è un formato di immagine creato dal codice, quindi le icone rimangono nitide a qualsiasi dimensione e si caricano velocemente.

Se utilizzi una versione precedente di WordPress, non troverai il blocco Icona nell'editor. Dovrai aggiornare WordPress prima di seguire questo metodo.

Passaggio 1: Aggiungere un Blocco Colonne

Inizia aggiungendo un blocco Colonne. Per prima cosa, apri la pagina in cui desideri aggiungere i tuoi riquadri delle funzionalità. Quindi, fai clic sull'icona + Aggiungi blocco, cerca Colonne e fai clic sul blocco Colonne per aggiungerlo.

WordPress ti mostrerà diversi layout di colonne. I numeri indicano quanto spazio occupa ciascuna colonna. Ad esempio, 50 / 50 crea due colonne di larghezza uguale.

Selezioneremo 33 / 33 / 33 per creare tre colonne uguali, ma puoi scegliere qualsiasi layout che funzioni per il tuo contenuto.

Passaggio 2: Aggiungere Icone ai Tuoi Box Funzionalità

Successivamente, fai clic sul pulsante + nella colonna e cerca Icona. Quando appare il blocco Icona, fai clic su di esso per aggiungerlo.

WordPress aggiungerà automaticamente un'icona Info alla colonna. Fai clic sul pulsante 'Sostituisci' per scegliere un'icona diversa.

Questo apre la libreria di icone. Puoi digitare un nome, come foto o negozio, nella barra di ricerca o scorrere le icone disponibili.

Quando trovi l'icona che desideri, fai clic su di essa per aggiungerla alla tua colonna.

Puoi quindi personalizzare l'icona utilizzando le impostazioni del blocco. A seconda del tuo tema e della tua configurazione, puoi cambiare il colore dell'icona, il colore dello sfondo, le dimensioni e il bordo. Puoi anche usare la barra degli strumenti per centrare l'icona.

Passaggio 3: Aggiungere Testo ai Tuoi Box Funzionalità

Una volta che le tue icone sono al loro posto, fai clic sul pulsante + sotto l'icona nella prima colonna e aggiungi un blocco Titolo per il nome della funzionalità.

Quindi, aggiungi un blocco Paragrafo sotto e inserisci una breve descrizione della funzionalità. Di solito bastano una o due frasi.

Ripeti lo stesso processo per le altre colonne.

Passaggio 4: Crea altre righe di riquadri delle funzionalità (facoltativo)

Se vuoi aggiungere più di una riga di box funzionalità, seleziona il blocco Colonne e fai clic sul menu a tre punti nella barra degli strumenti. Quindi, seleziona Duplica.

Questo crea una copia dell'intera riga. Puoi quindi sostituire le icone e il testo con nuovi contenuti utilizzando gli stessi passaggi precedenti.

Passaggio 5: Pubblica i tuoi riquadri delle funzionalità con icone

Quando sei soddisfatto dei tuoi box funzionalità, fai clic sul pulsante Salva o Pubblica per renderli attivi.

Puoi quindi visitare il tuo sito web per vedere i box funzionalità in azione:

Metodo 2: Aggiungere Box Funzionalità con Icone usando un Page Builder

L'editor a blocchi funziona bene quando vuoi aggiungere una sezione funzionalità a una pagina esistente. Ma se stai progettando una landing page completa e desideri un maggiore controllo sul layout e sullo stile, un page builder drag-and-drop può offrirti maggiore flessibilità.

Useremo SeedProd per questo metodo perché lo usiamo sui nostri siti. La maggior parte dei page builder drag-and-drop, come Elementor, offre un elemento icon box e una libreria di icone integrata. Per maggiori informazioni, consulta la nostra recensione di SeedProd.

Passaggio 1: Installa e configura il page builder

Innanzitutto, devi installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida su come installare un plugin WordPress.

Una volta attivato il plugin, vai su SeedProd » Impostazioni e inserisci la tua chiave di licenza. Puoi trovare la tua chiave accedendo al tuo account SeedProd.

Passaggio 2: Scegli un modello di landing page

Successivamente, vai su SeedProd » Landing Pages e fai clic su ‘+ Aggiungi nuova Landing Page’.

Quindi, inserisci un nome per la tua pagina. SeedProd userà anche questo nome per creare l'URL della pagina, ma puoi modificare l'URL se necessario.

Nella schermata successiva, sceglierai un modello. Ogni modello può essere personalizzato con il drag and drop, ma sceglierne uno che corrisponda al tuo obiettivo può farti risparmiare tempo.

Per questa guida, useremo il Modello vuoto. Passa il mouse sopra e fai clic sull'icona del segno di spunta per selezionarlo.

Quindi, fai clic su ‘Salva e Inizia a modificare la pagina’.

Passaggio 3: Crea i tuoi riquadri delle funzionalità con icone

Poiché stiamo iniziando con un modello vuoto, il primo passo è scegliere un layout. Qui, scegliamo il layout a colonna singola per progettare l'area dell'intestazione sopra i tuoi box funzionalità.

Puoi quindi trascinare il blocco Titolo dal menu di sinistra nella pagina. Seleziona il blocco per modificarne il testo e regolare la sua formattazione utilizzando le opzioni nel pannello di sinistra.

Ripeti il processo con il blocco Testo.

Puoi anche personalizzare l'intestazione aggiungendo un'immagine di sfondo o modificandone la formattazione. Per maggiori opzioni, fai clic sulla scheda ‘Avanzate’ per regolare lo spazio, aggiungere un bordo, aggiungere effetti di animazione e altro ancora.

Una volta terminata l'intestazione, puoi creare i box funzionalità. Trascina il blocco Colonne dal pannello di sinistra nell'editor e posizionalo appena sotto l'area dell'intestazione.

Successivamente, puoi scegliere un layout. Per questo esempio, useremo l'opzione con tre colonne uguali.

Quindi, trova il blocco Icon Box nel menu di sinistra e trascinalo nella prima colonna.

Il blocco include un'icona predefinita, un titolo e un testo di esempio che puoi personalizzare.

Per cambiare l'icona, trova la sezione Icona/Immagine nel pannello di sinistra. Quindi, passa il mouse sopra l'icona corrente e fai clic sul pulsante per sostituirla.

Questo apre la libreria di icone. Puoi cercare un'icona specifica o sfogliare le opzioni disponibili. Quando ne trovi una che ti piace, fai clic su di essa per aggiungerla alla tua casella delle funzionalità.

Una volta selezionata un'icona, fai clic su di essa per aprire le sue impostazioni nel menu di sinistra. Qui puoi cambiarne l'allineamento, le dimensioni e il colore.

Passaggio 4: Personalizza il contenuto dei tuoi riquadri delle funzionalità

Successivamente, seleziona il testo nella tua Icon Box per aprire le sue impostazioni nel menu di sinistra.

Puoi sostituire il titolo e la descrizione di esempio con il tuo testo di funzionalità. Puoi anche aggiungere collegamenti o cambiare l'allineamento e il colore del testo.

Ripeti questi passaggi per le altre colonne, aggiungendo un'icona e un testo di funzionalità diversi a ciascuna.

Passaggio 5: Pubblica la tua landing page

Se desideri aggiungere un'altra riga di caselle delle funzionalità, passa il mouse sopra la sezione e fai clic sul pulsante Duplica Riga. Quindi, sostituisci le icone e il testo con i tuoi nuovi contenuti.

Puoi anche personalizzare il resto della tua landing page aggiungendo immagini, pulsanti di invito all'azione o altri blocchi. Il processo è simile: trascina il blocco desiderato nell'editor e personalizzalo dal pannello di sinistra.

Quando sei soddisfatto della tua landing page, fai clic sul pulsante 'Salva' e poi seleziona 'Pubblica' per renderla attiva. Ora puoi vedere la landing page in azione:

Domande frequenti sui riquadri delle funzionalità con icone

Ecco alcune domande comuni sull'aggiunta di caselle delle funzionalità con icone in WordPress:

Come aggiungo icone in WordPress?

Se utilizzi WordPress 7.0 o versioni successive, puoi usare il blocco Icona integrato, che ti consente di cercare nella libreria di icone di WordPress per nome. Per set di icone più grandi come Font Awesome, avrai bisogno di un plugin o di un page builder con la propria libreria di icone.

Come aggiungo icone personalizzate a WordPress?

Il blocco Icona mostra solo icone dalla libreria di WordPress, quindi non puoi caricarne di tue tramite esso. Invece, puoi caricare la tua icona come file PNG usando il blocco Immagine.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere box con icone in WordPress. Potresti anche voler vedere 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 trovarci anche su Twitter e Facebook.