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 caselle di funzionalità con icone in WordPress. Io

Cosa sono le caselle di funzionalità con icone?

La maggior parte delle persone non leggerà ogni singola parola sul tuo sito web WordPress, specialmente se una pagina è molto ricca di testo.

Invece, i visitatori scorreranno la pagina per trovare rapidamente le informazioni che cercano. Ciò significa che devi presentare le informazioni importanti in un modo che sia scorrevole e coinvolgente, motivo per cui così tanti siti web utilizzano le caselle di funzionalità.

Nell'immagine seguente, puoi vedere come WPForms utilizza le caselle di funzionalità per evidenziare i maggiori punti di forza del plugin.

Puoi persino aggiungere un pulsante di invito all'azione in modo che gli utenti possano saperne di più su una particolare funzionalità.

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 caselle di funzionalità con icone utilizzando l'editor a blocchi di WordPress (nessun plugin richiesto)
• Metodo 2: Aggiungere caselle di funzionalità con icone utilizzando un plugin page builder (consigliato)

Metodo 1: Aggiungere caselle di funzionalità con icone utilizzando l'editor a blocchi di WordPress (nessun plugin richiesto)

Puoi aggiungere caselle di funzionalità con icone al tuo sito WordPress utilizzando l'editor di contenuti standard e il blocco colonne. Ciò significa che non è necessario installare un nuovo plugin di WordPress, quindi è un metodo rapido e semplice.

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.

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 aggiunti i font di icone nel tuo tema WordPress, è facile mostrarli nelle tue colonne utilizzando lo 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.

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.

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.

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.

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.

Scegli un modello progettato professionalmente

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.

Progetta la tua casella 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.

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.

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.

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.