Crea tabelle dei prezzi con l'editor di blocchi Gutenberg

In più di un anno abbiamo assistito a una grande evoluzione nell'editor di blocchi di Gutenberg. Rispetto al classico editor di WordPress, ora possiamo progettare elementi nei nostri post e pagine che prima potevano essere realizzati solo tramite codifica.

Ad esempio, con l'editor classico, il modo più semplice per mostrare una tabella in un post era creare la tabella in un foglio di calcolo, esportarla come immagine e quindi inserirla nel post dove si voleva mostrarla. Ma uno dei blocchi che ora troviamo nel nuovo editor di WordPress è il blocco tabella. Vediamo come creiamo una tabella con Gutenberg e fino a che punto potremmo creare una tabella dei prezzi con questo stesso blocco.

Il blocco della tavola

Creare una tabella è facile come aggiungere un nuovo blocco Tabella in cui indichiamo il numero di righe e colonne che vogliamo e il loro allineamento.

In un blocco Tabella, possiamo personalizzare le seguenti proprietà:

Possiamo anche indicare in ogni cella l'allineamento del testo e se il carattere è in grassetto o corsivo e aggiungere collegamenti. Inoltre, possiamo modificare la tabella in qualsiasi momento aggiungendo o rimuovendo righe e/o colonne.

In questo modo, vediamo che possiamo facilmente creare la seguente tabella:

Questo è molto più semplice e veloce di quello che potremmo fare con il classico editor. E il risultato ottenuto può sicuramente servire a mostrare una tabella di dati.

Limitazioni dei blocchi di tabelle

Sebbene sia stato molto facile per noi creare la tabella precedente, abbiamo riscontrato alcune limitazioni. Da un lato, le tabelle progettate con il blocco di tipo Tabella in Gutenberg non rispondono. Cioè, la tabella non si rompe ma diventa più piccola senza poter mostrare i diversi elementi della tabella per colonne:

Una tabella che si adatta completamente ai dispositivi mostra gli elementi della tabella suddividendo la tabella in colonne, in modo che tutte le celle vengano visualizzate molto meglio.

Oltre alla (in)capacità di adattarci ai dispositivi, come avrai notato, in un blocco tabella non possiamo modificare facilmente il tipo e la dimensione del carattere, i colori, ecc. in ogni cella. Vale a dire, a causa di tutti i suoi limiti, il blocco tavolo Gutenberg non è utile per creare una tabella dei prezzi interessante per i tuoi prodotti.

Come possiamo creare queste tabelle reattive?

Alternative

Il blocco delle colonne

Un'alternativa sarebbe provare a disporre la tabella con il blocco di colonne:

Di base

per liberi professionisti e siti web personali

€ 29/mese

1 sito

5.000 visite alle pagine testate

sottoscrivi

Professionale

per piccoli imprenditori

€ 89/mese

5 siti

35.000 visite alle pagine testate

sottoscrivi

Impresa

per i team focalizzati sull'ottimizzazione

€ 259/mese

? 10 siti

200.000 visite alle pagine testate

sottoscrivi

Il vantaggio del blocco colonne, rispetto al blocco Tabella, è che è completamente reattivo e su uno schermo mobile vedremo che ciascuno dei piani viene visualizzato dietro l'altro.

Vediamo che le colonne sono completamente reattive. E sicuramente le colonne, per mostrare poche informazioni e senza troppe complicazioni, sono un'alternativa da considerare.

Plugin per blocchi tabella prezzi

La mia raccomandazione se devi creare tabelle dei prezzi interessanti è di installare alcuni dei plugin che includono blocchi per questo. Potrebbero non permetterti, senza toccare il codice, nessun tipo di personalizzazione, ma in molti casi puoi ottenere risultati molto eleganti. Diamo un'occhiata ad alcuni esempi completamente integrati con l'editor di blocchi di Gutenberg.

CoBlock

Coblocks è un plugin che include un intero set di blocchi totalmente adattati a Gutenberg. Uno di questi è il blocco della tabella dei prezzi.

È molto semplice e facile da usare e, senza codifica, puoi personalizzare il numero di colonne e alcuni aspetti legati alla tipografia, nonché i colori delle colonne e del testo. Hai rapidamente una tabella dei prezzi completamente reattiva come quella mostrata nell'immagine seguente.

Getwid

Allo stesso modo, il plugin Getwid include anche un intero set di blocchi completamente compatibili con l'editor Gutenberg. Rapidamente, puoi creare facilmente una tabella dei prezzi completamente reattiva come questa:

In questo caso, puoi personalizzare i caratteri e i colori dello sfondo e del testo.

Blocchi Premium per Gutenberg

Il plugin Premium Blocs for Gutenberg include anche blocchi con i quali puoi creare tabelle dei prezzi molto interessanti. Di seguito ti mostro un'immagine della tabella dei prezzi che ho creato con il blocco della tabella dei prezzi inserito nelle colonne.

Questo blocco ti consente di personalizzare i colori, i caratteri, il tipo di pulsanti, se desideri includere un'icona, le proprietà su come visualizzare il prezzo, le caratteristiche e la descrizione, tra gli altri. Come puoi vedere, ti consente una personalizzazione molto completa.

Plugin con editor integrati

In alternativa, troverai altri tipi di plugin che includono un editor di tabelle dei prezzi integrato che si integra nella dashboard di WordPress e con il quale puoi creare tabelle molto complete e personalizzate. Una volta creata la tabella desiderata, questa tabella può essere inclusa in qualsiasi pagina o post utilizzando uno shortcode. Vediamo alcuni esempi:

Tabella dei prezzi reattiva

Responsive Pricing Table è un plug-in che aggiunge un nuovo editor al tuo WordPress in modo da poter creare tabelle dei prezzi. Puoi aggiungere un gran numero di piani e personalizzarli.

Per ogni piano, puoi aggiungere il nome, il sottotitolo, la descrizione e il prezzo. Puoi anche aggiungere un elenco di funzionalità, personalizzare il pulsante di acquisto e modificare la combinazione di colori del piano.

Una volta creato il piano, devi solo aggiungerlo utilizzando uno shortcode nella pagina dei prezzi.

Tabella dei prezzi di Supsystic

Il plug-in Supsystic Pricing Table aggiunge un editor drag-and-drop alla dashboard di WordPress con il quale puoi creare tabelle. Ti offre molti design di tavoli reattivi. Nella versione gratuita, hai fino a 7 design disponibili.

Dopo aver selezionato il design della tabella desiderato, hai un editor che ti consente di modificare il numero di colonne e personalizzare molte funzionalità di ciascuno dei piani mostrati. E puoi anche cambiare il layout in qualsiasi momento. Infine, come prima, la tabella può essere inclusa in qualsiasi pagina o post con uno shortcode.

Altri plugin gratuiti che integrano gli editor di tabelle dei prezzi sono:

• Tabella dei prezzi di AR Price
• Tabelle dei prezzi Plugin WordPress – Tabelle dei prezzi facili di Fatcat Apps
• Generatore di tabelle dei prezzi reattivi – wpPricing Builder
• Tabelle dei prezzi WRC
• Generatore di tabelle dei prezzi – Tabelle dei prezzi AP Lite
• Tabella dei prezzi di TC per temiCodice
• Tabella dei prezzi – bh A WP Life

Conclusione

Come vedi, in WordPress hai un'ampia varietà di alternative per creare tabelle dei prezzi senza costi aggiuntivi e senza dover codificare direttamente. Quindi si tratta solo di scegliere l'opzione più adatta alle proprie esigenze.

Ricorda che la pagina in cui mostri i prezzi dei tuoi prodotti finisce per essere la più critica per ottenere clienti. Quindi, il tempo che dedichi a renderlo attraente non sarà vano. E per ispirarti, puoi dare un'occhiata al design della tabella dei prezzi del nostro prodotto Nelio A/B Testing, che è quello che spicca come immagine in evidenza di questo post?.