La presentazione delle tabelle dei prezzi è importante per influenzare i clienti. Un modo efficace per migliorare le tabelle dei prezzi è incorporare un nastro. Si tratta di una striscia di etichette di grande effetto visualizzata in diagonale su una tabella per evidenziare offerte, sconti e caratteristiche specifiche.
Sia che si tratti di uno sconto a tempo limitato, di una caratteristica speciale o di pacchetti in vendita, un nastro ben posizionato può influenzare istantaneamente i potenziali clienti a prendere una decisione. Tavolo di lavoro è un plugin intuitivo e potente per farlo.
In questo post, vi mostreremo come aggiungere una tabella prezzi con nastro in WordPress con Tableberg.
Creare bellissimi tavoli
Con l'editor di blocchi

Una volta installato il plugin sul vostro sito, seguite la seguente esercitazione.
Step 1: Add the Tableberg Block to the Editor
Il plugin aggiunge un blocco chiamato Tavolo di lavoro alla libreria dei blocchi di Gutenberg. Aggiungere il blocco all'editor semplicemente premendo l'icona più (+).

Impostare il numero di colonne e righe necessarie per la tabella. Per questa esercitazione, imposteremo 3*1 per le colonne e le righe.

Si può notare che il layout di base della tabella dei prezzi è stato creato con colonne e una riga.

Step 2: Add Content to the Table
Una tabella dei prezzi di solito include i nomi dei prodotti, le immagini, i prezzi, i prezzi scontati e i pulsanti CTA. Vediamo come aggiungerli alla tabella.
Aggiungere il nome del prodotto
Tableberg consente di aggiungere diversi tipi di blocchi alle sue celle, come l'editor di blocchi di Gutenberg. Aggiungere il blocco Blocco di paragrafi per scrivere il nome del prodotto. (Per impostazione predefinita, il blocco di paragrafo viene aggiunto alle celle della tabella).

Scrivete il nome del prodotto nella cella. Allineare il testo al centro, renderlo in grassetto, modificarne il colore e ridimensionarlo utilizzando le opzioni mostrate nell'immagine sottostante.

Aggiungere l'immagine del prodotto
Aggiungere il blocco Immagine alla tabella dei prezzi.

Il blocco immagine consente di caricare l'immagine del prodotto. Ridimensionare l'immagine come necessario e allinearla in modo appropriato.

Aggiungi un prezzo precedente
Mostrare la differenza tra il prezzo precedente e quello attuale è un ottimo modo per evidenziare lo sconto. Aggiungiamo quindi un prezzo precedente sotto l'immagine del prodotto.

L'aggiunta di un effetto barrato al prezzo precedente può attirare l'attenzione delle persone. Per farlo, selezionare il prezzo utilizzando il cursore. Cliccare il Più opzione sulla barra degli strumenti.
Vai a il In evidenza e Opzioni di barratura. Sarà possibile modificare il colore del prezzo e aggiungere una barratura.

Aggiungere il prezzo corrente del prodotto
Ora, aggiungete il prezzo attuale del prodotto in un carattere relativamente più grande, in modo da attirare l'attenzione delle persone.

Aggiungere un pulsante CTA
Alla fine di tutti i contenuti, aggiungere il simbolo Blocco di pulsanti.

Modificare il colore di sfondo del pulsante, il colore del testo, le dimensioni della tipografia e il padding. Eseguite queste modifiche a vostro piacimento.

Step 3: Add Spaces Between the Blocks
Quindi, il contenuto della colonna è pronto. Ma come si può vedere, tutti i blocchi sono troppo congestionati. Dobbiamo aggiungere una spaziatura tra di essi per creare un aspetto più fresco.
Per farlo, selezionare la colonna particolare. Quindi, andare alla sezione Scheda Stili. Vieni al Spaziatura tra i blocchi scorrendo la scheda. Aumentare lo spazio aggiungendo un valore alla casella.

Allo stesso modo, aggiungere contenuti alle altre colonne. Ma per risparmiare tempo, si può duplicare la colonna e poi aggiornare il contenuto. Ecco una guida su come duplicare una colonna e una riga Tableberg.

Step 4: Add Radius to the Table Columns
È possibile migliorare l'estetica aggiungendo un raggio di bordo alle colonne della tabella. Select il Icona Tabelberg sulla barra degli strumenti. Vai a il Scheda Stili.
Scorrere e venire a Spaziatura tra le celle. Trascinando l'opzione corrispondente, è possibile aggiungere spazi tra le colonne della tabella.

Vedrete il Table Border opzione appena sotto. Set il vostro desiderio Valore del raggio fosia il bordo interno che quello esterno.

In questo modo è possibile preparare la tabella dei prezzi.
Step 5: Add a Ribbon to the Pricing Table
Selezionare la colonna a cui si desidera aggiungere una barra multifunzione. Premete l'icona più (+) e trovate l'opzione Blocco nastro. Quindi, fare clic su e sul blocco nella colonna.

Il nastro verrà aggiunto alla tabella. Successivamente, dal menu Scheda Impostazioni, selezionare il tipo di nastro, il testo del nastro, il lato e la distanza.
Successivamente, è possibile personalizzare il testo e il colore di sfondo dalla sezione Scheda Stili.

Quindi, la tabella dei prezzi è pronta con un nastro.
Chiudere!
Spero che questa esercitazione vi sia piaciuta. Ma ci sono diversi punti che dovete ricordare. Assicuratevi che la vostra tabella sia pulita e ordinata. I design minimalisti dei tavoli dei prezzi hanno sempre un impatto sui potenziali clienti.
In secondo luogo, utilizzate un testo chiaro e conciso che colleghi immediatamente i visitatori del web. Se possibile, aggiungete alcuni vantaggi/caratteristiche dei prodotti nella tabella. Se nelle tabelle dei prezzi si vogliono coprire più piani, è meglio visualizzarli con un interruttore a levetta.
Ecco una guida su come creare una tabella prezzi con l'interruttore a levetta in WordPress.