Sayfa oluşturucu

Bloklarla ana sayfa ve özel sayfalar yapmak; 26 blok türü, stilleri ve özel HTML/CSS bloğu.

Nasıl çalışır

Admin → Görünüm → Sayfalar listesinden yeni sayfa açın (adres: küçük harf, rakam ve tire; ör. hakkimizda). Adresi home olan sayfa ana sayfanızdır. Sayfalar, site ayarlarıyla aynı site editöründe düzenlenir:

Soldan blok ekleyin, sıralayın (↑ ↓), çoğaltın, gizleyin, silin.
Ortadaki önizleme, sitenizin gerçek tasarımıyla (font, köşe, renk, tasarıma özel süslemeler) çizilir; masaüstü/tablet/telefon ve açık/koyu arasında geçiş yapabilirsiniz.
Sağda seçili bloğun alanları. Metinler seçili dil için kaydedilir; boş bırakılan dil varsayılan dile düşer. AI ile çevir boş alanları doldurur (günde 30 kez).
Taslağı kaydet yayına dokunmaz; Yayınla sayfayı canlıya alır. Sayfayı yalnızca giriş yapmış müşterilere açabilirsiniz.

Bir sayfada en fazla 40 blok olabilir. Bağlantılar /kayit gibi site içi yol ya da https:// adresi olmalıdır; görseller Medya kütüphanesinden (/media/...) veya https:// adresinden gelir.

Ayrılmış adresler sayfa adı olamaz: admin, dashboard, login, register, services, blog, api, api-docs, media, forgot-password, verify-email, updates, order, adminapi, og, rss.xml, sitemap.xml, robots.txt, manifest.webmanifest, llms.txt.

Ortak stil alanları

Aralık bloğu dışındaki her blokta:

Alan	Değerler	Etkisi
Arka plan	`none` (yok), `surface` (yüzey), `primary` (marka rengi), `gradient` (degrade)	Bölümün zemini. Marka rengi/degrade zeminde yazılar otomatik okunur renge döner.
Boşluk	`md`, `sm`, `lg`	Bölümün üst/alt boşluğu

"Harekete geçirici" (CTA) blokta arka plan yok veya yüzey seçilirse blok, sayfa zemininde marka çerçeveli bir kart olarak görünür; marka rengi veya degrade seçilirse tam genişlik renkli bant olur.

Bloklar

Editördeki Blok ekle paneli blokları kategorilere ayırır. Yeni eklenen her blok düzenlenebilir örnek içerikle gelir. Çoğu blokta bir Stil seçeneği vardır; ilk seçenek varsayılan görünümdür.

Sayfa başı

Blok	Alanlar ve stiller
Hero (`hero`)	Düzen: `centered`, `split-login` (yanında giriş kartı), `split-order` (yanında hızlı sipariş), `kpi` (sayaçlar + giriş), `type` (büyük tipografi), `image`; küçük etiket, başlık, alt başlık, iki buton, görsel, hizalama, en fazla 4 rozet
Duyuru şeridi (`banner`)	Metin, bağlantı yazısı ve adresi, ikon, renk (`brand`, `soft`, `dark`, `success`, `warning`). Sayfanın ilk bloğuysa üst menünün de üstünde görünür.
Kampanya geri sayımı (`countdown`)	Küçük etiket, başlık, metin, bitiş zamanı (`YYYY-AA-GG SS:DD`, UTC), isteğe bağlı kupon kodu, buton; stil: `card`, `band`, `minimal`. Süre bitince "Kampanya sona erdi" yazar.

İçerik

Blok	Alanlar ve stiller
Özellikler (`features`)	Başlık, alt başlık, sütun (`3`, `2`, `4`), stil (`cards`, `list`, `minimal`, `numbered`, `centered`), en fazla 12 öğe: ikon, başlık, metin
Nasıl çalışır (`steps`)	Başlık, stil (`cards`, `timeline` zaman çizelgesi, `row` yatay bağlantılı, `minimal`), en fazla 6 adım
Görsel + metin (`split`)	Küçük etiket, başlık, Markdown metin, görsel, görsel tarafı (`right`/`left`), görsel stili (`rounded`, `framed`, `plain`, `tilted`), en fazla 8 maddelik liste, buton
Metin sütunları (`columns`)	Başlık, 2–4 sütun, stil (`plain`, `cards`, `divided`), her sütunda isteğe bağlı ikon, başlık, Markdown metin
Metin (`richText`)	Markdown gövde (20.000 karakter)
SSS (`faq`)	Başlık, stil (`accordion`, `columns` iki sütun, `cards`), en fazla 30 soru-cevap

Satış

Blok	Alanlar ve stiller
Popüler hizmetler (`services`)	Başlık, alt başlık, adet (3–24), görünüm (`cards`, `table`, `compact` kompakt liste, `grouped` kategoriye göre), buton yazısı. Fiyatlar canlıdır.
Paketler (`pricing`)	Başlık, alt başlık, stil (`cards`, `outline`, `compact`), en fazla 6 paket: ad, fiyat, dönem, kısa açıklama, özellikler (her satıra bir tane), buton, öne çıkar (`yes`), rozet (ör. "En popüler")
Platformlar (`platforms`)	Başlık, alt başlık, stil (`grid`, `strip`, `floating`, `marquee` kayan, `cards` büyük kart, `pills` hap), en fazla 16 platform
Ödeme yöntemleri (`payments`)	Başlık; aktif yöntemlerden otomatik
VIP seviyeleri (`tiers`)	Başlık, alt başlık; sadakat seviyelerinden otomatik
Bayi API'si (`apiSnippet`)	Başlık, metin, buton; örnek API isteği gösterir
Harekete geçirici (`cta`)	Başlık, metin, buton, düzen (`centered`, `split` iki taraflı, `banner` şerit)

Sosyal kanıt

Blok	Alanlar ve stiller
Yorumlar (`reviews`)	Başlık, stil (`cards`, `marquee` kayan, `spotlight` öne çıkan, `minimal`), en fazla 12 yorum: ad, unvan, metin, puan
İstatistikler (`stats`)	Başlık, stil (`cards`, `inline`, `band` renkli bant, `rings` halkalar), kaynak (`live` canlı / `custom`), en fazla 6 öğe
Canlı siparişler (`ticker`)	Başlık; son siparişler kayan şerit (müşteri bilgisi yok)
Logolar / güven bandı (`logos`)	Başlık, stil (`row`, `marquee`, `grid`), gri tonlu (`yes`/`no`), en fazla 16 logo: görsel ya da ad, bağlantı
İletişim kanalları (`contact`)	Başlık, alt başlık, stil (`cards`, `list`, `buttons`), en fazla 8 kanal: tür (telegram, whatsapp, email, instagram, discord, phone, link), etiket, görünen değer, bağlantı, not. E-posta ve telefon için bağlantı otomatik oluşur.

Medya

Blok	Alanlar
Görsel (`image`)	Görsel, alternatif metin, bağlantı, genişlik (`normal`, `wide`, `full`)
Görsel galerisi (`gallery`)	Başlık, sütun (`3`, `2`, `4`), oran (`landscape`, `square`, `portrait`, `auto`), en fazla 12 görsel: görsel, açıklama, bağlantı
YouTube videosu (`video`)	Başlık, 11 karakterlik video kimliği

Gelişmiş

Blok	Alanlar
Özel blok (`custom`)	HTML (30.000 karakter), CSS (20.000 karakter), genişlik (`contained`, `full`) — ayrıntılar aşağıda
Boşluk (`spacer`)	Boyut (`md`, `sm`, `lg`)

Özel blok (HTML/CSS)

Hazır blokların karşılamadığı bir bölüm için kendi HTML ve CSS'inizi yazın.

HTML kaydedilirken güvenli hale getirilir: <script>, onclick gibi olay öznitelikleri, javascript: bağlantıları ve form öğeleri silinir. Bağlantılar, görseller (/media/... ya da https://), tablolar, <details>, <video> ve YouTube/Vimeo/Loom iframe'leri kullanılabilir. style ve class öznitelikleri serbesttir.
CSS yalnızca bu bloğa uygulanır: her seçicinin başına bloğun kapsamı eklenir. Bloğun kendisini seçmek için :scope kullanın. @media kuralları da kapsanır; @import silinir.
Tema değişkenlerini (var(--brand-solid), var(--on-surface) …) kullanırsanız blok sitenizin renklerine ve açık/koyu moda uyar.
Script çalıştırmanız gerekiyorsa Özel kod alanını kullanın (2FA ister).

<div class="promo">
  <span class="tag">Yeni</span>
  <h2>TikTok izlenmelerinde %30 indirim</h2>
  <p>Kampanya bu hafta sonuna kadar geçerli.</p>
  <a href="/services">Hizmetleri gör</a>
</div>

:scope { padding: 8px 0; }
.promo { display: grid; gap: 8px; justify-items: start; padding: 32px; border-radius: 24px;
  background: linear-gradient(135deg, var(--brand-solid), var(--brand-solid-2)); color: #fff; }
.tag { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 12px; font-weight: 700; }
.promo h2 { font-size: 28px; font-weight: 800; }
.promo a { margin-top: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; color: var(--brand-solid); font-weight: 700; }
@media (max-width: 640px) { .promo h2 { font-size: 22px; } }

Kod temasıyla ilişkisi

Bir adreste hem yayınlanmış blok sayfası hem de kod temasında aynı adlı dosya varsa blok sayfası kazanır.
Ana sayfada tersi geçerlidir: kod teması etkinse home.liquid blok ana sayfasının önüne geçer.