Ana içeriğe geç

Sabit Sayfa Blok Yönetimi

Sistem üzerindeki belirli alanlar (Slogan, Footer üstü, Ürün sekmeleri), esnek bir yapı sunmak amacıyla HTML ve Tailwind CSS destekli "Blok" yapısıyla yönetilir.

Blok Yönetim Alanları
  1. Üst Başlık (Slogan) Alanı
  2. Anasayfa Alt Alan (Footer Üstü)
  3. Ürün Detay Alanları

1. Üst Başlık (Slogan) Alanı​

Web sitenizin en üstünde (Header'ın üzerinde) yer alan duyuru ve slogan alanıdır.

  • Kullanım Amacı: "Ücretsiz Kargo", "Güvenli Alışveriş" veya güncel kampanya sloganlarını yayınlamak için kullanılır.
  • Teknik Yapı: Bu alan HTML ve Tailwind CSS sınıflarını destekler. Arka plan rengi, yazı boyutu ve ikonlar tamamen özelleştirilebilir.
  • Konum: Tüm sayfalarda en üstte sabit olarak görüntülenir. Üst Başlık Slogan

Bloklar liste bölümünde yer alan Üst Başlık (Slogan) sayfasının kalem ikonu alt text basılarak banner tasarım ile düzenleme işlemlerini yapabilirisiniz. Bu modda aşağıda listelenen işlemleri yapabilirsiniz.

  • Aktif/Pasif:
  • Html Düzenleme: alt text Bu kaynak kodu düzenleme ikonuna basarak dilediğiniz tasarımda şablon ekleyebilirsiniz.

Örnek-Üst Başlık Slogan​

HTML Kodunu Göster
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Kayan Üst Banner</title><link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"><!-- Banner Başlangıcı --><div style="background-color: #51d0fe; color: #fff; font-size: 14px; height: 44px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-family: 'Inter', sans-serif;">
    <marquee behavior="scroll" direction="left">
      <span style="margin: 0 40px; display: inline-block;"><a href="/iade" style="color: white; text-decoration: none;">GÜVENLİ ALIŞVERİŞ</a></span>
      <span style="margin: 0 40px; display: inline-block;"><a href="/kargo" style="color: white; text-decoration: none;">KREDİ KARTLARINA TAKSİT İMKANI</a></span>
      <span style="margin: 0 40px; display: inline-block;"><a href="/iade" style="color: white; text-decoration: none;">HIZLI KARGO KOLAY SİPARİŞ</a></span>
      <span style="margin: 0 40px; display: inline-block;"><a href="/kargo" style="color: white; text-decoration: none;">2.000 TL ÜZERİ KARGO ÜCRETSİZ</a></span>
    </marquee>
  </div><!-- Banner Sonu -->

Anasayfanın en alt kısmında, Footer (Site alt menüsü) bölümünün hemen üzerinde yer alan bloktur.

  • Kullanım Amacı: Güvenli ödeme logoları (Visa/Mastercard), kargo avantajları veya marka logoları gibi görselleri sergilemek için idealdir.
  • Esneklik: Bu alanı Tailwind CSS grid yapısı kullanarak bölümlere ayırabilir, responsive (mobil uyumlu) tasarımlar ekleyebilirsiniz.

Bloklar liste bölümünde yer alan Anasayfa sayfasının kalem ikonu alt text basılarak banner tasarım ile düzenleme işlemlerini yapabilirisiniz. Bu modda aşağıda listelenen işlemleri yapabilirsiniz.

  • Aktif/Pasif:
  • Html Düzenleme: alt text Bu kaynak kodu düzenleme ikonuna basarak dilediğiniz tasarımda şablon ekleyebilirsiniz.

Üst Başlık Slogan

HTML Kodunu Göster
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; font-family: 'Inter', sans-serif;">

  <!-- Kutu 1 -->
  <div style="flex: 1 1 220px; max-width: 260px; background: #fafafa; border-radius: 12px; padding: 30px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
    <img src="https://img.icons8.com/ios/50/000000/return-purchase.png" alt="İade" style="width:50px; margin-bottom:15px;" class="e-rte-image e-imginline">
    <h3 style="font-size: 18px; font-weight: 600; color:#333; margin-bottom:10px;">Ücretsiz İade</h3>
    <hr style="border: none; border-top: 1px solid #ddd; margin: 15px 0;">
    <p style="font-size:14px; color:#666;">30 Gün İçerisinde Ücretsiz Koşulsuz İade İmkanı</p>
  </div>

  <!-- Kutu 2 -->
  <div style="flex: 1 1 220px; max-width: 260px; background: #fafafa; border-radius: 12px; padding: 30px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
    <img src="https://img.icons8.com/ios/50/000000/bank-cards.png" alt="Kapıda Ödeme" style="width:50px; margin-bottom:15px;" class="e-rte-image e-imginline">
    <h3 style="font-size: 18px; font-weight: 600; color:#333; margin-bottom:10px;">Karta Taksit</h3>
    <hr style="border: none; border-top: 1px solid #ddd; margin: 15px 0;">
    <p style="font-size:14px; color:#666;">Tüm Siparişlerinde Kredi Kartıyla Taksitli Ödeme imkani</p>
  </div>

  <!-- Kutu 3 -->
  <div style="flex: 1 1 220px; max-width: 260px; background: #fafafa; border-radius: 12px; padding: 30px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
    <img src="https://img.icons8.com/ios/50/000000/cotton.png" alt="Pamuk" style="width:50px; margin-bottom:15px;" class="e-rte-image e-imginline">
    <h3 style="font-size: 18px; font-weight: 600; color:#333; margin-bottom:10px;">Kalite ve Güvence</h3>
    <hr style="border: none; border-top: 1px solid #ddd; margin: 15px 0;">
    <p style="font-size:14px; color:#666;">Minikler için sağlıklı ve güvenilir ürünler.</p>
  </div>

  <!-- Kutu 4 -->
  <div style="flex: 1 1 220px; max-width: 260px; background: #fafafa; border-radius: 12px; padding: 30px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
    <img src="https://img.icons8.com/?size=100&id=W9c3SIE0Mcxr&format=png&color=000000" alt="Güvenli Ödeme" style="width:50px; margin-bottom:15px;" class="e-rte-image e-imginline">
    <h3 style="font-size: 18px; font-weight: 600; color:#333; margin-bottom:10px;">Güvenli Ödeme</h3>
    <hr style="border: none; border-top: 1px solid #ddd; margin: 15px 0;">
    <p style="font-size:14px; color:#666;">Tüm Alışverişlerinizde %100 Güvenli Ödeme Altyapısı</p>
  </div>
</div>
Ücretsiz İade

Ücretsiz İade

30 Gün İçerisinde Ücretsiz Koşulsuz İade İmkanı

Karta Taksit

Karta Taksit

Tüm Siparişlerinde Kredi Kartıyla Taksitli Ödeme imkani

Kalite ve Güvence

Kalite ve Güvence

Minikler için sağlıklı ve güvenilir ürünler.

Güvenli Ödeme

Güvenli Ödeme

Tüm Alışverişlerinizde %100 Güvenli Ödeme Altyapısı

3. Ürün Detay Alanları​

Ürün detay sayfasında, ürün açıklamasının yanında veya altında "Tab" (sekme) şeklinde gösterilen içerik alanlarıdır.

Tasarım İpucu

Bu alanlarda Tailwind CSS sınıflarını doğrudan kullanabilirsiniz. Örneğin: <div class="bg-blue-500 text-white p-4 rounded-lg"> Mesajınız </div> şeklinde profesyonel kutular oluşturulabilir.

Bloklar liste bölümünde yer alan Anasayfa sayfasının kalem ikonu alt text basılarak banner tasarım ile düzenleme işlemlerini yapabilirisiniz. Bu modda aşağıda listelenen işlemleri yapabilirsiniz.

  • Aktif/Pasif:
  • Html Düzenleme: alt text Bu kaynak kodu düzenleme ikonuna basarak dilediğiniz tasarımda şablon ekleyebilirsiniz

Sistem üzerinden şu üç ana başlık için içerik tanımlayabilirsiniz:

  • Ürün Detayı: Ürüne özel teknik bilgiler veya genel tanıtım metni. Ürün bilgilerinin (Beden ve Fiyat bilgilerinin alt kısmında yer alır.) Üst Başlık Slogan Üst Başlık Slogan

Ürüne özel teknik bilgiler veya genel tanıtım metni (Ürün Detay)​

HTML Kodunu Göster
<!-- Inter Font --><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"><div style="font-family: 'Inter', sans-serif;">

  <!-- Satır 1 -->
  <div style="display: flex;border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;">

    <!-- Sol Kutu -->
    <div style="display: flex; align-items: center; width: 50%; padding: 12px 16px;">
      <img src="https://img.icons8.com/?size=100&id=9341&format=png&color=000000" alt="Kargo" style="width: 24px; height: 24px; margin-right: 10px;" class="e-rte-image e-imginline">
      <div>
        <div style="font-size: 14px; font-weight: 600;">Ücretsiz Kargo Fırsatı</div>
        <div style="font-size: 12px; color: #888888;">2.000 TL üzeri Ücretsiz Teslimat</div>
      </div>
    </div>

    <!-- Sağ Kutu -->
    <div style="display: flex; align-items: center; width: 50%; padding: 12px 16px;">
      <img src="https://img.icons8.com/fluency-systems-regular/48/000000/security-checked.png" alt="Güvenli Alışveriş" style="width: 24px; height: 24px; margin-right: 10px;" class="e-rte-image e-imginline">
      <div>
        <div style="font-size: 14px; font-weight: 600;">Güvenli Alışveriş</div>
        <div style="font-size: 12px; color: #888888;">Resmi Tedarikçi Güvencesi</div>
      </div>
    </div>

  </div>

  <!-- Satır 2 -->
  <div style="display: flex; border-bottom: 1px solid #e0e0e0;">

    <!-- Sol Kutu -->
    <div style="display: flex; align-items: center; width: 50%; padding: 12px 16px;">
      <img src="https://img.icons8.com/?size=100&id=11682&format=png&color=000000" alt="İade" style="width: 24px; height: 24px; margin-right: 10px;" class="e-rte-image e-imginline">
      <div>
        <div style="font-size: 14px; font-weight: 600;">Ücretsiz İade</div>
        <div style="font-size: 12px; color: #888888;">14 Gün İçerisinde</div>
      </div>
    </div>

    <!-- Sağ Kutu -->
    <div style="display: flex; align-items: center; width: 50%; padding: 12px 16px;">
      <img src="https://img.icons8.com/?size=100&id=cQ8TWdIWNBiy&format=png&color=000000" alt="Taksit" style="width: 24px; height: 24px; margin-right: 10px;" class="e-rte-image e-imginline">
      <div>
        <div style="font-size: 14px; font-weight: 600;">Kredi Kartlarına Taksit</div>
        <div style="font-size: 12px; color: #888888;">Farklı Ödeme Seçenekleri</div>
      </div>
    </div>

  </div>

</div>
Kargo
Ücretsiz Kargo Fırsatı
2.000 TL üzeri Ücretsiz Teslimat
Güvenli Alışveriş
Güvenli Alışveriş
Resmi Tedarikçi Güvencesi
İade
Ücretsiz İade
14 Gün İçerisinde
Taksit
Kredi Kartlarına Taksit
Farklı Ödeme Seçenekleri
  • İade ve Değişim: Firmanızın iade politikası ve değişim süreçleri hakkında bilgilendirme.
  • Ödeme Seçenekleri: Taksit seçenekleri veya havale bilgilerini içeren tablo veya metin alanı.

Nasıl Düzenlenir?​

  1. E-Ticaret Ayarları > Bloklar sekmesine gidin.
  2. İlgili blok satırındaki Düzenle ikonuna tıklayın.
  3. Açılan editör alanına HTML/CSS kodlarınızı veya metninizi girin.
  4. Kaydet butonuna basarak sitenizde anlık olarak görüntüleyin.
Önemli Hatırlatma

HTML kodları yazarken etiketlerin doğru kapatıldığından emin olun. Hatalı HTML yapısı site görsel bütünlüğünü bozabilir.