Custom Widget

Kendi HTML ve CSS'inizi yazdığınız widget tipi. Hazır tiplerin hiçbiri işinizi görmüyorsa buna düşersiniz.

Panelde nerede

Widgets → New Widget → Type: Custom Widget.

Yerleşim

both — sabit konum (top / bottom) veya sayfa içinde bir seçicinin yanı.

İçerik alanları

Alan	Açıklama
Custom HTML	Widget'ın gövdesi
Custom CSS	Yalnızca bu widget'a uygulanacak stil

Marka temasını kullanın

Kendi HTML'inizde renkleri sabit yazmak yerine marka temasının değişkenlerini okuyun. Böylece marka renginizi değiştirdiğinizde bu widget da değişir:

<div class="promo">
  <h3>Yaz indirimi</h3>
  <a class="promo-cta" href="/kampanya">İncele</a>
</div>

.promo {
  background: var(--selwise-surface, #fff);
  color: var(--selwise-text, #111);
  border-radius: var(--selwise-radius, 8px);
  font-family: var(--selwise-font, inherit);
}
.promo-cta {
  background: var(--selwise-brand, #111);
  color: var(--selwise-brand-text, #fff);
}

Her değişkenin ikinci parametresi yedek değerdir: tema tanımlı değilse o kullanılır. Değişkenlerin tam listesi: Marka Teması.

CSS kapsamı

Yazdığınız CSS sayfanın tamamına uygulanır, yalnızca widget'a değil. Sitenizin stillerini bozmamak için:

• Sınıf adlarına kendinize ait bir önek verin (.promo-* gibi).
• body, a, h3 gibi element seçicilerini kapsamsız kullanmayın.

JavaScript gerekiyorsa

Custom widget içinde script çalıştırmayın. Sayfa hedefli JavaScript için ayrı bir modül vardır — bkz. Özel Scriptler. Bu ayrım bilinçlidir: script modülü sayfa hedefleme, sıralama ve hata yönetimi ile birlikte gelir.