10 fragmente CSS gratuite pentru crearea de tabele de prețuri adaptabile

Pagina de prețuri este o bază pentru orice magazin online. Este folosit pentru produse SaaS, companii de servicii și magazine de comerț electronic de pe tot web.

Și nicio pagină de prețuri nu ar fi completă fără un tabel de prețuri care să compare opțiunile, caracteristicile și prețurile (în mod natural). Dar proiectarea proprie de la zero poate fi o bătaie de cap.

Acolo pot ajuta aceste tabele de prețuri open source. Toate acestea sunt pe deplin receptive și funcționează excelent ca șabloane, indiferent dacă doriți să vă personalizați propriul cod sau doar să reutilizați codul existent pentru a economisi timp.

1. Icon Table de Travis Williamson

Imaginile excelente se vând întotdeauna. Acestea pot fi fotografii ale produselor sau ilustrații personalizate, dar elementele vizuale atrag atenția mai repede decât textul.

Acest tabel de prețuri simbolizat este un exemplu excelent de ceea ce este posibil cu coloanele tabelului vizual. Adăugând pictograme, puteți informa clienții ce primesc cu fiecare pachet înainte de a citi ceva. Pictogramele prezintă diferite puteri și caracteristici. Cel mai mic plan are un avion de hârtie, în timp ce cel mai mare plan folosește o rachetă completă. Vorbește despre contrast!

Vezi Pen
Tabel de prețuri de Travis Williamson (@travisw)

2. Zebra Striping w/ Colors de Agustin Ortiz

Acest exemplu are un tabel de prețuri mult mai simplu și urmează reguli de proiectare mai convenționale. Folosește dungi zebra, anteturi mari de preț și diferite culori pentru a ajuta un anumit format de preț să iasă în evidență de restul.

Culorile se pot simți puțin puternice, așa că nu este perfect pentru fiecare aspect. Dar puteți schimba cu ușurință culorile și puteți păstra același format pentru ca acest tabel de prețuri să funcționeze pe propriul site.

Consultați Tabelul de prețuri pentru stilou | Tabla de Precios de Agustin Ortiz

3. Dark Purple Table de Mike Torosian

Pentru un design de masă mai întunecat și mai bogat, consultați acest tabel de prețuri violet. Folosește degrade de fundal și efecte de hover pentru a crea unul dintre cele mai profesionale tabele de prețuri de pe web. De asemenea, este complet receptiv, astfel încât elementele tabelului se împart în rânduri pe măsură ce browserul devine mai mic.

Vedeți Tabelul de prețuri pentru stilou de Mike Torosian

4. Prețuri profesionale de LittleSnippets

Site-urile web B2B caută adesea modele mai profesionale, care se îndepărtează de schemele de culori creative și pictogramele străine. Acest design de prețuri este un astfel de exemplu după o schemă de culori tipică de nuanțe închise și deschise.

O coloană de prețuri folosește o evidențiere albastru închis pentru a ieși din restul tabelului. Este o practică standard să urmați această tehnică, deoarece poate duce la o rată de conversie mai mare. De aceea, planul „profesional” folosește și o umbră pentru a apărea deasupra celorlalte coloane. Dar atunci când este redimensionat mai mic, acesta se încadrează într-o formațiune de stivă pentru o navigare mai ușoară.

Vedeți Pen #1214 – Tabelul de prețuri de la LittleSnippets

5. Tabel cu efecte Hover de Nidheesh Balachandran

În acest design al tabelului de prețuri, veți găsi câteva efecte de hover superbe care adaugă culoare antetelor întunecate ale tabelului. Fiecare lasă loc unei imagini de fundal la alegere, iar efectul de hover este gestionat prin CSS.

Un alt lucru care îmi place este evenimentul clic legat de întreaga coloană a tabelului. În acest fel, dacă un vizitator face clic oriunde pe coloană, îl va duce direct la pagina de înscriere relevantă.

Consultați tabelul de prețuri pentru stilou de Nidheesh Balachandran

6. Tabele de prețuri Bootstrap de Sahar Ali Raza

Sunt un mare fan al Bootstrap, deoarece puteți face atât de multe cu cadrul și temele asociate acestuia. Un astfel de exemplu este acest exemplu de tabel de prețuri.

O mare parte din acest design este codificat personalizat, inclusiv fundalul antet înclinat și animațiile de tip hover. Dar aspectul general se bazează pe Bootstrap, ceea ce îl face pe deplin receptiv în mod implicit. Tipografia este uimitoare și îmi plac, de asemenea, animațiile de tip hover în timp ce mă deplasez pe fiecare rând. Acesta este un design de masă curat care ar putea funcționa pentru aproape orice tip de site web.

Vedeți Tabelul de prețuri pentru Pen Bootstrap de Sahar Ali Raza

7. Material Design Tabel de prețuri de Morten Srensen

Dacă vă place designul materialelor Google, atunci cu siguranță vă va plăcea acest tabel de prețuri. Este un tabel material al interfeței de utilizare care urmează multe dintre caracteristicile sugerate de Google, cum ar fi planurile de umbră și schemele de culori plate.

Vezi Pen
Tabelele de prețuri pentru designul materialelor (flexbox) de Morten Srensen.

8. Tabel de prețuri curat și simplu de Daniel Hearn

Super curat și ușor descrie cel mai bine acest tabel alb de prețuri. Nu se bazează pe multe culori sau caracteristici fanteziste pentru a ieși în evidență. În schimb, folosește gri pentru anteturi și negru/alb pentru contrastul textului. Acest lucru funcționează bine, deoarece butoanele CTA păstrează un efect puternic de contur verde.

Când reduceți culoarea într-un tabel, atrageți atenția asupra singurelor zone cu culoare, iar acest lucru încurajează de obicei mai multe clicuri. Deoarece acesta este CSS pur, veți avea un timp ușor să actualizați culoarea butonului pentru a se potrivi designului dvs.

Consultați Tabelul de prețuri pentru stilou -1 de Daniel Hearn

9. WIP Tables de Dylan Mcleod

Pentru o lucrare în desfășurare, trebuie să spun că acest set de tabel colorat de prețuri arată incredibil. Urmează multe tehnici tradiționale, cum ar fi evidențierea antetelor tabelului și păstrarea unei coloane mai mare decât celelalte.

Dar sunt cel mai impresionat de alegerile variate de culori care se îmbină atât de bine. Este aproape ca și cum aceste tabele au câteva anteturi diferite și toate vă atrag atenția din diverse motive.

Vedeți Tabelele de prețuri ale stiloului scris de Dylan Mcleod

10. Povestea prețurilor Flexbox de CSSGirl

Acum, pentru un design real al mesei orientate spre înainte, consultați această masă flexbox. Când treceți cu mouse-ul peste tabel, fiecare coloană crește puțin mai mare și crește culoarea de fundal. Acest lucru ajută coloana să iasă în evidență de restul și să atragă atenția mai repede. Este un efect frumos care se transferă la tranzițiile CSS ale tabelului în timp ce redimensionează browserul.

Deși cea mai mare caracteristică aici este utilizarea flexbox pentru a formata coloanele tabelului. Acest exemplu demonstrează că flexbox este viitorul site-urilor responsive.

Consultați Planul de prețuri Pen Flexbox de Lindsey