Come mostrare le fasi del processo in WordPress

Come mostrare le fasi del processo in WordPress

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

Il plugin Tableberg aggiunge un blocco chiamato Tavolo di lavoro alla libreria dei blocchi. Aggiungerlo all'editor facendo clic sul pulsante icona più (+).

Aggiungere il blocco TableBerg all'editor di Gutenberg

Impostare il numero di righe e colonne necessarie per mostrare il processo. Per questa esercitazione, impostiamo 3*9 per le colonne e le righe.

Impostare il numero di righe e colonne

La tabella è pronta. Successivamente, aggiungeremo contenuti alle sue righe e colonne per mostrare le fasi del processo.

Il tavolo costruito con Tableberg è pronto

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.

Impostare il colore di sfondo per le singole righe

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.

Impostare lo sfondo con un colore diverso per le singole righe

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.

Elencare i numeri delle fasi del processo

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.

Scrivere i titoli dei passi e le loro descrizioni

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.

Aggiungere il blocco immagine alla cella Tableberg

Si può notare che è stata aggiunta un'immagine alla cella. È possibile aumentare le dimensioni dell'immagine trascinando l'icona circolare e tenendola premuta contemporaneamente.

Aumentare le dimensioni dell'immagine su Tableberg

Allo stesso modo, completate l'aggiunta di immagini a tutte le altre celle dell'ultima colonna, mantenendole pertinenti al contenuto.

Aggiungere immagini a tutte le altre celle dell'ultima colonna

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.

Aggiungete le informazioni di contatto in modo che le persone possano contattarvi per chiedere aiuto.

Ora, aggiungere il file Blocco elenco stilizzato all'ultima riga della tabella.

Aggiungere il blocco Elenco stilizzato

Selezionare un'icona che rappresenti il sito web. Accanto all'icona, scrivere l'indirizzo del sito web.

Aggiungere 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.

Personalizzare il bordo della tabella

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.

Anteprima delle fasi del processo

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.



Il team Tableberg