Un riquadro di icone consiste tipicamente in una piccola grafica abbinata a un breve testo. Utilizzando i riquadri di icone, è possibile evidenziare caratteristiche, servizi, vantaggi e offerte in modo visivamente accattivante e significativo.
È inoltre possibile utilizzare i riquadri delle icone per mostrare testimonianze, call to action, fasi del processo e altro ancora. Tavolo di lavoro è un versatile plugin per la creazione di tabelle. Con questo plugin è possibile creare facilmente splendide e accattivanti caselle di icone.
Nelle parti seguenti di questo articolo, vi spiegheremo come aggiungere caselle di icone in WordPress con il plugin. Ottenete il plugin facendo clic sui link sottostanti.
Creare bellissimi tavoli
Con l'editor di blocchi
Passo 01: aggiungere il blocco Tableberg all'editor
Aggiungere il Blocco Tableberg nell'editor come per qualsiasi altro blocco di Gutenberg.
Impostare il numero di righe e colonne in base al numero di caselle di icone che si desidera creare.
Ad esempio, in questa esercitazione creeremo tre caselle di icone. Quindi, imposteremo 3 colonne e 1 riga.
È possibile vedere il numero di caselle create. Successivamente, aggiungeremo il contenuto per creare le caselle delle icone.
Passo 02: Aggiungere un'icona a una casella/cella
Tableber consente di aggiungere alle sue celle vari elementi con i quali è possibile rendere le celle della tabella molto attraenti. Li spiegheremo in questa sezione.
Aggiungere un colore di sfondo alle celle
Selezionate l'intera tabella con Cliccando il Icona Tableberg sulla barra degli strumenti. Andare quindi alla voce Scheda Stili. Sotto la scheda vengono visualizzate le opzioni di colore. Utilizzando l'opzione adatta, impostare uno sfondo per le celle della tabella.
Nota: È necessario impostare il colore di sfondo all'inizio, poiché tutti gli elementi del riquadro della tabella saranno progettati in base ad esso.
Aggiungere un'icona a una casella/cella
È possibile aggiungere blocchi all'interno delle celle della tabella come nell'editor di blocchi di Gutenberg. Fare clic sull'icona più (+) su una cella. Trovate e aggiungete il valore Blocco icone to the cell.
Modificare e selezionare un'icona
Vai al sito Scheda Impostazioni nella barra laterale destra, mantenendo selezionato il blocco Icona. In questa scheda sono disponibili le opzioni per aumentare le dimensioni dell'icona, impostare la rotazione, e cambiare l'icona.
È possibile selezionare un'icona dalla libreria di icone esistente o importarne una dal disco locale.
Colorare l'icona
Vai al sito Scheda Stili. Impostare il Colore dell'icona e il Colore di sfondo.
In effetti, il layout del colore di sfondo non ha un bell'aspetto, vero? Abbiamo pensato a voi.
Scorrere un po' in basso sotto la scheda Stili. Vedrete la voce padding, margin, e raggio opzioni.
È possibile creare un layout per il colore di sfondo inserendo valori adeguati, come nell'immagine seguente.
Passo 03: Aggiungere testo alla cella/quadro
Nessun riquadro di icone ha senso senza un contenuto testuale. Aggiungere il blocco Paragrafo sotto l'icona della cella.
Aggiungere un titolo sulla casella delle icone. Avanti, allinearlo centralmente, selezionare un colore, e impostare una dimensione per il testo.
Allo stesso modo, aggiungere una descrizione del riquadro dell'icona utilizzando l'opzione Blocco di paragrafi.
Passo 04: Aggiungere un pulsante alla cella/quadro
È possibile indirizzare gli utenti a un'altra pagina, documentazione o risorsa aggiungendo un pulsante. Aggiungete il pulsante Blocco di pulsanti to the cell.
Dopo aver aggiunto il pulsante, aggiungere una copia CTA, cambiare il suo testo e colore di sfondo, e aumentare le dimensioni della copia.
Fase 05: Aggiungere spazi tra i blocchi
La cella sembra congestionata, giusto? È perché non c'è abbastanza spazio tra i blocchi della cella. Ma questo problema si può risolvere facilmente.
Selezionare l'intera cella. Vai al Scheda Stili. Scorrere un po' più in basso.
Otterrete Imbottitura delle celle e Spaziatura tra i blocchi opzioni. Utilizzando queste opzioni, è possibile creare gli spazi necessari tra i blocchi.
Quindi, la vostra casella con un'icona è pronta.
Passo 06: Duplicare il riquadro delle icone
È possibile creare manualmente altre caselle di icone nello stesso modo, oppure duplicare la casella. Tableberg dispone di un'interessante funzione per la duplicazione di righe e colonne.
Fare clic sul pulsante [Pro] Modifica tabella sulla barra degli strumenti. Il resto lo potete fare da soli. Per una guida dettagliata, consultate questo post su come aggiungere caselle di servizio in WordPress. Abbiamo spiegato come utilizzare questa funzione nella parte successiva di questo post.
Nell'immagine sottostante si può notare che abbiamo duplicato il riquadro delle icone e modificato il suo contenuto.
Passo 07: Aggiungere spazi tra le celle
Vai al sito Scheda Stili. Scorrere fino a Spaziatura tra le celle. Questa opzione consente di aggiungere uno spazio tra le celle, come nell'immagine qui sotto..
Fase 08: Rimuovere il bordo della cella
Nella scheda Stili è presente la voce Table Border e Inner Border opzioni. Impostare il valore del bordo a 0 in entrambi i punti. In questo modo si rimuovono i bordi dalle celle.
È quindi possibile creare un riquadro di icone in WordPress.
Chiudere!
Spero che questa guida vi sia piaciuta. Seguendo i passaggi descritti in questa guida, è possibile aggiungere e personalizzare facilmente i riquadri delle icone per allinearsi al proprio marchio ed evidenziare efficacemente le informazioni chiave.
Prima di partire, dedicare qualche minuto in più per imparare come formattare le tabelle in WordPress.
