10 frammenti CSS gratuiti per la creazione di tabelle dei prezzi reattivi

La pagina dei prezzi è un punto fermo per qualsiasi negozio online. Viene utilizzato per prodotti SaaS, società di servizi e negozi di eCommerce in tutto il Web.

E nessuna pagina dei prezzi sarebbe completa senza una tabella dei prezzi che confronti opzioni, caratteristiche e (naturalmente) prezzi. Ma progettare il tuo da zero può essere una seccatura.

Ecco dove queste tabelle dei prezzi open source possono aiutare. Questi sono tutti completamente reattivi e funzionano alla grande come modelli sia che tu stia cercando di personalizzare il tuo o semplicemente riutilizzare il codice esistente per risparmiare tempo.

1. Icon Table di Travis Williamson

Le ottime immagini vendono sempre. Potrebbero essere foto di prodotti o illustrazioni personalizzate, ma le immagini attirano l'attenzione più velocemente del testo.

Questa tabella dei prezzi iconica è un eccellente esempio di ciò che è possibile fare con le colonne della tabella visiva. Aggiungendo icone, puoi informare i clienti su cosa ricevono con ogni pacco prima ancora che leggano qualcosa. Le icone mostrano potenza e caratteristiche variabili. Il piano più piccolo ha un aeroplano di carta, mentre il piano più grande utilizza un razzo completo. Parliamo di contrasto!

Vedi la penna
Tabella dei prezzi di Travis Williamson (@travisw)

2. Strisce zebrate con colori di Agustin Ortiz

Questo esempio ha una tabella dei prezzi molto più semplice e segue regole di progettazione più convenzionali. Utilizza strisce zebrate, intestazioni di prezzo di grandi dimensioni e vari colori per aiutare un formato di prezzo specifico a distinguersi dal resto.

I colori possono sembrare un po' forti, quindi non è perfetto per ogni layout. Ma puoi facilmente cambiare i colori e mantenere lo stesso formato per far funzionare questa tabella dei prezzi sul tuo sito.

Vedi la tabella dei prezzi delle penne | Tabla de Precios di Agustin Ortiz

3. Tavolo viola scuro di Mike Torosian

Per un design del tavolo più scuro e più ricco, dai un'occhiata a questa tabella dei prezzi viola. Utilizza gradienti di sfondo ed effetti al passaggio del mouse sui bordi per creare una delle tabelle dei prezzi più professionali sul Web. È anche completamente reattivo, quindi gli elementi della tabella si suddividono in righe man mano che il browser diventa più piccolo.

Vedi la tabella dei prezzi delle penne di Mike Torosian

4. Prezzi professionali di LittleSnippets

I siti Web B2B spesso cercano design più professionali che si allontanano da schemi di colori creativi e icone estranee. Questo disegno dei prezzi è uno di questi esempi che segue una tipica combinazione di colori di tonalità scure e chiare.

Una colonna dei prezzi utilizza un'evidenziazione blu scuro per saltare fuori dal resto della tabella. È pratica standard seguire questa tecnica poiché può portare a un tasso di conversione più elevato. Ecco perché il piano "professionale" utilizza anche un'ombra esterna per apparire sopra le altre colonne. Ma quando ridimensionato più piccolo, cade in una formazione di stack per una navigazione più semplice.

Vedi la penna n. 1214 – Tabella dei prezzi di LittleSnippets

5. Tavolo con effetti al passaggio del mouse di Nidheesh Balachandran

In questo design della tabella dei prezzi, troverai alcuni splendidi effetti al passaggio del mouse che aggiungono colore alle intestazioni delle tabelle oscurate. Ognuno di loro lascia spazio a un'immagine di sfondo a tua scelta e l'effetto al passaggio del mouse è gestito tramite CSS.

Un'altra cosa che mi piace è l'evento click legato all'intera colonna della tabella. In questo modo, se un visitatore fa clic in un punto qualsiasi della colonna, lo porterà direttamente alla pagina di registrazione pertinente.

Vedi la tabella Pen Pricing di Nidheesh Balachandran

6. Tabelle dei prezzi Bootstrap di Sahar Ali Raza

Sono un grande fan di Bootstrap poiché c'è così tanto che puoi fare con il framework e i suoi temi correlati. Uno di questi esempi è questo esempio di tabella dei prezzi.

Gran parte di questo design è codificato in modo personalizzato, inclusi gli sfondi dell'intestazione inclinata e le animazioni al passaggio del mouse. Ma il layout generale si basa su Bootstrap, che lo rende completamente reattivo per impostazione predefinita. La tipografia è sbalorditiva e adoro anche le animazioni al passaggio del mouse mentre mi sposto su ogni riga. Questo è un design da tavolo pulito che potrebbe funzionare per quasi tutti i tipi di siti Web.

Vedi la tabella dei prezzi di Pen Bootstrap di Sahar Ali Raza

7. Tabella dei prezzi del design dei materiali di Morten Srensen

Se ti piace il design dei materiali di Google, ti piacerà sicuramente questa tabella dei prezzi. È una tabella dell'interfaccia utente materiale che segue molte delle funzionalità suggerite da Google come l'ombra esterna al passaggio del mouse e le combinazioni di colori piatte.

Vedi la penna
Tabelle dei prezzi di design dei materiali (flexbox) di Morten Srensen.

8. Tabella dei prezzi pulita e semplice di Daniel Hearn

Super pulito e leggero descrive al meglio questa tabella dei prezzi bianca. Non si basa su molti colori o caratteristiche fantasiose per distinguersi. Invece, usa il grigio per le intestazioni e il nero/bianco per il contrasto del testo. In realtà funziona bene poiché i pulsanti CTA mantengono un forte effetto di contorno verde.

Quando riduci il colore in una tabella, attiri l'attenzione sulle uniche aree con colore e questo di solito incoraggia più clic. Poiché si tratta di puro CSS, sarà facile aggiornare il colore del pulsante per adattarlo al tuo design.

Vedi la tabella dei prezzi delle penne -1 di Daniel Hearn

9. Tabelle WIP di Dylan Mcleod

Per un lavoro in corso, devo dire che questo colorato set di tabelle dei prezzi sembra incredibile. Segue molte tecniche tradizionali come evidenziare le intestazioni delle tabelle e mantenere una colonna più grande delle altre.

Ma sono molto impressionato dalle diverse scelte di colore che si fondono così bene insieme. È quasi come se queste tabelle avessero alcune intestazioni diverse e attirino la tua attenzione per vari motivi.

Vedi le tabelle dei prezzi delle penne di Dylan Mcleod

10. Racconto sui prezzi di Flexbox di CSSGirl

Ora, per un vero design del tavolo rivolto in avanti, dai un'occhiata a questo tavolo flexbox. Quando si passa il mouse sulla tabella, ogni colonna diventa leggermente più grande e aumenta il colore di sfondo. Questo aiuta la colonna a distinguersi dal resto e ad attirare l'attenzione più velocemente. È un bell'effetto che viene trasferito alle transizioni CSS della tabella durante il ridimensionamento del browser.

Sebbene la caratteristica più grande qui sia l'uso di flexbox per formattare le colonne della tabella. Questo esempio dimostra che flexbox è il futuro dei siti Web reattivi.

Consulta il piano tariffario Pen Flexbox di Lindsey