Program CSS Şablonları

Yoga, pilates ve mobilite dersleri haftalık bir ızgarayı paylaştığında, eşit büyüklükteki bloklar süre ve salon gibi önemli farkları gizler. Program CSS şablonları, çizelgenin daha kolay taranmasını sağlamak için görsel hiyerarşi ve uyarlanabilir stiller kullanır.

Diğer Takvim ve Rezervasyon CSS Şablonları

Esnek Program CSS Şablonları

İki program tamamen aynı dersleri içerebilir ancak birinin boş bir saati ne kadar çabuk bulduğu konusunda büyük fark yaratabilir. Birinde başlangıç saatleri öne çıkar ve her gün net bir sütun oluştururken, diğerinde gri kutu sıraları sabah randevusunu akşamkiyle birbirine karıştırır. Hazır bir program CSS şablonu genellikle tek bir stil kümesini paylaşan zaman ızgaralarını, takvim hücrelerini ve etkinlik bloklarını içerir. Böylece ders programı gün bazında kolayca taranır ve rezervasyon aralıkları belirgin kalır.

Yoğun Haftalara Uygun Görsel Formatlar

Hazır program tasarımları genelde birkaç görsel düzeni takip eder:

  1. Daha uzun bir seansın daha fazla yer kaplayabildiği, gün sütunları ve saat satırlarından oluşan zaman ızgaraları.
  2. Süreyi her birinin içine yazan eşit boyutlu etkinlik kartları.
  3. Boş ve dolu saatleri karşılaştırmayı kolaylaştıran randevu aralığı şeritleri.

Günlük etkinlik sayısı, her türlü renk seçiminden daha önemlidir. Beş etkinlikle ferah görünen bir düzen yirmi etkinlikle bir metin duvarına dönüşebilir; bu yüzden her adayı en yoğun gününüzle deneyin. Uzun başlıklar da yerleşim üzerinde baskı yaratır; çünkü hem "Yoga" hem de "Başlangıç Düzeyi Reformer Pilates Atölyesi" aynı ızgarada okunabilir kalmalıdır. Satırların nasıl kaydığına ve komşu bloklar arasındaki boşluğun her bloğun hangi saate ait olduğunu hâlâ gösterip göstermediğine dikkat edin. CSS Grid genellikle günleri ve saatleri yönetirken, Flexbox her kartın içindeki ayrıntıları düzenler.

Tasarımı Nicepage İçinde İnce Ayarlama

Seçilen bir şablonu Nicepage içinde uyarlamak genellikle şu sırayla gerçekleşir:

  1. Renkler, yazı tipleri ve öğe boyutları için görsel kontrollerle başlayın.
  2. Düzeni tabletler ve telefonlar için yeniden yapılandırmak üzere duyarlı modları kullanın.
  3. Yerleşik ayarlar yetersiz kaldığında bir öğeye, bir sayfaya veya tüm siteye Özel CSS ekleyin.
  4. Düzenleyici özel kodları çalıştırmadığı için bu kuralları çalışırken görmek üzere önizlemeyi açın.

Çoğu program tasarımı zayıf yönlerini telefonlarda gösterir. Beş veya yedi günlük sütunlar dar ekranlarda nadiren iyi görünür. Günleri alt alta dizebilen veya her bloğa etiketler ekleyerek kaydırılabilir tek bir güne geçebilen bir tasarım tercih edin.

Durum İşaretleri ve Son Karşılaştırma

İptal edilen bir seans, değişen bir saat ve uygun olmayan bir zaman dilimi, renk körlüğü olan ziyaretçilere yardımcı olmak için rengin yanında bir metin etiketine sahip olmalıdır. "Açık" olarak işaretlenmiş yeşil bir alan yalnızca görsel bir ipucudur; gerçek rezervasyon için ayrı bir sistem gerekir.

Birkaç şablonu kısa listeye aldığınızda, her birine aynı yoğun haftayı yükleyin. Saatlerin ne kadar okunabilir olduğunu ve farklı uzunluklardaki etkinliklerin ızgarayı nasıl paylaştığını karşılaştırın; ardından son kararı telefon önizlemesine bırakın.