Stil Özelleştirme

Kampanyanın görünümü üç katmanda belirlenir: marka teması tüm yüzeylerin ortak görünümünü verir, Style bölmesindeki ayarlar bu kampanyaya özel farkları tanımlar, Custom CSS son sözü söyler.

Panelde nerede

Kampanya kurucusu → Design (Tasarım) adımı → Style (Stil) bölmesi. Sağdaki önizleme her değişiklikte yenilenir. Tab Talk tipinde bu bölme yoktur: sekme şeridini tarayıcı çizer ve bir sayfa onun yazı tipine ya da rengine karışamaz.

Katman sırası

1. Marka teması        → tüm yüzeyler için ortak renk, köşe, yazı tipi
2. Style ayarları      → bu kampanyaya özel geçersiz kılma
3. Custom CSS          → son söz

Çoğu durumda 1. katman yeterlidir. Her kampanyayı ayrı ayrı renklendirmek, marka renginizi değiştirdiğinizde hepsini tek tek güncellemek anlamına gelir. Marka temasını Tasarım → Marka (Design → Brand) ekranında kurarsınız — Marka Teması.

Markayı izlemek ve ayrılmak

Renk alanları marka temasının bir rengine bağlı olarak gelir ve yanlarında from brand (markadan) rozeti durur: alan markayı izliyor demektir ve markayı değiştirdiğinizde kampanya da değişir. Alana kendi rengini seçtiğinizde bağ kopar, rozet kaybolur ve kampanya markadan bağımsız kalır. Geri bağlamak için back to brand (markaya dön) bağlantısına ya da renk seçicinin içindeki Brand palette (Marka paleti) satırına tıklayın; paletten seçilen renk de markayı izlemeye devam eder. Marka teması hiç yayınlanmamışsa palet boş görünür ve alan kendi yedek rengini kullanır.

Pratik kural: rengi yalnızca bilerek farklı olmasını istediğinizde seçin.

Stil bölümleri

Hangi bölümlerin çıktığı tipe bağlıdır; bir bölüm yoksa o tip için anlamlı değildir (duyuru çubuğunda Overlay yoktur).

Tip	Bölümler
Announcement Bar	Colors, Typography, Layout (Padding, Border Bottom), Image (ikon boyutu, köşe, aralık), Close Button
Inline Banner	Colors, Layout, Effects (Shadow, Border), Image, Content Layout
Floating Button	Colors, Size & Shape, Effects (Shadow, Pulse Animation), Tooltip
Modal	Colors, Overlay (renk, opaklık, bulanıklık), Layout (genişlik, yükseklik, hizalama), Image (bleed dahil), Typography, Effects (Animation), Close Button
Slide In	Colors, Layout (Width), Image, Effects, Position (kenar boşlukları)
Embedded Card	Colors, Layout, Effects, Image, Content Layout
Sticky Footer	Colors, Layout, Effects (Border Top), Close Button
Countdown Timer	Colors, Timer Style, Layout (Separator Style)
Newsletter	Colors (giriş kutusu renkleri dahil), Typography, Layout, Effects (Close Button dahil)
Goal Bar	Colors (bar renkleri dahil), Typography, Progress Bar, Layout, Effects, Close Button
Product View Count, Cart Count	Renkler, Düzen, Animasyon (sayaç animasyonu, ayıraç); Cart Count'ta ayrıca Aciliyet Rozeti
Custom Widget	Container (iç boşluk, arka plan) — görünümü asıl HTML ve CSS'iniz belirler

Bölüm başlıkları panelde Türkçe dilinde Colors (Renkler), Layout (Yerleşim), Typography (Tipografi), Effects (Efektler), Close Button (Kapatma Butonu), Overlay (Katman), Image (Görsel), Position (Konum), Size & Shape (Boyut ve Şekil), Tooltip (İpucu Metni) olarak görünür; iki sayaç tipinin bölümleri yalnızca Türkçe yazılmıştır.

Bir stil ayarı seçeneklerden biri olmak zorundadır (köşe yuvarlama 0px ile 16px gibi hazır değerler, gölge none ile xl arası). API'ye elle yazarken tipin tanımadığı bir stil anahtarı 400 ile reddedilir; tipin tanıdığı anahtarlar yukarıdaki bölümlerdeki alanlardır.

Close Button

Show Close Button (Kapatma Butonunu Göster) anahtarı Duyuru Çubuğu, Sabit Alt Çubuk, Modal, Bülten ve Hedef Çubuğu'nda bulunur; varsayılan açıktır. Kayarak Gelen Panel ve Geri Sayım Sayacı'nda kapatma butonu her zaman vardır. Ziyaretçinin kampanyayı kapatması yalnızca o sayfa gösterimi içindir: sonraki sayfada, sıklık sınırı izin veriyorsa kampanya yeniden görünür. İstisna Hedef Çubuğu'dur: kapatılınca oturum boyunca yeniden açılmaz. Kampanyanın butonuna tıklamak ise Duyuru Çubuğu, Modal ve Kayarak Gelen Panel'i o tarayıcıdan kalıcı olarak kaldırır — Tetikleyiciler.

Custom CSS

Her kampanyanın Code bölmesinde Custom CSS alanı vardır; kurallar, temizlenen parçalar ve kapsam için Özel Kod. Marka değişkenlerini orada da okuyabilirsiniz:

.selwise-bar-text {
  font-family: var(--selwise-font-heading, var(--selwise-font, inherit));
  color: var(--selwise-text, #111);
}

Değişkenlerin tam listesi: Marka Teması.

Mobil

Ayrı bir mobil stil seti yoktur; aynı ayarlar her ekranda geçerlidir. Yüzeyler dar ekranda kendi kurallarıyla uyum sağlar (çubuklar satıra sarar, kapatma butonuna yer ayrılır). Mobilde farklı bir görünüm gerekiyorsa Custom CSS içinde medya sorgusu kullanın:

@media (max-width: 640px) {
  .selwise-widget { padding: 12px; font-size: 14px; }
}

Önizleme

Önizleme kampanyayı gerçek çizim koduyla çizer. Sitenizin kendi CSS'i önizlemede yoktur; sitenizde farklı görünüyorsa sebebi genellikle sitenizin stillerinin kampanyaya sızmasıdır. Önizlemenin altındaki kaydırıcılar (hedef çubuğunda sepet tutarı, koşullu içerikte önizlenen durum) yalnızca önizlemeyi etkiler, kaydedilmez.