Bileşen Kataloğu (Tüm Bileşenler)

Sayfanıza ekleyebileceğiniz tüm hazır bileşenlerin tek tek tanıtımı. Hangi işe hangi yapı taşının uygun olduğunu burada bulursunuz.

Nerede bulunur: Sol paneldeki Bileşenler kütüphanesi (kategorilere ayrılmış) Kimler için: "Hangi bileşen ne işe yarar, ne zaman hangisini kullanmalıyım?" diye merak edenler Kısaca: Sayfanıza ekleyebileceğiniz tüm hazır bileşenlerin tek tek tanıtımı. Hangi işe hangi yapı taşının uygun olduğunu burada bulursunuz.

Nasıl okunmalı?

Bileşenler kategorilere ayrılmıştır. Aşağıda her kategori bir tablo halinde verilmiştir: bileşenin adı (sol panelde göründüğü gibi) ve ne işe yaradığı.

Her bileşenin ortak ayarları (arka plan, yazı tipi, renk, boşluk, görünürlük, hizalama vb.) Özellikler Paneli (Sağ Panel) dosyasında anlatılmıştır. Burada her bileşenin kendine özgü amacına odaklanıyoruz. Bir bileşeni sayfaya ekleme yöntemi için Bileşen Kütüphanesi (Sol Panel) dosyasına bakın.

İpucu: Adında "Hero" geçen bileşenler sayfanın en üstündeki büyük tanıtım alanlarıdır — genelde her sayfada bir tane kullanılır. Diğer bileşenleri ise ihtiyaca göre istediğiniz kadar ekleyebilirsiniz.

Hero — Üst tanıtım alanları

Sayfanın en tepesindeki büyük, ilk göze çarpan bölümler. Genelde başlık, kısa açıklama ve bir-iki buton içerir.

Bileşen	Ne işe yarar?
Hero Bento	Izgara düzeninde 1–4 görsel + başlık ve buton alanı. Birden çok görseli şık bir mozaikle göstermek için.
Hero Bento Marquee	Kayan 3 sütunlu görsel yığını + başlık ve buton alanı. Hareketli, dinamik bir giriş.
Hero Centered	Ortalanmış başlık, açıklama ve buton; arka plan görseli isteğe bağlı. Sade ve etkileyici.
Hero Floating	Merkezi metin + kenarlarda yüzen görseller (6 pozisyon). Şık, oyuncul bir giriş.
Hero Showcase	Sol metin + sağda yelpaze şeklinde ürün kartları. Seçtiğiniz ürünleri vitrinde sergiler (görsel, isim, fiyat üründen otomatik gelir).
Hero Split	Sol metin + sağ görsel veya video. En klasik ve güvenli hero düzeni.
Hero Video	Tam ekran video arka plan + merkezi metin. En dikkat çekici giriş; arkada video oynar.

İpucu: Emin değilseniz Hero Split ile başlayın — hemen her sektöre uyar ve içeriği nettir.

İçerik — Bilgi bölümleri

Müşteriye bilgi veren, anlatan bölümler.

Bileşen	Ne işe yarar?
Sıkça Sorulan Sorular	Soru-cevap listesi, açılır-kapanır akordeon yapısı. Müşteri sorularını azaltır.
Özellikler	İkon + başlık + açıklama ile özellik/avantaj listesi (ızgara, zaman çizelgesi veya ikon satırı). "Neden biz?" anlatımı için ideal.
Özellikler Zigzag	Metin ve görsel/video'yu sırayla zigzag düzende gösterir. Markanızı detaylı tanıtmak için.
Metin	Zengin metin içeriği — başlık, paragraf, liste, link ve biçimlendirme. "Hakkımızda", "Kargo", "Gizlilik" gibi yazı ağırlıklı sayfalar için.
Harita	Google Maps harita gömme + iletişim bilgileri. Fiziksel mağazanız varsa adresinizi gösterir.

Promosyon — Kampanya ve duyuru

Dikkat çeken kampanya/duyuru öğeleri.

Bileşen	Ne işe yarar?
Promosyon Şeridi	Sayfa üstü duyuru şeridi — kampanya, kargo, indirim bildirimi. İsteğe bağlı rozet ve geri sayım içerir; kapatılabilir yapılabilir.
Kayan Yazı Şeridi	Otomatik kayan (sağa-sola akan) yazı ile promosyon duyurusu. Her satır ayrı bir kayan öğe olur.
Geri Sayım	Hedef tarihe geri sayım sayacı (kutucuklar, daireler, satır içi, aciliyet barı, promosyon stilleri). Kampanya bitişine vurgu yapar.

Kategori — Kategori kutucukları

Mağaza kategorilerinizi müşteriye gösterir; tıklayınca o kategoriye gider.

Bileşen	Ne işe yarar?
Kategori Kartları (İkon)	Kategorileri ikon veya baş harf ile kart formatında listeler.
Kategori Kartları (Görsel)	Kategorileri arka plan görseli/videosu ile kart formatında listeler.
Kategori Kartları (Yuvarlak)	Kategorileri yuvarlak görsel/video ile listeler.

İpucu: Güzel kategori görselleriniz varsa Görsel veya Yuvarlak kartlar daha çekici durur. Görseliniz yoksa İkon kartları temiz bir görünüm verir.

Güven — Güven rozetleri

Bileşen	Ne işe yarar?
Güven Rozetleri	İkon + başlık ile güven veren rozetler (satır, şerit, kenarlıklı veya kart düzeninde). Örn. "Güvenli Ödeme", "Hızlı Kargo", "Kolay İade".

Medya — Görsel bölümleri

Bileşen	Ne işe yarar?
Stil Galeri	Farklı stillerde medya galerisi (ızgara, 3B eğilme, hover efekti, polaroid, film şeridi, lightbox, kayan). Ürün/çalışma görsellerinizi sergiler.
Önce / Sonra	Sürüklenebilir bir çubukla iki görseli (önce/sonra) kıyaslatır. Dönüşüm/etki göstermek için (örn. tadilat, bakım, kozmetik).

Düzen — Yapı taşları

Sayfayı bölümlere ayıran ve diğer bileşenleri organize eden taşlar.

Bileşen	Ne işe yarar?
Grid Düzen	Çoklu sütun düzeni; her sütuna ayrı bileşen koyabilirsiniz. Yan yana içerik için (bkz. Özellikler Paneli (Sağ Panel) → Kapsayıcı bileşenler).
Sekme Düzeni	Sekmeli alan; her sekmeye ayrı bileşen koyabilirsiniz. İçeriği sekmelerle gruplamak için.
Carousel	Sağa-sola kayan slaytlar; her slayta ayrı bileşen koyabilirsiniz.
Stil Ayırıcı	Farklı stillerde yatay ayırıcı çizgi (düz, noktalı, yazılı, ikonlu, gradient, dalga, zigzag, kalın çubuk). Bölümleri görsel olarak ayırır.
Navbar	Mağaza üst menüsü (navigasyon çubuğu): düzen, menü öğeleri, logo, arama, sepet. Genelde Üst Yapı'da kullanılır.

İpucu: Grid, Sekme ve Carousel "kapsayıcı" bileşenlerdir — yani içlerine başka bileşenler koyarsınız. Bunlarla iki sütunlu bölümler, sekmeli içerikler ve kayan vitrinler kurabilirsiniz.

E-Ticaret — Ürün listesi

Bileşen	Ne işe yarar?
Ürün Listesi	Manuel seçtiğiniz veya otomatik (örn. en yeniler, çok satanlar) ürünleri listeler (ızgara, kayan veya carousel düzeninde). Ana sayfada öne çıkan ürünleri göstermek için.

Sayfanın en altındaki bölüm. Genelde Alt Yapı'da kullanılır ve tüm sayfalarda görünür.

Bileşen	Ne işe yarar?
Altbilgi - Ortalı	Ortalanmış footer; navigasyon linkleri ve sosyal medya ikonları.
Altbilgi - Klasik	4 sütunlu klasik footer; kategorilere ayrılmış linkler.
Altbilgi - Koyu	Koyu temalı footer; ödeme yöntemleri ve marka açıklaması.
Altbilgi - Minimal	Tek satırlık sade footer.

İpucu: Footer'da çok sayıda linkiniz olacaksa Klasik (4 sütun) en düzenlisidir. Sade bir mağaza için Minimal veya Ortalı yeterlidir.

Sık sorulan

S: Aynı bileşeni birden fazla ekleyebilir miyim? C: Evet. Örneğin sayfanın farklı yerlerine birkaç Özellikler veya Ürün Listesi ekleyebilirsiniz. (Tek istisna: Hero bölümlerini genelde sayfa başına bir tane kullanmak görsel olarak daha iyidir.)

S: Hangi bileşeni nereye koyacağıma karar veremiyorum. C: Tipik bir ana sayfa şöyle sıralanır: en üstte bir Hero, ardından Kategori Kartları, sonra Ürün Listesi, Özellikler, Güven Rozetleri ve en altta Sıkça Sorulan Sorular. Üst menü ve footer ise Üst/Alt Yapı'dan gelir.

S: "Navbar" ve "Altbilgi" bileşenlerini normal bir sayfaya da koyabilir miyim? C: Teknik olarak mümkün olsa da, bunlar Üst Yapı ve Alt Yapı'da yönetildiğinde tüm sayfalarda otomatik göründüğü için orada kullanmanız önerilir. Böylece menüyü/footer'ı tek yerden yönetirsiniz.