Blok Tasarımcısı

Blok Tasarımcısı, içerik bloğunu HTML yazmadan, öğe öğe kurmanızı sağlar: metin, görsel, bağlantı, liste, tablo, açılır soru. Çıktı, elle yazılmış bir blokla aynı güvenlik temizliğinden geçer ve aynı şekilde yerleşir.

Panelde nerede

Content Blocks → New block (ya da var olan bir blok) → Design sekmesi. Yanındaki Code sekmesi aynı bloğun HTML ve CSS çıktısını gösterir. Yeni blok Code sekmesinde açılır; Open the designer (Tasarımcıyı aç) düğmesine basınca tasarım kipine geçer.

Tasarımcının bölümleri

• Layers (Katmanlar): bloğun öğe ağacı. En üstteki Block satırının yanındaki + ile öğe eklersiniz; öğeleri yukarı aşağı taşır, başka bir kapsayıcıya aktarır, gizler (gizli öğe hiçbir şey üretmez), çoğaltır ve silersiniz. Undo ve Redo düğmeleri vardır.
• Canvas (Tuval): bloğu çizer. Öğeye tıklayınca katmanı seçilir. Tuvaldeki ürün alanları kendi adlarıyla görünür; gerçek ürün değerleriyle dolu hâli formun altındaki Live preview panelindedir.
• Sağdaki ayar paneli seçili öğenin içeriğini ve biçimini ayarlar. İçerik ayarları öğe türüne göre değişir; biçim ayarları (düzen, yazı, renk, boşluk, kenarlık, gölge) kart tasarımcısıyla aynı tablodan gelir; Desktop, Tablet ve Mobile genişlikleri için ayrı değer girebilirsiniz (yalnızca değiştirdiğiniz değer o genişlikte değişir, gerisi devralınır). Düzen ayarları yalnızca Container öğesinde sunulur.
• Ready-made blocks (Hazır bloklar): Güven şeridi, Duyuru şeridi, SSS akordeonu, Özellik tablosu, Kargo ve iade, CTA bandı, Beden tablosu, Ürün künyesi. Birini eklersiniz, sonra her şeyini değiştirebilirsiniz; eklenen şey sıradan bir öğe kümesidir.
• Saved blocks (Kayıtlı bloklar): kurduğunuz tasarımı kanalın kütüphanesine kaydeder (Save this block), başka bir bloğa kopyalar. Kopyalanır, bağlanmaz: kayıtlı bloğu sonradan düzenlemek ya da silmek onu daha önce kullandığınız bloklara dokunmaz. Kayıtlı bloklar kütüphane izinlerine bağlıdır (library:*); Marketing rolü kaydedebilir, düzenleyebilir ve kullanabilir, silme yöneticinindir.

Öğe türleri

Öğe	Ne yapar	Sınır
Container (Kapsayıcı)	Başka öğeleri tutan esnek kutu; yön, hizalama ve boşluk ayarlanır	Ağaç 6 düzey derinliğinde olabilir
Text (Metin)	Başlık (h2, h3, h4), paragraf, span ya da div. İsterseniz bir ürün alanına bağlarsınız; ön ek ve son ek verilir	Metin 2000, ön ek ve son ek 60 karakter
Image (Görsel)	Görsel adresi, alt metin, isteğe bağlı bağlantı ve alt yazı	Adres 600, alt metin 200, alt yazı 300 karakter
Link (Bağlantı)	Düğme görünümlü a. Yeni sekmede açma seçeneği	Etiket 120, adres 600 karakter
List (Liste)	Madde işaretli ya da numaralı	40 madde, madde başına 300 karakter
Table (Tablo)	Başlık satırı ve satırlar	60 satır, 10 sütun, hücre başına 300 karakter
Divider (Ayırıcı) / Spacer (Boşluk)	Yatay çizgi, sabit boşluk
Disclosure (Açılır bölüm)	JavaScript'siz açılır kapanır bölüm; içine metin, liste ya da tablo koyabilirsiniz. Open by default seçeneği vardır	Özet 200 karakter
HTML	Kaçış kapısı: kendi markup'ınız ve kendi CSS'iniz. Bir Kütüphane şablonu bu öğe olarak gelir	Markup 20.000, CSS 20.000 karakter

Bir ağaç en fazla 120 öğe taşır. Sınırlar sessizce keser: 41. liste maddesi, 11. tablo sütunu ya da 20.001. HTML karakteri kayıtta atılır; tasarımcı sınırda girişi durdurur ve doluluğu söyler.

Adres alanlarında https://, mailto: ya da tel: ile başlayan adresler ve site içi yollar kabul edilir. Kabul edilmeyen adres kayıtta düşer; tasarımcı bunu alanın altında uyarı olarak yazar. h1 seçeneği bilinçli olarak yoktur: ürün sayfasında zaten bir h1 vardır.

Ürün alanına bağlama

Text öğesinde Product field listesi, bloğun ürün yer tutucularını sunar (title, brand, formattedPrice ve diğerleri, ayrıca beslemenizin attr. alanları). Bir alan seçince metin, ürün sayfasında o ürünün değerine dönüşür. None — fixed text (Yok, sabit metin) bağlamayı kapatır. Alan sayfada boş çıkarsa satır kendini gizler; ön ek ya da son ek varsa satır alan boşken de görünür kalır, panel bunu uyarıyla söyler. Alan listesi için: Yer Tutucular.

Ürün sayfamda kur

Tasarım kipinde Build it on a product page (Ürün sayfamda kur) düğmesi mağazanızı yeni sekmede açar ve mağaza editöründe bloğu doğrudan gerçek bir ürün sayfasında kurmanızı sağlar. Editörün Add (Ekle) sekmesinde temel öğelerin altında Library (Kütüphane) ve Ready-made templates (Hazır şablonlar) listeleri bulunur; bir şablonu sayfaya sürükleyebilir ya da tıklayıp seçili öğenin altına ekleyebilirsiniz. Bir Kütüphane şablonu tek bir HTML öğesi olarak, kendi CSS'iyle gelir.

Editörden döndüğünüzde ağaç tasarımcıya yazılır, seçtiğiniz yer ve ürün kodu tutulur. Bloğu kaydedince panel sizi kural ekranına taşır ve yeri, konumu ve ürün kodunu hazır doldurur (bkz. Kural Oluşturma). Editör hiçbir şeyi kendi başına kaydetmez.

Düğmenin altında "bu kanalda örnek ürün sayfası yok" uyarısı çıkarsa editör ana sayfada açılır ve ürün alanları boş görünür. Kanallar → Kanal Özeti → Sayfa bağlantıları altında bir ürün sayfası adresi tanımlayın. Aynı akışın genel anlatımı: Görsel Yerleştirme.

Editör sekmenin kapalı olduğu panel sekmesinden Kütüphane'yi okuyamaz; liste yalnızca editörü açtığınız panel sekmesi açıkken dolar. Bkz. Kütüphane.

Tasarımcı hata verirse

Gördüğünüz	Sebep
The block is empty: add at least one element	Ağaç boş; en az bir öğe ekleyin
That layout could not be applied: it is not a valid block structure	Seçtiğiniz kayıtlı blok ya da editör çıktısı okunamadı
Bir adres alanında "kayıtta düşer" uyarısı	Adres https://, mailto:, tel: ya da site içi yol değil
Product fields the editor shows by their names	Ürün değerleri alınamadı; sayfada yer tutucular kendi adlarıyla görünür