Duyarlı Fiyatlandırma Tabloları Oluşturmak için 10 Ücretsiz CSS Parçacığı

Fiyatlandırma sayfası, herhangi bir çevrimiçi mağaza için temel bir unsurdur. Web'in her yerinde SaaS ürünleri, hizmet şirketleri ve e-ticaret mağazaları için kullanılır.

Ve seçenekleri, özellikleri ve (doğal olarak) fiyatları karşılaştıran bir fiyatlandırma tablosu olmadan hiçbir fiyatlandırma sayfası tamamlanmış sayılmaz. Ancak sıfırdan kendi tasarımınızı yapmak bir güçlük olabilir.

Bu açık kaynak fiyatlandırma tablolarının yardımcı olabileceği yer burasıdır. Bunların hepsi tamamen duyarlıdır ve ister kendinizinkini özelleştirmek ister zamandan tasarruf etmek için mevcut kodu yeniden kullanmak isteyin, şablon olarak harika çalışırlar.

1. Simge Tablosu, Travis Williamson

Harika görseller her zaman satar. Bunlar ürün fotoğrafları veya özel çizimler olabilir, ancak görseller metinden daha hızlı dikkat çeker.

Bu simgeleştirilmiş fiyatlandırma tablosu, görsel tablo sütunlarıyla neler yapılabileceğinin mükemmel bir örneğidir. Simgeler ekleyerek, müşterilere herhangi bir şey okumadan önce her paketle ne elde ettiklerini bildirebilirsiniz. Simgeler, değişen güç ve özellikleri gösterir. En küçük plan bir kağıt uçağa sahipken, en büyük plan tam bir roket gemisi kullanıyor. Kontrast hakkında konuşun!

Kalemi Gör
Fiyatlandırma Tablosu Travis Williamson (@travisw)

2. Agustin Ortiz'in Renkleriyle Zebra Çizgileri

Bu örnek çok daha basit bir fiyatlandırma tablosuna sahiptir ve daha geleneksel tasarım kurallarını takip eder. Belirli bir fiyatlandırma biçiminin diğerlerinden öne çıkmasına yardımcı olmak için zebra şeritleme, büyük fiyatlandırma başlıkları ve çeşitli renkler kullanır.

Renkler biraz güçlü hissettirebilir, bu nedenle her düzen için mükemmel değildir. Ancak, bu fiyatlandırma tablosunun kendi sitenizde çalışmasını sağlamak için renkleri kolayca değiştirebilir ve aynı formatı koruyabilirsiniz.

Kalem Fiyat Tablosuna Bakın | Agustin Ortiz tarafından Tabla de Precios

3. Koyu Mor Masa, Mike Torosian

Daha koyu ve zengin bir masa tasarımı için bu mor fiyat tablosuna göz atın. Web'deki en profesyonel fiyatlandırma tablolarından birini oluşturmak için arka plan gradyanlarını ve kenarda gezinme efektlerini kullanır. Ayrıca tamamen duyarlıdır, bu nedenle tarayıcı küçüldükçe tablo öğeleri satırlara bölünür.

Mike Torosian'ın Kalem Fiyatlandırma Tablosuna Bakın

4. LittleSnippets tarafından Profesyonel Fiyatlandırma

B2B web siteleri genellikle yaratıcı renk şemalarından ve gereksiz simgelerden uzaklaşan daha profesyonel tasarımlar arar. Bu fiyatlandırma tasarımı, koyu ve açık tonların tipik bir renk şemasını izleyen böyle bir örnektir.

Bir fiyatlandırma sütunu, tablonun geri kalanından çıkmak için koyu mavi bir vurgu kullanır. Daha yüksek bir dönüşüm oranına yol açabileceğinden bu tekniği takip etmek standart bir uygulamadır. Bu nedenle, "profesyonel" plan, diğer sütunların üstünde görünmek için bir alt gölge kullanır. Ancak küçültülerek yeniden boyutlandırıldığında, daha kolay gezinme için bir yığın oluşumuna düşer.

LittleSnippets'ten Kalem #1214 – Fiyatlandırma tablosuna bakın

5. Hover Efektli Tablo, Nidheesh Balachandran

Bu fiyatlandırma tablosu tasarımında, karartılmış tablo başlıklarına renk katan bazı muhteşem vurgulu efektler bulacaksınız. Her biri seçtiğiniz bir arka plan görüntüsü için yer bırakır ve fareyle üzerine gelme efekti CSS aracılığıyla yönetilir.

Sevdiğim bir diğer şey ise tüm tablo sütununa bağlı olan click olayı. Bu şekilde, bir ziyaretçi sütunda herhangi bir yere tıklarsa, onları doğrudan ilgili kayıt sayfasına götürür.

Nidheesh Balachandran'ın Kalem Fiyatlandırma tablosuna bakın

6. Önyükleme Fiyatlandırma Tabloları, Sahar Ali Raza

Çerçeve ve ilgili temalarla yapabileceğiniz çok şey olduğu için Bootstrap'ın büyük bir hayranıyım. Böyle bir örnek, bu fiyatlandırma tablosu örneğidir.

Bu tasarımın çoğu, eğimli başlık arka planları ve vurgulu animasyonlar dahil olmak üzere özel kodlanmıştır. Ancak genel düzen, varsayılan olarak tamamen duyarlı olmasını sağlayan Bootstrap'a dayanır. Tipografi çarpıcı ve ayrıca her satırın üzerinde hareket ederken fareyle üzerine gelme animasyonlarını da seviyorum. Bu, hemen hemen her tür web sitesi için çalışabilecek temiz bir tablo tasarımıdır.

Sahar Ali Raza'nın Kalem Bootstrap Fiyatlandırma Tablosuna Bakın

7. Malzeme Tasarımı Fiyatlandırma Tablosu, Morten Srensen

Google'ın malzeme tasarımını beğendiyseniz, bu fiyatlandırma tablosunu kesinlikle beğeneceksiniz. Bu, Google'ın alt gölge vurgusu ve düz renk şemaları gibi önerdiği birçok özelliği izleyen bir malzeme kullanıcı arayüzü tablosudur.

Kalemi Gör
Morten Srensen tarafından hazırlanan Malzeme Tasarımı Fiyatlandırma Tabloları (flexbox).

8. Daniel Hearn'den Temiz ve Basit Fiyatlandırma Tablosu

Süper temiz ve hafif, bu beyaz fiyat tablosunu en iyi şekilde tanımlar. Öne çıkmak için pek çok renge veya süslü özelliklere dayanmaz. Bunun yerine, başlıklar için gri ve metin kontrastı için siyah/beyaz kullanır. CTA düğmeleri güçlü bir yeşil anahat efekti koruduğu için bu aslında iyi çalışıyor.

Bir tabloda rengi azalttığınızda, yalnızca renkli alanlara dikkat çekersiniz ve bu genellikle daha fazla tıklamayı teşvik eder. Bu saf CSS olduğundan, düğme rengini tasarımınıza uyacak şekilde kolayca güncelleyebilirsiniz.

Daniel Hearn'ün Kalem Fiyatlandırma Tablosu -1'e bakın

9. Dylan Mcleod tarafından hazırlanan Devam Eden Çalışma Tabloları

Devam eden bir çalışma için bu renkli fiyat tablosu setinin inanılmaz göründüğünü söylemeliyim. Tablo başlıklarını vurgulamak ve bir sütunu diğerlerinden daha büyük tutmak gibi birçok geleneksel tekniği takip eder.

Ama en çok birbirine çok iyi uyum sağlayan farklı renk seçeneklerinden etkilendim. Sanki bu tabloların birkaç farklı başlığı var ve hepsi çeşitli nedenlerle dikkatinizi çekiyor.

Dylan Mcleod'un Kalem Fiyatlandırma Tablolarına Bakın

10. CSSGirl'den Flexbox Fiyatlandırma Hikayesi

Şimdi, ileriye dönük gerçek bir masa tasarımı için bu esnek kutu tablosuna göz atın. Fareyi tablonun üzerine getirdiğinizde, her sütun biraz daha büyür ve arka plan rengini artırır. Bu, sütunun diğerlerinden öne çıkmasına ve daha hızlı dikkat çekmesine yardımcı olur. Tarayıcıyı yeniden boyutlandırırken tablonun CSS geçişlerine aktaran güzel bir efekt.

Buradaki en büyük özellik, tablo sütunlarını biçimlendirmek için flexbox kullanılmasıdır. Bu örnek, flexbox'ın duyarlı web sitelerinin geleceği olduğunu kanıtlıyor.

Lindsey'in Kalem Flexbox Fiyatlandırma Planına bakın