Modüler Bloklar — Sayfaları Lego Gibi İnşa Edin
Loomix ana sayfası tamamen Strapi 5 Dinamik Alanları (Dynamic Zones) üzerine kuruludur; bu sayede yöneticiler kod yazmadan bölümleri taşıyabilir veya yenilerini ekleyebilir.
Modüler Blok Nedir?
Belirli bir veri yapısına sahip, bağımsız UI bileşenleridir. Herhangi bir sayfada özgürce sıralanabilir ve tekrar kullanılabilir.
- Strapi panelinde Content Manager → Homepage yolunu izleyin.
- Sayfanın en altındaki dinamik alan olan Sections bölümüne kaydırın.
- Yeni bir blok eklemek için Add a component butonuna tıklayın.
- Listeden bir blok türü seçin ve içeriğini doldurun.
- Değişiklikleri canlı sitede yayınlamak için önce Save sonra Publish butonuna tıklayın.
Strapi'den Ön Yüze Blok Yaşam Döngüsü
Strapi Üzerinden Yeni Stiller Seçmek
Herhangi bir blok için görsel stilleri değiştirmek için Strapi Admin'de Storefront Management menüsünü kullanın.
- 1. 1. Yönetici Strapi'de yeni bir blok (örn. Öne Çıkan Ürünler) ekler.
- 2. 2. Strapi, Next.js'e anlık yeniden doğrulama (Revalidation) webhook'u gönderir.
- 3. 3. Next.js 16 BlockRenderer yeni bileşeni ziyaretçilere anında render eder.
Varsayılan Blok Kataloğu
Tüm hazır blokları stil seçenekleri ve görsel önizlemeleriyle inceleyin.
Ana Karşılama Ekranı (Hero Banner)
Mağazanın ilk izlenimi; etkileyici başlıklar, yüksek çözünürlüklü görseller ve hızlı satın alma butonları.
- Ana başlığı ve promosyon sloganını belirleyin.
- Birincil ve ikincil buton bağlantılarını ayarlayın.
Ürün Tanıtım Vitrini (Product Showcase)
Belirli bir ürünü teknik özellikleri ve görsel detaylarıyla öne çıkarmak için etkileşimli vitrin.
- Görsel stili (kaydırıcı, ızgara veya 3D kart) seçin.
- Medusa ürün kimliğini belirtin.
Yöneticiler İçin İpucu:
Görsel Stil (Style):
Yatay Kayan Ürünler (Scroll Products)
Fırsat ürünleri veya yeni gelenler için pürüzsüz yatay kaydırma çubuğu.
- Kaydırma hızını ve yönünü belirleyin.
- Listelenecek ürün kategorisini seçin.
Görsel Stil (Style):
Avantajlar ve Özellikler (Features)
'Ücretsiz Kargo', 'Güvenli Ödeme' gibi mağaza ayrıcalıklarını modern ikonlarla vurgulayın.
- 3 farklı görsel tasarım stilinden birini seçin.
- Her avantaj için başlık, açıklama ve ikon belirleyin.
- Markanıza uygun arka plan ve kenarlık stillerini uygulayın.
Görsel Stil (Style):
Kategori Gezinme Izgarası (Categories Grid)
Mağaza kategorilerini modern kartlar veya dairesel görsellerle sergileyin.
- Ana sayfada öne çıkarılacak kategorileri belirleyin.
Görsel Stil (Style):
Son Blog Yazıları (Recent Blog Posts)
Ziyaretçi etkileşimini ve SEO görünürlüğünü artırmak için en yeni makaleleri listeleyin.
- Görüntülenecek makale sayısını (3 veya 4) seçin.
Görsel Stil (Style):
Sonraki Adım: Genel Ayarlar
Mağaza renk paletini, logosunu ve marka kimliğini Strapi'den nasıl yöneteceğinizi öğrenin.