İçerik Blokları

İçerik bloğu, ürün sayfasına yerleştirilen yeniden kullanılabilir bir HTML ve CSS parçasıdır. Bir kez yazar, kurallarla istediğiniz ürünlere atarsınız.

Panelde nerede

Kişiselleştirme → Ürün Zenginleştirme (Personalization → Product Enrichment) sayfasında Content sekmesi → Content Blocks (İçerik Blokları), adres /dashboard/product-enrichment/blocks. Yeni blok için New block (Yeni blok), var olan blok için adına ya da kalem simgesine tıklayın.

Bloklar listesi

Sütunlar: Block (Blok, adı ve ayrılan yükseklik), Status (Durum), Used by (Kullanan: kaç kural bu bloğu yerleştiriyor, ya da Not used yet), Updated (Güncellenme). Arama blok adına göre yapılır; All, In use (Kullanımda) ve Unused (Kullanılmıyor) süzgeçleri kullanılmayan blokları bulmanızı sağlar.

Satır menüsü:

• Duplicate block (Bloğu kopyala): "(copy)" eklenmiş bir ad ve Draft durumuyla kopya oluşturur. Tasarımcıyla kurulmuş bloğun CSS'i yeniden üretilir; kopya özgün blokla aynı görünür.
• Delete block (Bloğu sil): bir kural hâlâ bloğu yerleştiriyorsa silinmez ve hangi kurallarda kullanıldığı söylenir. Önce o kuralları silin ya da başka bloğa geçirin.

Hesabınızın blok sayısı sınırı varsa üstte sayaç görünür; sınırda New block pasifleşir.

Blok formu

Alan	Açıklama
Block name (Blok adı)	Yalnızca sizin gördüğünüz ad; kural listelerinde bu adla görünür. En fazla 150 karakter
Status (Durum)	Draft taslak: hiçbir yerde gösterilmez. Active: yayında. Archived: arşiv, gösterilmez. Mağazaya yalnızca Active bloklar sunulur
Product tokens (Ürün alanları)	Kullanabileceğiniz yer tutucuların listesi. Bkz. Yer Tutucular
Design / Code sekmeleri	Bloğu öğe öğe tasarlarsınız ya da HTML ve CSS yazarsınız. Bkz. Blok Tasarımcısı
HTML content (HTML içeriği)	Sayfaya girecek içerik. En fazla 100.000 karakter
CSS (optional)	Yalnızca bu bloğa uygulanan stil. En fazla 50.000 karakter
Reserved height (px) (Rezerve yükseklik)	Blok gelene kadar ayrılacak alan; 0 ile 4000 arasında tam sayı. Boş bırakırsanız hiçbir alan ayrılmaz
Live preview (Canlı önizleme)	Formun altında, yazarken güncellenir. Bkz. Önizleme ve Test Modu

HTML ya da CSS sınırı aşılırsa kayıt reddedilir ve alanın altında sınır yazılır. Ürün sayfasında kurulan tasarımcı bloklarının sınırları ayrıdır (bkz. Blok Tasarımcısı).

Ayrılan yükseklik neden var

Blok, sayfa yüklendikten sonra yerleştirilir. Yükseklik ayrılmazsa blok geldiği anda altındaki içerik aşağı kayar; bu sıçrama hem rahatsız edicidir hem de Google'ın sayfa deneyimi ölçümlerine olumsuz yansır. Yaklaşık bir değer yeterlidir. Önizlemenin altındaki not ölçülen yüksekliği sizin değerinizle karşılaştırır. Replace element (Öğeyi değiştir) konumunda hiçbir alan ayrılmaz, çünkü değiştirilen öğe zaten o yeri tutuyor.

Güvenlik temizliği: ne kalır, ne silinir

Blok içeriği mağazaya girmeden önce aynı izin listesinden geçer; önizleme de aynı hattı kullanır.

Kalır	Silinir
Başlıklar, paragraf, liste, tablo, details ve summary, a, img, picture, video, audio, figure, blockquote, code ve benzeri metin etiketleri	script, iframe, object, embed, style, link, meta, base
id, class, href, src, alt, width, height, data- öznitelikleri, aria- etiketleri	style özniteliği ve onclick, onerror, onload gibi olay öznitelikleri
http, https, mailto, tel ve site içi göreli adresler	Form öğeleri (form, input, button, select, textarea), svg, javascript: adresleri

Düğme görünümü için button yerine bağlantı (a) kullanın. Açılır SSS için details ve summary kullanın; JavaScript gerekmez. Görsel düzenleme için style özniteliği yerine CSS alanını kullanın: oradaki kurallar otomatik olarak yalnızca sizin bloğunuza uygulanacak şekilde sınırlanır, sayfanın kalanını bozamaz.

Marka temasını kullanın

Renkleri sabit yazmak yerine marka değişkenlerini okuyun; marka değişince blok da değişir. Hepsinin ikinci değeri yedek değerdir (değişken tanımlı değilse o kullanılır).

<div class="garanti-kutusu">
  <h4>Garanti Bilgisi</h4>
  <p>Bu üründe ${attr.garanti_suresi} garanti sunulmaktadır.</p>
</div>

.garanti-kutusu {
  background: var(--selwise-surface-alt, #f6f6f6);
  border-radius: var(--selwise-radius, 8px);
  color: var(--selwise-text, #111);
  font-family: var(--selwise-font, inherit);
  padding: 16px;
}

Kullanılabilir değişkenler: Marka Teması.

Yapay zekâ, şablon ve kayıtlı bloklar

• Code sekmesinde HTML editörünün üstünde Generate with AI (Yapay Zeka ile Üret; kodda içerik varsa Edit with AI, Yapay Zekâ ile Düzenle) bulunur. Model bloğu ürün yer tutucularıyla yazar ve CSS'i ayrı alana koyar; JavaScript hiç üretmez. Ayrıntı: Yapay Zekâ ile Üretim.
• Templates (Şablonlar) düğmesi Kütüphane'den hazır şablon uygular. Şablon uygulamak bloğu kod destekli yapar (tasarımcı ağacı devre dışı kalır). Bkz. Kütüphane.
• Tasarımcıda kurduğunuz blokları Saved blocks (Kayıtlı bloklar) olarak saklayıp başka bloklara kopyalayabilirsiniz. Bkz. Blok Tasarımcısı.

Atama

Blok tek başına hiçbir yerde görünmez; hangi ürünlerde görüneceğini kurallar belirler. Bir blok birden fazla kurala atanabilir, bir kural da en fazla 10 bloğu yığabilir. Bkz. Kural Oluşturma.