Come abbiamo detto più volte in molti post del nostro blog, Tavolo di lavoro è un plugin versatile. Non è solo un plugin per la creazione di tabelle, ma può essere utilizzato anche per progetti di web design multifunzionali. Ad esempio, riquadri di caratteristiche, sezioni call-to-action, infografiche, processi passo-passo e altro ancora.
In questo tutorial vi mostreremo come mostrare le fasi di un processo in WordPress, in modo da poter mostrare ai vostri visitatori guide passo-passo. Iniziate!
- Passo 01: aggiungere il blocco Tableberg all'editor
- Passo 02: Impostazione del colore di sfondo per le singole righe
- Fase 03: elencare i numeri delle fasi del processo
- Passo 04: Scrivere i titoli dei passi e le loro descrizioni
- Passo 05: Aggiungere le immagini alle rispettive celle
- Fase 06: Aggiungere le informazioni di contatto
- Passo 07: Personalizzare il bordo della tabella
- Fase 08: Anteprima delle fasi del processo
- Conclusione
Passo 01: aggiungere il blocco Tableberg all'editor
Il plugin Tableberg aggiunge un blocco chiamato Tavolo di lavoro alla libreria dei blocchi. Aggiungerlo all'editor facendo clic sul pulsante icona più (+).
Impostare il numero di righe e colonne necessarie per mostrare il processo. Per questa esercitazione, impostiamo 3*9 per le colonne e le righe.
La tabella è pronta. Successivamente, aggiungeremo contenuti alle sue righe e colonne per mostrare le fasi del processo.
Passo 02: Impostazione del colore di sfondo per le singole righe
L'Tableberg consente di impostare il colore della riga individualmente. Per farlo, selezionare una riga e andare al scheda Stili. Quindi, fare clic su [PRO] Colore sfondo riga. Spero che possiate fare il resto.
Si può notare che abbiamo impostato colori diversi per le singole righe. Poiché la colorazione e la stilizzazione di tutti gli altri elementi dipenderà dallo sfondo, abbiamo impostato i colori delle righe in anticipo.
Fase 03: elencare i numeri delle fasi del processo
Elencate i numeri delle fasi del processo. Fare il testo in grassetto, allinearli centralmente, impostare un colore del testo, e aumentare le loro dimensioni.
Passo 04: Scrivere i titoli dei passi e le loro descrizioni
Ora iniziate a scrivere i titoli e le descrizioni dei passi in ogni colonna. È possibile utilizzare due blocchi di paragrafi, uno per il titolo e l'altro per la descrizione. Quindi, impostare il colore del testo su bianco.
È possibile rendere la dimensione del testo del titolo leggermente più grande di quella del testo della descrizione, in modo che sia facile distinguerli separatamente.
Passo 05: Aggiungere le immagini alle rispettive celle
L'ultima colonna è riservata all'aggiunta di immagini. Aggiungiamo le immagini alle celle della colonna corrispondente alle righe della tabella.
Quindi, aggiungere il blocco immagine facendo clic sul pulsante icona più (+) nella rispettiva cella. È possibile caricare immagini, sia dal disco locale che dalla libreria multimediale.
Si può notare che è stata aggiunta un'immagine alla cella. È possibile aumentare le dimensioni dell'immagine trascinando l'icona circolare e tenendola premuta contemporaneamente.
Allo stesso modo, completate l'aggiunta di immagini a tutte le altre celle dell'ultima colonna, mantenendole pertinenti al contenuto.
Fase 06: Aggiungere le informazioni di contatto
Allo stesso modo, utilizzando il blocco paragrafo, aggiungete le informazioni di contatto in modo che i visitatori e gli utenti possano contattarvi per chiedere aiuto.
Ora, aggiungere il file Blocco elenco stilizzato all'ultima riga della tabella.
Selezionare un'icona che rappresenti il sito web. Accanto all'icona, scrivere l'indirizzo del sito web.
Passo 07: Personalizzare il bordo della tabella
Tableberg consente di rimuovere, colorare e modificare la larghezza del bordo interno ed esterno della tabella. Configurando opportunamente queste opzioni, è possibile abbellire ulteriormente la tabella.
Vai al sito Scheda Stili. Scorrere la scheda e arrivare alla voce Sezione di confine. Nella guida di oggi, abbiamo rimosso i bordi esterni e di colonna, tranne il bordo di riga. Abbiamo impostato il colore bianco e la larghezza di 1 px per i bordi delle righe.
Fase 08: Anteprima delle fasi del processo
Accedere alla pagina di anteprima. Verificate se il vostro progetto viene visualizzato perfettamente. Abbiamo visualizzato la maggior parte dell'immagine che si può vedere sullo schermo qui sotto.
Conclusione
Tableberg è un plugin versatile e promettente per la creazione di tabelle. Oltre alle tabelle, con questo plugin è possibile creare diverse sezioni web di grande effetto. Ad esempio, è possibile esplorare come aggiungere caselle caratteristiche in WordPress.
Ci occuperemo di altri post del blog che mostreranno altre cose e progetti straordinari che si possono creare con il plugin. Quindi, rimanete con noi e continuate a esplorare i nostri blog per accrescere la vostra base di conoscenze.
