Come creare una tabella dei prezzi in WordPress con i pulsanti

La creazione di una tabella dei prezzi è indispensabile se si vogliono vendere prodotti e servizi attraverso il proprio sito web. Ma per visualizzare più piani tariffari che i clienti possano confrontare facilmente senza lasciare la pagina, è necessario aggiungere la funzione "toggle" alla tabella.

La funzione "toggle" consente agli utenti di navigare o passare tra diverse serie di opzioni di prezzo, creando un'interfaccia interattiva. Ad esempio, gli utenti possono passare da un piano di abbonamento mensile, annuale o a vita.

In questo post, vi mostreremo una guida passo passo su come creare una tabella WordPress con i toggle. Iniziamo.

Creare bellissimi tavoli
Con l'editor di blocchi

Come creare una tabella dei prezzi in WordPress con i pulsanti

Prima di immergersi nel tutorial, è necessario disporre di TavoloBerg e Blocchi definitivi plugin installati sul sito. Con TableBerg, potete creare una tabella dei prezzi e Ultimate Blocks vi permetterà di aggiungere la funzione toggle alla tabella.

Una volta installati i plugin sul sito, è possibile procedere con l'esercitazione.

Passo 01: Aggiungere il blocco di contenuto a schede

Una volta che il plugin Ultimate Blocks è stato installato e attivato, si otterrà il file Contenuto a schede nella libreria dei blocchi. Trovare e aggiungere il blocco all'editor.

Aggiungere il blocco di contenuto a schede

Il blocco Contenuto a schede verrà aggiunto immediatamente all'editor.

Blocco a schede aggiunto all'editor

Passo 02: Aggiungere il blocco TableBerg all'interno del blocco Contenuto a schede

Il blocco Contenuto a schede consente di aggiungere altri blocchi al suo interno. Fare clic sul pulsante pulsante più (+). Individuare il blocco TableBerg e aggiungerlo.

Passo 03: Creare una tabella dei prezzi nella prima scheda

Definire il numero di righe e colonne della tabella. Selezioniamo 3*3 perché vogliamo creare una tabella a tre colonne.

Definire righe e colonne per la tabella

Si può notare che il layout della tabella è pronto.

Il layout della tabella è pronto

Passo 04: Aggiungere contenuto alla tabella

Il blocco TableBerg consente di aggiungere vari tipi di contenuto alle sue celle. È possibile aggiungere testi, elenchi, immagini, pulsanti CTA e altro ancora.

# Aggiungi titoli di colonna

Per prima cosa, dobbiamo aggiungere i titoli alle colonne della tabella. Creeremo una tabella di prezzi per un plugin immaginario. Quindi, il nostro contenuto sarà di conseguenza.

Si può notare che abbiamo aggiunto tre titoli, li abbiamo allineati al centro e ne abbiamo aumentato le dimensioni.

# Aggiungi piani tariffari

Quindi, aggiungere i piani tariffari alle colonne. Li abbiamo colorati utilizzando l'opzione Evidenzia della barra degli strumenti di Gutenberg.

Aggiungere piani tariffari

# Elenco caratteristiche del prodotto

È ora il momento di elencare le caratteristiche di ciascun piano. TableBerg consente di aggiungere il Blocco elenco alla tabella. Trovare e aggiungere il blocco Elenco alla tabella.

Si può notare che abbiamo elencato tutte le caratteristiche di ogni piano in tutte le colonne.

Visualizzare le caratteristiche del prodotto

# Aggiungere pulsanti CTA

Infine, iniziare ad aggiungere pulsanti CTA alle colonne utilizzando il metodo Blocco di pulsanti.

Aggiungere pulsanti CTA

I pulsanti CTA sono pronti sulla tabella dei prezzi.

Pulsanti CTA sulla tabella dei prezzi

Quindi, il tavolo è pronto. È possibile personalizzare e stilizzare ulteriormente il tavolo come si desidera. Spero che possiate farlo da soli.

Passo 05: Creare una nuova tabella in un'altra scheda

Creare una nuova scheda facendo clic sul pulsante icona più (+). Non dimenticate di rinominare le schede secondo le vostre preferenze.

Creare una nuova scheda con il blocco Contenuto a schede

Creare una nuova tabella in questa scheda nello stesso modo descritto sopra. Abbiamo allineato al centro i titoli delle schede per una migliore visualizzazione.

Creare una nuova tabella in una nuova scheda

La tabella dei prezzi con la funzione "toggle" è pronta. Visualizzate l'anteprima della tabella in una nuova scheda per vedere se tutto funziona bene.

Conclusione

La creazione di tabelle di prezzi con la funzione toggle è ormai un'abitudine seguita da quasi tutti i siti web di classe standard. La maggior parte dei siti web le crea utilizzando page builder e soluzioni simili, che spesso appesantiscono la pagina.

Tuttavia, poiché TableBerg e Ultimate Blocks sono due plugin basati su blocchi, non appesantiranno mai le pagine dei prezzi. Potete anche testarli sui vostri siti di staging o sull'host locale. Potrete godere di una velocità leggera e veloce.

Fateci sapere il vostro feedback nella casella dei commenti qui sotto. Inoltre, non esitate a chiederci se avete domande.



Il team Tableberg

L'offerta Early Bird è ora disponibile!
Questo è il testo predefinito per la barra di notifica