Duyuru Mesajı CSS Şablonları

Yaratıcı Duyuru Mesajı CSS Şablonları

Hizmet güncellemeleri, promosyonlar veya acil durum uyarıları yayınlayan ekipler, kullanıcıların aradığı içeriği engellemeden anında fark edilen bildirimlere ihtiyaç duyar. Duyuru mesajı CSS şablonları, ayarlanabilir renkler, kenarlıklar ve boşluklarla bu bildirimlere hazır bir tasarım başlangıcı sunar.

Farklı Duyuru Durumları İçin Özelleştirilebilir Stillendirme

Aynı duyuru çubuğu pazartesi günü bir bahar indirimini, cuma günü ise bir kesinti bildirimini duyurabilir; bu nedenle stil amaca göre değişir:

• Bir kampanya çubuğu, ilk bakışta buton olduğu anlaşılan ve belirgin bir hover durumuna sahip bir CTA gerektirir;
• Bir bakım bildirimi, yüksek metin kontrastına, renkli bir kenarlık vurgusuna ve kompakt dikey dolguya (padding) dayanır;
• Bir hizmet uyarısı ince bir şerit olarak sabit kalır; rengi bilgilendirmeden uyarıya, oradan da kritik düzeye kademeli olarak yükselir;
• Kapatılabilir bir çubuk, belirgin hover ve focus durumlarına sahip bir kapatma düğmesine ve simgeden daha geniş bir tıklama alanına ihtiyaç duyar.

Nicepage bunların çoğunu görsel kontrollerle çözer; özel CSS ise kritik uyarılar için ayrılan kırmızı rozet gibi detaylara bırakılır. Bu kırmızıyı gerçek acil durumlar için saklayın; zira bir flaş indirim bu rengi kullanırsa, gerçek bir kesinti anında dikkat çekecek daha güçlü bir vurgu kalmaz.

Görsel Karmaşa Yaratmayan Duyarlı Vurgu

Masaüstünde tek bir satıra sığan duyuru metni, telefonda genellikle butonların ve simgelerin etrafında düzensiz şekilde bölünür. Başlığın okunabilir, CTA'in görünür kalması ve durum satırının uygunsuz bir yerden bölünmemesi gerekir.

Genel çözüm, bir kırılma noktasının (breakpoint) altında satırdan sütuna geçen bir flexbox yapısıdır; böylece CTA metnin altına iner ve yatay dolgu küçülür. Kapatma simgesi mutlak konumlandırılmışsa (absolute), uzun bir teklif metninin simgenin altına girmesini önlemek için metnin simge genişliği kadar sağ dolguya ihtiyacı vardır. CTA üzerindeki bir max-width değeri, uzun bir düğmenin masaüstünde metni sıkıştırmasını engeller.

CSS'i Mesaj Arayüzüne Odaklama

Duyuru çubuklarında yerleşim, renkten daha fazla soruna yol açar. Sabitlenmiş (fixed) bir çubuk normal sayfa akışını bozar ve kendisine yer ayrılmadığı sürece header alanının üstünü kapatır. Yapışkan (sticky) bir çubuk kendi alanını korur ancak üst kenar için yapışkan bir header ile yarışır; bu durumda hangisinin üstte kalacağını z-index belirler.

Nicepage, tek bir sayfanın ihtiyaç duyduğu CSS kurallarını içeren ayrı bir stil dosyası oluşturan Sayfa Başına Minimum CSS Dışa Aktar seçeneğini sunar. Kampanya çubuğu bulunmayan sayfalar böylece bu çubuğa ait hiçbir kuralı taşımaz.

Şablonları karşılaştırırken en acil durumun kontrastını ve çubuğun telefondaki yüksekliğini kontrol edin. Ardından CTA'in öne çıkıp çıkmadığına ve çubuğun sabit kalıp kalmadığına bakın. Renkler değiştirilmesi en kolay kısımdır, bu nedenle şablon seçiminde en zayıf gerekçedir.