Harika fiyatlandırma planları CSS Şablonu

“Planlar ve Fiyatlandırma”, eşit genişlikteki üç fiyat sütunu etrafında oluşturulmuş bir karşılaştırma bölümü sunar. Her sütunda renkli bir üst kısım, beyaz bir özellik paneli, aylık plan fiyatı, bir özellik listesi ve bir “planı seçin” butonu bulunur. Sunulan seçenekler aylık 29 ABD doları ile Hatchling, aylık 69 ABD doları ile baby ve aylık 99 ABD doları ile Premium planlarıdır. Koyu gri arka plan, beyaz tipografi, kompakt dikdörtgen paneller ile kontrast oluşturan mor, yeşil ve turuncu degrade uygulamaları bölüme net bir görsel yapı kazandırır. Ortalanmış başlık ve destekleyici paragraf, ziyaretçiler plan seçeneklerine ulaşmadan önce karşılaştırmayı kurar.

Degrade Üst Kısımlar Üç Fiyat Seçeneğini Birbirinden Ayırıyor

Eşit genişlikteki üç sütun; Hatchling, baby ve Premium planlarını karşılaştırmak için tutarlı bir görsel ızgara oluşturur. Renkli üst kısımlar bölümün tepesindeki seçenekleri ayırt ederken, beyaz paneller sunucu alanı, proje kullanıcıları, destek, e-posta entegrasyonu ve indirmeler gibi dâhil olan maddeler için daha dingin bir okuma alanı sağlar. Bu kontrast, bölümün karşılaştırma işlevini değiştirmeden fiyatlandırma bilgilerine dengeli bir görsel hiyerarşi kazandırır.

Koyu gri arka plan sütunları çerçeveler ve beyaz tipografi ile plan panellerini öne çıkarır. Mor, yeşil ve turuncu degrade uygulamaları her plana ayrı bir görsel kimlik kazandırırken, turuncu “planı seçin” butonları özellik listelerinin altında eylem çağrısını yineler. Ortalanmış “Planlar ve Fiyatlandırma” başlığı ve destekleyici paragraf sütunlardan görsel olarak ayrı kalarak girişin plan detaylarıyla rekabet etmesini önler.

Bir CSS şablonu uygulaması için odaklanılması gereken nokta; bu blok içerisindeki renk, kontrast, boşluklandırma, panel formu ve eylem vurgusu arasındaki ilişkidir. Bu stil kararları, üç planlı karşılaştırmayı ve iç içerik gruplarını koruyarak mevcut bir görsel sisteme uyum sağlayacak şekilde geliştirilebilir.

Nicepage ile özelleştirin

CSS Şablon Oluşturucu kullanırken renkleri, yazı tiplerini, başlık ve fooer'ı, düzeni, sütunları ve diğer tasarım öğelerinin yanı sıra içerik ve resimleri de ayarlayabilirsiniz.

İndir

Şablonu Çevrimdışı Düzenleyin

1. Windows ve Mac için Nicepage uygulamasını indirin ve yükleyin. Veya indirme sayfası adresinden WordPress ve Joomla eklentilerini yükleyin.
2. Yeni bir sayfa oluşturun veya mevcut olanı seçin
3. Yeni blok ekle'yi tıklayın, kimliği arayın 460598 ve enter tuşuna basın

Şablonu Çevrimiçi Düzenleyin

Bu şablonu Çevrimiçi Oluşturucu barındırıcımızda başlatın

Harika Web Siteleri Oluşturun

WordPress

Windows App

Joomla

Mac OS App

HTML5

Online

Ücretsiz Nicepage Builder

15.000'den fazla Şablon

Kolay Sürükle-Bırak

Kodlama Yok

Mobil Uyumlu

Anahtar kelimeler

Bu Şablonu CSS ile Özelleştirin

Sayfaya Özgü Stil Kontrolü

Bu hazır şablonun görsel görünümünü doğrudan Nicepage düzenleyicisinde özelleştirin. Sayfa düzenini CSS yazmadan kolayca yönetilebilir tutarken, tipografi, boşluk, arka planlar, kenarlıklar, renkler, konumlandırma ve diğer stil özelliklerini görsel kontroller kullanarak ayarlayın.

Gerektiğinde Özel CSS Ekleyin

Standart düzenleyici seçeneklerinin ötesine geçen stil gereksinimleri için, hedefli kurallar eklemek üzere Özel CSS kullanın. CSS, özelleştirmenin kapsamına bağlı olarak tek tek öğelere, belirli sayfalara veya tüm web sitesine uygulanabilirken, CSS sınıfları özel kuralları seçilen öğelerle bağlamak için kullanılabilir.

Sayfa Başına Minimum CSS Dışa Aktarma

CSS boyutu ve sayfa performansının önemli olduğu projeler için Nicepage, her sayfa için minimum CSS dışa aktarabilir. Tek bir büyük ortak stil dosyasına güvenmek yerine, her sayfa yalnızca o sayfaya özgü stil kurallarını içeren ayrı bir CSS dosyası kullanabilir. Nicepage belgelerine göre, bu sayfaya özgü CSS dosyaları yaklaşık on kat daha kompakt olabilir, bu da gereksiz CSS'yi azaltmaya ve sayfa yükleme performansını iyileştirmeye yardımcı olur.

Bu iş akışı, görsel stillendirmeyi isteğe bağlı özel CSS ve optimize edilmiş sayfaya özgü CSS çıktısıyla birleştirerek, bir proje gerektirdiğinde ek kontrol sağlar ve şablonu özelleştirmenin birincil yolu olarak manuel CSS düzenlemesini gerektirmez.