Come aggiungere una tabella dei prezzi con una barra multifunzione in WordPress

Come aggiungere una tabella dei prezzi con una barra multifunzione in WordPress

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ù (+).

Aggiungere il blocco TableBerg all'editor di Gutenberg

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

Impostare il numero di righe e colonne

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

Le colonne e le righe vengono aggiunte all'editor

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

Aggiungere il blocco di paragrafi alla tabella dei prezzi

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.

Scrivere il nome del prodotto e personalizzarlo

Aggiungere l'immagine del prodotto

Aggiungere il blocco Immagine alla tabella dei prezzi.

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.

Caricare l'immagine del prodotto

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.

Scrivere il prezzo precedente

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 l'effetto barrato al prezzo

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 il prezzo corrente del prodotto

Aggiungere un pulsante CTA

Alla fine di tutti i contenuti, aggiungere il simbolo Blocco di pulsanti.

Aggiungere il blocco pulsante alla tabella dei prezzi

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

Personalizzare il pulsante CTA della tabella dei prezzi

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.

Aggiungere spazi tra i blocchi

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.

Riempire le altre colonne della tabella dei prezzi

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.

Aggiungere il raggio alle colonne della tabella

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

Aggiungere il redirect alle colonne della tabella

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.

Selezionare una colonna per aggiungere un nastro

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.

Personalizzare il nastro della tabella dei prezzi

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.



Il team Tableberg