I Migliori Plugin Per Tabelle Prezzi di WordPress A Confronto

Avete un listino prezzi sul vostro sito web?

Questi prezzi potrebbero essere relativi a servizi come la cura del prato oppure potrebbero essere i prezzi di pacchetti software. Dal mondo tecnologico agli studi di yoga, la maggior parte delle aziende potrebbe utilizzare delle tabelle prezzi per rappresentare meglio ciò che offre.

Il modo migliore è dare un’occhiata ai migliori plugin per tabelle prezzi di WordPress, quindi implementarne uno sul vostro sito web.

Ma Questo Fa Sorgere una Domanda, Perché è Così Importante Avere una Tabella Prezzi?

La risposta a questa domanda può sembrare ovvia (volete migliorare le conversioni, giusto?), ma è bello capire il perché di una tabella prezzi. Perché un plugin di tabelle prezzi è più efficace nel realizzare una vendita rispetto a un normale elenco di punti, a dei paragrafi o anche a un’immagine?

• Una tabella prezzi permette di creare uno schema ordinato e un confronto dei vostri servizi o pacchetti.
• Le caratteristiche più importanti sono mostrate in una tabella prezzi, eliminando ogni ingombro e lasciandolo in un’altra pagina.
• La tabella prezzi presenta chiari pulsanti di call-to-action per mostrare alle persone come procedere con l’acquisto.
• La maggior parte delle tabelle prezzi utilizza nomi di pacchetti/piani che semplificano la comprensione da parte dei clienti.
• Avete la possibilità di aggiungere enfasi su determinate parole, piani o caratteristiche, utilizzando caratteri o più grandi o elementi grafici.
• È molto più interessante leggere una tabella prezzi basata sulla grafica piuttosto che una che abbia solo del test al suo interno.
• Potete migliorare le conversioni con l’urgenza (ad esempio “il tempo è quasi esaurito per un buon affare”) o prove gratuite.
• Le tabelle prezzi occupano una quantità minima di spazio sulla pagina web, per questo potete aggiungere altre informazioni, come una FAQ o una chat per i venditori.

Che Cosa Cercare in un Plugin per Tabelle Prezzi di WordPress

Ora che conosciamo i vantaggi di un plugin per tabelle prezzi di WordPress, diamo un’occhiata ad alcune delle funzionalità che dovreste considerare:

• Opzioni gratuite e premium – I miei plugin preferiti per le tabelle dei prezzi vi offrono una tabella standard per rendere più bello il vostro prezzario. Dopo di che, le versioni premium, con le loro funzionalità extra, non dovrebbero essere troppo costose.
• Integrazioni con i principali page builder – Alcuni page builder dispongono delle proprie tabelle prezzi. Tra i più popolari page builder ricordiamo Divi Builder, Elementor e WPBakery.
• Skin o temi per creare tabelle prezzi in pochi secondi – Ci piace anche vedere strumenti di personalizzazione per colori, caratteri e icone.
• Un’impostazione per la visualizzazione di badge su determinati piani, come per i piani “Best Value” o “Most Popular”.
• Opzioni per valute multiple per l’utilizzoo in tutto il mondo.
• Supporto per pulsanti grandi e personalizzabili su ciascun piano tariffario.
• Un builder drag and drop sarebbe eccellente.
• Ci piace anche vedere accesso a CSS e HTML, in quanto gli sviluppatori più avanzati vorranno complesse opportunità di personalizzazione.

Potremmo passare in rassegna decine di funzionalità utili per i prezzi, ma questo è essenziale per un buon inizio.

I migliori Plugin per Tabelle Prezzi di WordPress a Confronto

1. Responsive Pricing Table by WP Darko
2. Go Pricing
3. Pricing Tables WordPress Plugin – Easy Pricing Tables
4. Pricing Table by Supsystic
5. CSS3 Responsive WordPress Compare Pricing Tables
6. ARPrice – Responsive WordPress Pricing Table Plugin
7. Pricing Table – Price list, Price Table, Easy Pricing Table
8. WRC Pricing Tables

Per quanto riguarda i plugin per tabelle dei prezzi e i siti WordPress, le opzioni non mancano. Alcuni dei migliori plugin possono essere utilizzati gratuitamente, mentre altri sono premium senza opzione gratuita. Detto questo, tutti i plugin qui sotto meritano un posto in questa lista, e alcuni di loro hanno caratteristiche uniche che li rendono perfetti per specifici settori o aziende.

1. Responsive Pricing Table by WP Darko

Il Responsive Pricing Table è uno dei plugin per la creazione di tabelle prezzi più ricchi di funzionalità e user-friendly. Fornisce un’eccellente versione gratuita senza limitazioni sul numero di piani o su come create le tabelle per i vostri siti web. È possibile, tuttavia, effettuare l’upgrade alla versione premium per accedere a funzioni più avanzate, come le skin e un “equalizzatore” per rendere tutte le colonne esattamente della stessa altezza.

Le tabelle dei prezzi possono essere completate con semplici campi e pulsanti di backend. Ad esempio, tra i campi predefiniti che potete utilizzare ci sono i prezzi, le descrizioni, i titoli dei piani e le icone. Alcuni dei pulsanti personalizzati consentono collegamenti a Stripe e PayPal, mentre le classi CSS personalizzate sono sicuramente di aiuto agli sviluppatori avanzati.

Costi

È disponibile un piano gratuito.

Potete acquistare il plugin premium per $19 su un sito o $49 per siti illimitati.

Gli sviluppatori di Darko vendono altri plugin, e ottenerli tutti al prezzo di $79. Questo potrebbe essere utile per alcune aziende.

Le Caratteristiche Che Rendono Responsive Pricing Table un’Ottima Scelta

• Il piano gratuito offre gli strumenti necessari per una vasta gamma di piccole imprese, dal momento che si ricevono tabelle e piani illimitati.
• Anche i prezzi della versione premium sono piuttosto bassi.
• Le skin sono moderne e altamente personalizzabili di default e sono disponibili un sacco di pulsanti e caratteri da regolare.
• Icone e altri elementi visivi sono accessibili.
• Potete includere tutte le funzionalità che desiderate per i vostri piani tariffari.
• I pulsanti di invito all’azione possono collegarsi a sistemi di pagamento di terze parti come PayPal.
• È disponibile una vasta gamma di simboli di valuta che vi consente di raggiungere diversi paesi.
• Potete mostrare un badge per i piani consigliati.
• I piani ricorrenti (al mese o all’anno) possono essere visualizzati con impostazioni speciali.

2. Go Pricing

L’app Go Pricing non ha una versione gratuita, ma vanta migliaia di vendite e alcune ottime recensioni nel marketplace di CodeCanyon. Per non dire, poi, che ci vogliono solo $27 per ottenere uno dei migliori plugin per tabelle prezzi sul mercato.

Cosa rende il plugin Go Pricing così speciale? Tanto per cominciare, ha dei piani tariffari incredibilmente eleganti, con colori moderni e un sacco di spazi bianchi che fanno in modo che non sembri ingombrante. Potete anche scegliere tra una vasta collezione di temi, alcuni dei quali sono realizzati solo per determinati settori. Ci piace anche il fatto che il plugin si integri con diversi page builder e abbia degli shortcode che fanno sì che nessuno debba essere un mago della programmazione per creare tabelle prezzi.

Costi

Un costo una tantum di $27 con l’opzione per l’estensione del supporto a un anno, per $8,25.

Le Caratteristiche Che Rendono Go Pricing un’Ottima Scelta

• Ogni parte della vostra tabella prezzi è suddivisa in una propria sezione in un editor visuale. Ciò riguarda l’intestazione, il corpo e l’area dei pulsanti.
• Oltre 250 tabelle demo vi vengono fornite dopo l’acquisto del plugin. Ciò dovrebbe consentire alla maggior parte delle aziende di prendere un template e lanciare una pagina prezzi in pochi minuti.
• È possibile avere elementi drag and drop grazie alle integrazioni con i page builder. Go Pricing funziona bene con Beaver Builder, Elementor e WPBakery.
• La procedura di creazione delle tabelle prezzi è semplice per tutti i livelli di esperienza. Il plugin ha un’ottima interfaccia di back-end, con opzioni per shortcode, importazione e impostazioni.
• Potete includere animazioni per rendere più appetibili le vostre tabelle dei prezzi.
• Potete utilizzare oltre 2000 font per rendere le vostre tabelle ancora più visuali.
• È disponibile un modulo CSS personalizzato per coloro che vogliono andare oltre le funzionalità di base.
• Potete aggiungere funzionalità uniche come elementi multimediali, pulsanti PayPal e Google Maps.

3. Pricing Tables WordPress Plugin – Easy Pricing Tables

Se siete interessati a tabelle prezzi e di confronto pulite e senza orpelli grafici, il Pricing Tables WordPress Plugin può essere la soluzione adatta a voi. È disponibile sia in versione gratuita che premium. Quest’ultima parte da $29 all’anno per un sito web e arriva a $99 all’anno per siti illimitati. Alcune delle funzionalità premium sono molto interessanti; tra queste un componente aggiuntivo WooCommerce e l’integrazione di Google Analytics.

Alcune delle altre integrazioni per le versioni premium includono Easy Digital Downloads, Stripe e un componente aggiuntivo Pricing Toggle. In più, potete iniziare la procedura di progettazione con 10 progetti preimpostati. Come accennato, questo è uno dei plugin più semplici, quindi ci sembra adatto a coloro che non vogliono elementi come animazioni e grafiche.

Costi

Il plugin core è gratuito.

Il plugin premium costa $29 all’anno per un sito, $59 all’anno per cinque siti e $99 all’anno per siti illimitati.

Le Caratteristiche Che Rendono Easy Pricing Tables un’Ottima Scelta

• I design delle tabelle prezzi sono semplici e puliti, con un look moderno senza effetti non necessari.
• Potete regolare i colori e altri elementi di quasi ogni elemento delle tabelle prezzi. Questo comprende colonne, pulsanti e caratteri.
• Tutte le tabelle dei prezzi sono costruite nel back-end con un semplice elenco di campi visivi. Il setup è formattato proprio nel modo in cui la tabella dei prezzi apparirà sul frontend.
• Potete specificare che uno o più piani in evidenza rispetto agli altri.
• Potete riordinare le colonne con drag and drop.
• Viene fornito un modulo CSS custom per personalizzazioni più avanzate delle tabelle prezzi.
• Anche la versione gratuita supporta un numero illimitato di righe delle tabelle prezzi.
• Alcune delle versioni premium hanno ottime integrazioni per WooCommerce, Google Analytics e Stripe.

4. Pricing Table by Supsystic

Il team di sviluppo di Supsystic è noto per creare ogni sorta di plugin per gallerie fotografiche, popup, tabelle dati e altro. Ma diamo un’occhiata al plugin Pricing Table, che è offerto come soluzione gratuita con diverse funzionalità con cui divertirsi. Infatti, la versione gratuita del plugin offre template preimpostati, animazioni al passaggio del mouse e personalizzazione dei pulsanti. Potete anche importare ed esportare con facilità le informazioni delle vostre tabelle.

Ci piace anche il look del plugin premium, dato che parte da $39 per un sito e offre un ampio pacchetto di template premium e restrizioni di ruolo. Nel complesso, direi che questo è uno dei migliori plugin per tabelle prezzi, per quel che riguarda il core, cioè il plugin gratuito, e vi permette di sorvolare sulla versione a pagamento. Tuttavia, i template premium sono piuttosto interessanti e non costano molto.

Costi

Viene offerto un piano gratuito.

Potete effettuare un upgrade alla versione premium per un sito a $39. Oppure per cinque siti a $69. O, infine, a $149 per siti illimitati.

Le Caratteristiche Che Rendono Pricing Table by Supsystic un’Ottima Scelta

• Pricing Table di Supsystic è prossimo ad essere la soluzione più completa di plugin per tabelle prezzi nella versione gratuita. L’unico vantaggio che avrete dal plugin premium sono alcuni template migliori.
• Tutte le tabelle dei prezzi appaiono gradevoli, con elementi reattivi e colori brillanti.
• I template della versione gratuita sono belli e i template premium sono fantastici.
• Con questo plugin avrete uno switch che mostra offerte speciali come per il pagamento anticipato di un anno o per l’acquisto imediato.
• Potete presentare alcuni dei vostri piani con icone visuali.
• Avrete a disposizione strumenti come shortcode, slider colorati e visual building che vi consentono di non toccare nemmeno una riga di codice durante la procedura di creazione.
• Il plugin offre animazioni al passaggio del mouse per rendere i vostri piani più attraenti per i visitatori.
• Sono supportati anche immagini e video che vi permettono di mostrare determinate caratteristiche o parti della vostra attività.
• Nel backend della dashboard di WordPress trovate un builder drag-and-drop.

5. CSS3 Responsive WordPress Compare Pricing Tables

Al prezzo di $20, il plugin CSS3 Responsive pricing table è un acquisto dal valore incredibile. Viene venduto solo sul marketplace di CodeCanyon, ma è necessario tenere presente che non è disponibile alcuna versione gratuita. Detto questo, la maggior parte delle persone non si preoccuperà di pagare $20 per un plugin di gestione dei prezzi con un’alta valutazione e ottime recensioni. Nel complesso, il plugin ha alcuni bellissimi template per cominciare subito. È possibile modificare i colori e i caratteri, oltre a evidenziare alcuni dei migliori piani che avete.

La maggior parte delle tabelle prezzi di questo elenco sono reattive, ma questa sembra particolarmente buona dopo i test sul mio telefono e sul mio tablet. Sembra anche che lo sviluppatore sia pronto nelle risposte e disposto a creare nuove funzionalità e a rilasciarle negli aggiornamenti. Ad esempio, nel momento in cui scrivo questo articolo, sto visualizzando tre major release di funzionalità, cioè colonne scorrevoli, modalità responsive e importazione ed esportazione di dati.

Costi

$20 per tutte le funzionalità.

Potete pagare $5,63 per estendere a un anno l’assistenza clienti. Non è offerto nessun plugin gratuito.

Le Caratteristiche Che Rendono CSS3 Pricing Tables Grids un’Ottima Scelta

• Il prezzo è senza dubbio tra i migliori che abbiamo visto per le funzionalità disponibili.
• L’ampia raccolta di strumenti di personalizzazione consente di creare migliaia di tabelle prezzi uniche. Questo comprende 20 versioni a colori, 60 nastri, 42 icone a croce e due stili di tabella.
• Potete creare un numero illimitato di righe e colonne.
• Toccate nei moduli CSS e HTML per ulteriori personalizzazioni.
• Avrete opzioni per la regolazione della larghezza e dell’altezza di tutte le righe e colonne.
• Compatibilità multisite.
• Shortcode che consentono di implementare le tabelle prezzi ovunque nei vostri siti web.
• Strumenti di importazione ed esportazione dati che vi permettono di spostare i dati su un’altra tabella o importarli da un foglio di calcolo.
• Supporto di icone per includere elementi visivi come segni di spunta e X.
• Animazioni e supporto multimediale per aggiungere più immagini e far risaltare i vostri piani.

6. ARPrice – Responsive WordPress Pricing Table Plugin

Anche il plugin ARPrice è in vendita sul sito di CodeCanyon, ma al prezzo di $23. Stiamo iniziando a notare che molte aziende e singoli individui cominciano ad essere più disposti a pagare questi prezzi così bassi per ottenere tutte le funzionalità di cui hanno bisogno, anziché lavorare con un plugin gratuito privo di funzionalità. Indipendentemente da questo, questo plugin per tabelle prezzi presenta alcuni dei migliori elementi visivi di questo elenco, in quanto supporta diversi tipi di media, come le immagini di sfondo e le icone.

Il designer di backend è un editor visuale che rivela esattamente come apparirà online la vostra tabella dei prezzi. Potete scegliere se i piani tariffari si basano su offerte annuali, mensili o su uno dei molti altri tipi di offerte disponibili. Avviate la procedura selezionando un template, quindi potete entrare e importare i dati, modificare gli effetti e scegliere i tipi di carattere. Nel complesso, il plugin ARPrice offre un’interfaccia utente molto bella con risultati ancora migliori nel frontend.

Costi

Una commissione unica di $23 con una commissione di $6,75 per estendere il supporto fino a un anno.

Le Caratteristiche Che Rendono ARPrice un’Ottima Scelta

• È piuttosto conveniente per essere un plugin premium.
• Sono disponibili più di 300 template di tabelle prezzi da scaricare insieme al plugin.
• Gli strumenti di personalizzazione sono eccellenti, con opzioni di colore illimitate, template fully responsive, un pulsante di attivazione/disattivazione dei prezzi e oltre 3000 icone.
• Gli effetti dell’animazione aiutano a rendere più appetibili le tabelle dei prezzi.
• C’è un modulo CSS e un sistema di guida CSS per personalizzazioni avanzate.
• Riceverete alcune integrazioni uniche con altri programmi di terze parti come Google Maps.
• L’editor di template in tempo reale offre una bellissima interfaccia visuale per la regolazione di elementi come colonne, intestazioni e sfondi.
• C’è una funzione extra “team showcase”, che in pratica prende lo stesso formato della colonna e vi consente di condividere informazioni sui vostri dipendenti sul sito web.
• Questo plugin di WordPress per tabelle prezzi è compatibile con i page builder più popolari come Elementor, Gutenberg e WPBakery.

7. Pricing Table – Price list, Price Table, Easy Pricing Table

Il plugin Pricing Table – Price List plugin è sviluppato dallo staff di A WP Life. È una soluzione un po’ più recente, ma con una buona reputazione. La versione gratuita dispone di ottime opzioni di personalizzazione, inclusi alcuni template forniti insieme al plugin. Sono disponibili anche animazioni e potete inserire elementi come icone e elenchi di caratteristiche. Potete inserire i pulsanti “Acquista ora” sugli elenchi e incorpora i tag per cose come “Hot” o “Popular”.

La versione premium di questo plugin vi offre tutte le stesse funzionalità, oltre a 19 ulteriori template. Sono solo $9,99, quindi se trovate un template adatto al vostro brand, acquistatelo.

Costi

Gratuito e a $9,99 per la versione premium.

Le Caratteristiche Che Rendono Pricing Table un’Ottima Scelta

• Ottenete tutte le funzionalità utili già nella versione gratuita. L’unica ragione necessaria per l’upgrade è la disponibilità di un template particolare non incluso nella versione gratuita.
• Nella versione gratuita sono inclusi alcuni template per tabelle prezzi di bell’aspetto. È anche possibile eseguire l’upgrade per averne una ventina in più.
• Tutte le tabelle fornite con i plugin sono considerate interamente reattive.
• Le icone vi consentono di creare tabelle visivamente accattivanti.
• Gli shortcode aiutano a posizionare le vostre tabelle ovunque sul vostro sito web.
• Le tabelle prezzi possono essere aggiunte e rimosse dal sito con il clic di un pulsante.
• Le opzioni di personalizzazione includono colori illimitati, colori dei pulsanti, colori delle intestazioni e altro.
• Lo stile CSS può essere personalizzato dalla dashboard.
• L’area di progettazione non è un builder completamente visivo, ma è configurata con più colonne per simulare in anticipo l’aspetto delle tabelle.

8. WRC Pricing Tables

Il plugin WRC Pricing Tables è distribuito come plugin gratuito, ma avete la possibilità di effettuare l’upgrade a soli $10. La versione premium è un po’ più avanzata, con oltre 500 template extra, un’integrazione con PayPal e pulsanti di selezione dei prezzi per cose come il passaggio da piani mensili ad annuali. Con il piano premium viene fornita una manciata di altre funzionalità, quindi vale sicuramente la pena tenerlo in considerazione visto il prezzo basso.

Il plugin gratuito è ottimo per la creazione di tabelle prezzi semplici ed è possibile creare un numero illimitato di righe e colonne. Tutto il design è effettuato con l’aiuto di un editor drag-and-drop. Una delle cose che ci piace di più del plugin WRC Pricing Tables è che potete utilizzare un color picker, che essenzialmente prende il vostro colore e genera un design a caso per voi.

Costi

Gratuito. $10 per la versione premium.

Le Caratteristiche Che Rendono WRC Pricing Tables un’Ottima Scelta

• Il plugin WRC Pricing Tables ha caratteristiche eccellenti nella versione gratuita, con una soluzione premium completa per soli $10 (una tantum).
• Il plugin fornisce shortcode utili a posizionare le tabelle prezzi ovunque sul vostro sito WordPress. Ad esempio, uno shortcode potrebbe tecnicamente andare su qualsiasi pagina, post e potenzialmente anche in un widget.
• Le icone di Font Awesome aggiungono un tocco visuale al vostro design.
• Il plugin supporta anche Google Fonts.
• L’integrazione con il pulsante PayPal vi consente di raccogliere denaro dai vostri clienti.
• Con il plugin sono offerti diversi template.
• Potete aggiungere un numero illimitato di righe e colonne anche mentre duplicate le tabelle prezzi e le salvate per un momento successivo.
• Gli sviluppatori avanzati hanno la possibilità di migliorare le proprie tabelle con CSS personalizzati.

Quale, tra i Migliori Plugin per Tabelle Prezzi di WordPress, è il Più Adatto a Voi?

I plugin elencati sopra sono tutti pronti per essere testati. Però posso rendervi le cose un po’ più facili con alcuni altri consigli.

• Se desiderate un piano gratuito con la maggior parte delle funzionalità di cui hai bisogno, andate con Responsive Pricing Table by WP Darko o con Pricing Table by Supsystic.
• Se desiderate un’ampia raccolta di bei modelli di tabelle, prendete in considerazione Go Pricing o ARPrice.
• Per un tabella semplice e pulita, senza fronzoli inutili, pensate a Pricing Tables WordPress Plugin – Easy Pricing Tables.
• Per il miglior valore e con la maggior parte delle funzionalità di un plugin premium: Considerate CSS3 Responsive WordPress Compare Pricing Tables.

Ma tutti i plugin per tabella dei prezzi presenti in questo elenco hanno i loro vantaggi. Tuttavia, questi sono quelli che tendo a preferire.

Ma cosa succede se non siete interessati a utilizzare un plugin e vorreste creare la vostra tabella prezzi?

Ecco come fare!

Come Costruire una Tabella Prezzi in WordPress Da Zero

Per costruire una tabella prezzi da zero è necessario utilizzare il codice HTML che ci darà la struttura della tabella, e poi creare lo stile con CSS.

Per iniziare, accedete al vostro sito WordPress, andate alla dashboard e fate clic su Pagine → Aggiungi pagina. Potete anche aggiungere il codice a una pagina già esistente in cui desiderate visualizzare le tabelle prezzi.

Una volta caricato l’editor di WordPress, passate alla modalità testo e incolla il seguente codice:

<div class="pricing-table">
<div class="one-third first">
<ul>
       <li class="header">Basic</li>
       <li class="grey-blue">$ 9.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
              <li>List Item #4</li>
              <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a>
</div>
<div class="middle one-third">
<ul> 
       <li class="header-blue">Pro</li>
       <li class="light-blue">$ 99.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
               <li>List Item #4</li>
               <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a> 
</div>
<div class="one-third">
<ul>
       <li class="header">Business</li>
       <li class="grey-blue">$ 199.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
               <li>List Item #4</li>
               <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a> 
</div>
</div>

Il codice è piuttosto semplice: in primo luogo, creiamo un div per contenere il nostro codice della tabella prezzi e semplificare la formattazione con i CSS. Quindi, dal momento che stiamo creando tre tabelle, ciascuna di esse è racchiusa in una colonna di un terzo. L’ultima parte è la tabella stessa, con l’aggiunta di classi per un header e un punto per il prezzo che le farà risaltare dal resto della tabella.

Prima di fare clic su Pubblica o Aggiorna, assicuratevi di sostituire il testo tra i tag [pre]<li> and </li>[/pre] con il vostro testo e di aggiungere il link al modulo di pagamento dopo la parte href del link.

Dopo aver sostituito tutte le informazioni, andate avanti e fate clic su Pubblica, se avete creato una nuova pagina, o Aggiorna se avete aggiunto la tabella a una pagina esistente.

Se guardate la vostra pagina adesso, noterete che la tabella prezzi sembra molto semplice. Aggiungiamo un po’ di stile.

Se state utilizzando un child theme, come dovreste, aggiungete il seguente codice al foglio di stile del child theme o all’editor CSS personalizzato.

La prima parte del codice assicurerà che la nostra tabella prezzi venga visualizzata in colonne e, se desiderate o avete bisogno di visualizzare più di tre tabelle, queste classi vi consentiranno di sostituirle facilmente:

/* ## Column Classes
--------------------------------------------- */
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}

.one-third,
.two-sixths {
width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}

.one-fourth {
width: 23.076923076923077%;
}
.three-fourths {
width: 74.35897435897436%;
}
.one-sixth {
width: 14.52991452991453%;
}
.five-sixths {
width: 82.90598290598291%;

}
.first {
clear: both;
margin-left: 0;
}

La seconda parte del codice ci darà lo stile effettivo delle tabelle.

/* ## Pricing Table
 --------------------------------------------- */

.pricing-table {
 line-height: 1;
 }
 li.header {
 background-color: #2f79a9;
 color: #fff !important;
 font-size: 25px;
 border-bottom: 1px solid #2f79a9 !important;
 margin-bottom: 0 !important;
 }
 li.grey-blue {
 background-color: #569dcc;
 color: #fff !important;
 font-size: 20px;
 }

li.header-blue {
 background-color: #00b9eb;
 color: #fff !important;
 border-bottom: 1px solid #00b9eb !important;
 font-size: 25px;
 margin-bottom: 0 !important;
 }
 li.light-blue {
 background-color: #72dffd;
 color: #fff !important;
 font-size: 20px;
 }

.middle {
 box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
 }
 .pricing-table .one-third {
 background-color: #fff;
 margin: 20px 5px;
 padding: 40px;
 width: 32.33%;
 }

.pricing-table .one-third:nth-child(3n+1),
 .pricing-table .one-third:nth-child(3n+2),
 .pricing-table .one-third:nth-child(3n) {
 border: 1px solid #ddd;
 }

.pricing-table .one-third ul {
 margin: 0;
 }

.pricing-table ul li {
 border-bottom: 1px solid #ddd;
 color: #333;
 margin-bottom: 10px;
 padding: 10px;
 text-align: center;
 list-style-type: none;
 }

.pricing-table a.pricing-button {
 background-color: #00b9eb;
 border: 3px solid #00b9eb;
 color: #fff;
 display: block;
 text-align: center;
 padding: 16px 24px;
 }

.pricing-table a.pricing-button:hover {
 background-color: #000;
 border: 3px solid #000;
 color: #fff;
 }

/* Pricing Table - Media Queries for Mobile Devices
 --------------------------------------------- */

@media only screen and (max-width: 1140px) {
 .pricing-table .one-third {
 width: 32%;
 }
 }

@media only screen and (max-width: 800px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 568px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 480px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 420px) {
 .pricing-table .one-third {
 width: 100%;
 margin: 20px 0;
 }
 }

Abbiamo aggiunto uno stile semplice ed essenziale per le tabelle prezzi e abbiamo stilizzato l’intestazione e il prezzo in modo diverso per far sì che risaltino. Abbiamo anche aggiunto un box shadow attorno alla tabella centrale per evidenziare quel pacchetto specifico. Infine, abbiamo aggiunto alcune media query per far sì che le tabelle siano reattive.

Dopo aver incollato entrambi i blocchi CSS, andate avanti e fate clic su Aggiorna file. Ora date un’occhiata alla vostra pagina e accertatevi che tutto sia come lo volete.

Se avete domande sulle tabelle prezzi o se avete suggerimenti da dare ad altri, scriveteci tutto nei commenti!

Matteo Duò Kinsta

Redattore Capo presso Kinsta e Content Marketing Consultant per sviluppatori di plugin WordPress. Entra in contatto con Matteo su Twitter.

• Sito Web
• LinkedIn
• Twitter