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.
Il blocco Contenuto a schede verrà aggiunto immediatamente 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.
Si può notare che 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.
# 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.
# Aggiungere pulsanti CTA
Infine, iniziare ad aggiungere pulsanti CTA alle colonne utilizzando il metodo Blocco di pulsanti.
I pulsanti CTA sono pronti 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 tabella in questa scheda nello stesso modo descritto sopra. Abbiamo allineato al centro i titoli delle schede per una migliore visualizzazione.
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.
