Ana içeriğe geç

Banner Yönetimi

Web sitenizde yüksek dönüşüm almanın yolu, etkileyici banner yönetiminden geçer. Slider kullanımına güçlü bir alternatif olan sabit banner alanları, ziyaretçiyi yormadan en önemli mesajınızı iletmenizi sağlar. SEO uyumlu görsel optimizasyonu ve doğru yerleşim teknikleri sayesinde, ana sayfanızın hemen çıkma oranlarını düşürebilirsiniz. Sitenizin profesyonel bir duruş sergilemesi ve arama motorlarında üst sıralara çıkması için banner alanlarını stratejik içeriklerle yapılandırın.

Banner Türleri ve Navigasyon
  1. Slider (Ana Görsel-Afiş)
  2. 2'li Bannerlar
  3. 3'lü Bannerlar
  4. Çoklu Bannerlar
  5. Html(Açıklama) Bazlı Bannerlar
  6. Kategori Bazlı Bannerlar
  7. Marka Slider

Web sitenizde yer alan tüm banner içeriklerin listelendiği, aktif/pasif edildiği ve düzenlendiği alandır.

  • Kullanım Amacı: Sitenizin ana sayfa tasarımı yayınlamak için kullanılır.
  • Teknik Yapı: Her banner içerisinde kendi içerisinde Web ve Mobil gösterim ayarları ve her banner için özel HTML şablon tanımlama alanları mevcuttur.
  • Konum: Tüm banner tipleri veoluşturulan bannerlar için Sıra Nosu vererek belirlediğiniz sıralama ile gösterim sağlanır.

Banner Ayarları

Banner Ekleme

Yeni bir banner tipi oluştururken sağ üstte bulunan + Yeni Ekle butonu kullanılır. Oluşan Yeni sayfa veya düzenleme yapılan sayfa içerisinde;

Banner Ayarları

  • Banner Tipi: Görselin sitedeki konumunu belirler (Örn: Ana Slider, Slider Yanı, Tekli Banner).
    • Slider (Ana Görse-Afiş)
    • 2'li Bannerlar
    • 3'lü Bannerlar
    • Çoklu Bannerlar
    • Html(Açıklama) Bazlı Bannerlar
    • Kategori Bazlı Bannerlar
    • Marka Slider

Banner Ayarları

  • Banner Başlık: Görselin yönetim panelindeki adıdır. Bazı temalarda görselin üzerinde metin olarak da görüntülenebilir.
  • Sıra: Tüm banner tipleri veoluşturulan bannerlar için Sıra Nosu vererek belirlediğiniz sıralama ile gösterim sağlanır.
  • Webde Gizle: İşaretlendiğinde, bu banner sadece mobil cihazlarda görünür, masaüstü (web) görünümünde gizlenir.
  • Mobilde Gizle: İşaretlendiğinde, bu banner sadece masaüstü cihazlarda görünür, mobil cihazlarda gizlenir.
  • Yeniden Boyutlandır: Sistemin, yüklediğiniz görseli otomatik olarak belirlenen en/boy oranlarına göre kırpmasını veya ölçeklemesini sağlar.
  • Resim Genişliği: Görselin web sitesinde kaplayacağı genişlik değeridir (Genellikle piksel - px cinsinden).
  • Resim Yüksekliği: Görselin web sitesinde kaplayacağı yükseklik değeridir (Genellikle piksel - px cinsinden).
Tasarım Önerisi

Eğer banner üzerinde okunaklı bir metin varsa, Webde Gizle ve Mobilde Gizle seçeneklerini kullanarak her cihaz tipi için ayrı boyutlarda ve optimize edilmiş farklı görseller yüklemeniz kullanıcı deneyimini (UX) artıracaktır.

Banner Ayarları

Yeni Banner Ekleme​

Yeni bir banner alanına banner eklemek için banner detayı alanınının sağ üstte bulunan + Yeni Ekle butonu kullanılır. Açılan Banner Detayı Ekle sayfasından yeni banner ekleyebilir ve sonrasında; kalem ikonu alt text basılarak içerik ve tasarım düzenleme işlemlerini yapabilirsiniz. alt textSil butonuna basarak bannerı silebilirsiniz. Bu modda aşağıda listelenen işlemleri yapabilirsiniz. Banner Ayarları

  • Resim: Banner olarak görüntülenecek görsel dosyasının seçildiği ve yüklendiği alandır.
  • Başlangıç Tarihi: Bannerın web sitesinde otomatik olarak yayına gireceği tarih ve saattir.
  • Bitiş Tarihi: Süreli kampanyalar için bannerın yayından kaldırılacağı tarih ve saattir (Süresiz ise boş bırakılabilir).
  • Başlık: Banner için tanımlayıcı isimdir; hem panelde takibi kolaylaştırır hem de SEO için "alt metin" olarak kullanılabilir.
  • Sıra: Bannerların yan yana veya alt alta dizilim sırasını belirleyen sayısal değerdir.
  • Bağlantı: Görsele tıklandığında kullanıcının yönlendirileceği URL adresidir (Kategori, Ürün veya Kampanya linki).
  • Yeni Sekmede Aç: İşaretlendiğinde, kullanıcı bannera tıkladığında mevcut sayfanız kapanmadan bağlantı yeni bir tarayıcı sekmesinde açılır.
  • Görünüm: Bannerın aktiflik durumunu kontrol eder; "Pasif" seçilirse görsel silinmeden yayından kaldırılır.
Zamanlanmış Kampanyalar

Başlangıç ve Bitiş Tarihi özellikleri sayesinde, gece yarısı başlayacak bir indirimi önceden sisteme yükleyebilir, mesai saatleri dışında manuel işlem yapmanıza gerek kalmadan bannerın otomatik yayına girmesini sağlayabilirsiniz.

Link Verme İpucu

Banner linklerini verirken, eğer site içi bir sayfaya yönlendirme yapıyorsanız tam URL (https://...) yerine sadece yol adını (Örn: /kategori/parfumler) kullanmanız site hızına ve SEO yapısına katkı sağlar.

Banner Düzenlenme

Banner liste bölümünde yer alan bannerların kalem ikonu alt text basılarak içerik ve tasarım düzenleme işlemlerini yapabilirsiniz. alt textSil butonuna basarak bannerı silebilirsiniz.Bu modda aşağıda listelenen işlemleri yapabilirsiniz.

uyarı

Sil işlemi yapmadan önce emin olmalısınız. Sil işlemi geri alınamamaktadır.

İpuçları
  • Hafif Dosyalar: Görsel boyutlarını 1 MB altında tutarak sitenizi hafifletin.İdeal olanı 200-500 KB arasıdır.
  • Performans: Hızlı açılan sayfalar için görsel optimizasyonunu önceliğiniz yapın.
  • Doğru Format: Mümkünse .jpg veya yeni nesil .webp formatlarını tercih edin; bu formatlar .png dosyalarına göre çok daha hafiftir.
  • Araç Önerisi: Tasarımınızı bitirdikten sonra TinyPNG, Optimizilla veya Squoosh (Google ürünüdür) gibi araçlarla kaliteden ödün vermeden dosya boyutunu küçültün.

1. Slider (Ana Görsel-Afiş)​

Sitenizin en üst kısmında, genellikle değişen (kayan) büyük görsellerin bulunduğu alandır.

  • Özellik: Birden fazla görsel ekleyerek bir döngü oluşturabilirsiniz.
  • Yönlendirme: Her slider görseline özel bir Bağlantı URL'si (Örn: Bir kampanya etiketi veya kategori linki) tanımlayabilirsiniz.
  • Mobil Uyumluluk: Masaüstü ve mobil için farklı görsel boyutları yükleyerek her iki cihazda da kusursuz görünüm sağlayabilirsiniz.

Banner Ayarları

2. 2'li Bannerlar​

Ana slider'ın hemen altında bulunan, genellikle daha küçük boyutlu ve sabit duran 2'li görsel alanlarıdır.

  • Kullanım Amacı: "Haftanın Ürünü", "Kargo Bedava" veya "Hızlı Teslimat" gibi spesifik mesajları vurgulamak için kullanılır.
  • Tasarım: Bu alanlar genellikle slider ile bütünleşik bir tasarım diline sahip olmalıdır.

Banner Ayarları

3. 3'lü Bannerlar​

Anasayfa içeriğinde ürün grupları arasına yerleştirilen, tam genişlikte (full-width) kullanılan görsellerdir.

  • Kullanım Amacı: Belirli bir markanın veya sezonun tanıtımını yapmak için idealdir.
  • Bağlantı: Kampanya Yönetimi bölümünde oluşturduğunuz Etiket Linklerini bu bannerlara bağlayarak müşterileri ilgili ürün grubuna yönlendirebilirsiniz.

Banner Ayarları

4. Çoklu Bannerlar​

Anasayfa içeriğinde ürün grupları arasına yerleştirilen, tam genişlikte (full-width) kullanılan görsellerdir.

  • Kullanım Amacı: Belirli bir markanın veya sezonun tanıtımını yapmak için idealdir.
  • Bağlantı: Kampanya Yönetimi bölümünde oluşturduğunuz Etiket Linklerini bu bannerlara bağlayarak müşterileri ilgili ürün grubuna yönlendirebilirsiniz.

Banner Ayarları

5. Html(Açıklama) Bazlı Bannerlar​

Bu banner tipi, görselin üzerine veya yerine tamamen özelleştirilebilir bir içerik katmanı eklemenizi sağlar. Statik görsellerin aksine, bu alanlarda yazılan metinler Google tarafından okunabilir (SEO uyumlu) ve web sitenizin hızı için daha verimlidir.

  • Canlı Metin Katmanı: Görselin üzerine "Hemen Al", "%50 İndirim" gibi metinleri resmin içine gömmeden, HTML olarak ekleyebilirsiniz. Bu sayede metinler her çözünürlükte net görünür.
  • Tailwind CSS Desteği: Bannerın arka plan rengini, yazı tipini, butonların yuvarlaklığını veya gölgelerini Tailwind sınıflarıyla (bg-red-500, text-center, rounded-full vb.) anlık olarak tasarlayabilirsiniz.
  • Dinamik Butonlar: Banner içine sadece tıklanabilir bir resim değil, üzerinde hover (üzerine gelince renk değiştirme) efekti olan gerçek HTML butonları yerleştirebilirsiniz.
  • SEO Avantajı: Resim içindeki yazıları arama motorları okuyamazken, HTML bazlı banner içindeki başlıkları (h1, h2) ve açıklamaları Google indeksleyerek sıralamanıza katkı sağlar.
  • Responsive Kontrol: HTML yapısı sayesinde, içeriğin mobilde ve masaüstünde nasıl farklılaşacağını (Örn: Mobilde yazının alt alta gelmesi) kod bazlı kontrol edebilirsiniz.
Örnek Banner Tasarımları

Aşağıda farklı kullanım senaryoları için HTML bazlı banner örnekleri bulabilirsiniz. Tüm örneklerde hem MDX/JSX hem de saf HTML kodları mevcuttur.

Örnek 1: İki Sütunlu Banner (DoubleBanner - Kategoriye Yönlendirme)​

HTML Kodunu Göster

MDX/JSX Kullanımı:

<DoubleBanner />

Saf HTML Kodu:

<div style="display: grid; grid-template-columns: 1fr; gap: 0;">
  <style>
    @media (min-width: 768px) {
      .double-banner-grid { grid-template-columns: 1fr 1fr; }
    }
    .banner-item:hover .banner-bg { transform: scale(1.05); }
  </style>
  <div class="double-banner-grid" style="display: grid; grid-template-columns: 1fr;">
    <!-- Sol Banner - Kadın -->
    <div class="banner-item" style="position: relative; height: 320px; overflow: hidden; background-size: cover; background-position: center; background-image: url('https://images.unsplash.com/photo-1509319117193-57bab727e09d?auto=format&fit=crop&w=687&q=80');">
      <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(17, 24, 39, 0.4); z-index: 10;">
        <div style="text-align: center;">
          <h2 style="font-size: 36px; font-weight: bold; color: white; margin: 0 0 8px 0;">KADIN</h2>
          <a href="#" style="display: inline-block; margin-top: 8px; border-bottom: 2px solid white; font-weight: 600; color: white; text-decoration: none;">Koleksiyonu Gör</a>
        </div>
      </div>
      <div class="banner-bg" style="position: absolute; inset: 0; background-size: cover; background-position: center; background-image: inherit; transition: transform 0.5s;"></div>
    </div>
    <!-- Sağ Banner - Erkek -->
    <div class="banner-item" style="position: relative; height: 320px; overflow: hidden; background-size: cover; background-position: center; background-image: url('https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=687&q=80');">
      <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(17, 24, 39, 0.4); z-index: 10;">
        <div style="text-align: center;">
          <h2 style="font-size: 36px; font-weight: bold; color: white; margin: 0 0 8px 0;">ERKEK</h2>
          <a href="#" style="display: inline-block; margin-top: 8px; border-bottom: 2px solid white; font-weight: 600; color: white; text-decoration: none;">Koleksiyonu Gör</a>
        </div>
      </div>
      <div class="banner-bg" style="position: absolute; inset: 0; background-size: cover; background-position: center; background-image: inherit; transition: transform 0.5s;"></div>
    </div>
  </div>
</div>

Örnek 2: Minimalist Overlay Banner (Ekran Görüntüsündeki Stil)​

HTML Kodunu Göster

Saf HTML Kodu:

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0;">
  <!-- Sol Banner - Kadın -->
  <div style="position: relative; height: 240px; overflow: hidden; background-size: cover; background-position: center; background-image: url('https://images.unsplash.com/photo-1509319117193-57bab727e09d?auto=format&fit=crop&w=687&q=80');">
    <div style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));">
      <h2 style="font-size: 48px; font-weight: 700; color: white; margin: 0; letter-spacing: 2px;">KADIN</h2>
      <p style="font-size: 14px; color: rgba(255,255,255,0.9); margin: 8px 0 0 0; font-weight: 400;">Koleksiyonu Gör</p>
    </div>
  </div>

  <!-- Sağ Banner - Erkek -->
  <div style="position: relative; height: 240px; overflow: hidden; background-size: cover; background-position: center; background-image: url('https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=687&q=80');">
    <div style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));">
      <h2 style="font-size: 48px; font-weight: 700; color: white; margin: 0; letter-spacing: 2px;">ERKEK</h2>
      <p style="font-size: 14px; color: rgba(255,255,255,0.9); margin: 8px 0 0 0; font-weight: 400;">Koleksiyonu Gör</p>
    </div>
  </div>
</div>

KADIN

Koleksiyonu Gör

ERKEK

Koleksiyonu Gör

Örnek 3: Full-Width Hero Banner (Yeni Sezon Koleksiyonu)​

HTML Kodunu Göster

Saf HTML Kodu:

<div style="position: relative; height: 60vh; background-color: #374151; background-size: cover; background-position: center; background-image: url('https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1470&q=80');">
  <!-- Okunurluk için overlay -->
  <div style="position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5);"></div>

  <!-- İçerik -->
  <div style="position: relative; z-index: 10; display: flex; height: 100%; align-items: center; justify-content: center;">
    <div style="max-width: 1200px; margin: 0 auto; padding: 0 24px; text-align: center;">
      <h1 style="font-size: 48px; font-weight: 800; color: white; margin: 0;">
        Yeni Sezon Koleksiyonu
      </h1>
      <p style="margin-top: 16px; max-width: 600px; margin-left: auto; margin-right: auto; font-size: 20px; color: #e5e7eb;">
        Tarzınızı yansıtan en trend parçalarla gardırobunuzu yenileyin.
      </p>
      <div style="margin-top: 24px;">
        <a href="#" style="background-color: white; color: #111827; font-weight: bold; padding: 14px 32px; border-radius: 8px; font-size: 16px; text-decoration: none; display: inline-block; transition: background-color 0.3s; line-height: 1.5;">
          Hemen Keşfet
        </a>
      </div>
    </div>
  </div>
</div>

Responsive (Mobil + Web) HTML Kodu:

<div style="position: relative; height: 60vh; background-color: #374151; background-size: cover; background-position: center; background-image: url('https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1470&q=80');">
  <style>
    @media (min-width: 768px) {
      .hero-title { font-size: 60px !important; }
      .hero-description { font-size: 24px !important; }
      .hero-content { text-align: left !important; justify-content: flex-start !important; padding-left: 48px !important; }
    }
  </style>
  
  <!-- Okunurluk için overlay -->
  <div style="position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5);"></div>

  <!-- İçerik -->
  <div class="hero-content" style="position: relative; z-index: 10; display: flex; height: 100%; align-items: center; justify-content: center;">
    <div style="max-width: 1200px; margin: 0 auto; padding: 0 24px; text-align: center;">
      <h1 class="hero-title" style="font-size: 36px; font-weight: 800; color: white; margin: 0;">
        Yeni Sezon Koleksiyonu
      </h1>
      <p class="hero-description" style="margin-top: 16px; max-width: 600px; margin-left: auto; margin-right: auto; font-size: 18px; color: #e5e7eb;">
        Tarzınızı yansıtan en trend parçalarla gardırobunuzu yenileyin.
      </p>
      <div style="margin-top: 24px;">
        <a href="#" style="background-color: white; color: #111827; font-weight: bold; padding: 14px 32px; border-radius: 8px; font-size: 16px; text-decoration: none; display: inline-block; transition: background-color 0.3s; line-height: 1.5;">
          Hemen Keşfet
        </a>
      </div>
    </div>
  </div>
</div>

Yeni Sezon Koleksiyonu

Tarzınızı yansıtan en trend parçalarla gardırobunuzu yenileyin.

Örnek 4: Varsayılan Banner​

HTML Kodunu Göster

MDX/JSX Kullanımı:

<Afisbanner />

Saf HTML Kodu:

<div style="max-width: 1200px; margin: 0 auto; padding: 16px; display: flex; flex-wrap: wrap; gap: 32px; font-family: sans-serif;">
  <div style="flex: 1; min-width: 300px;">
    <div style="background-color: #e5e7eb; height: 384px; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
      <span style="color: #6b7280;">Ürün Görseli</span>
    </div>
  </div>
  <div style="flex: 1; min-width: 300px; display: flex; flex-direction: column; justify-content: center;">
    <h1 style="font-size: 30px; font-weight: 700; margin: 0; color: #111827;">Modern Koltuk Takımı</h1>
    <p style="font-size: 24px; color: #dc2626; font-weight: 600; margin: 16px 0;">₺4,999.00</p>
    <p style="font-size: 16px; color: #374151; line-height: 1.5; margin-bottom: 24px;">
      Bu koltuk takımı, evinize modern bir dokunuş katacak. Yüksek kaliteli malzemeden üretilmiştir ve uzun ömürlüdür.
    </p>
    <button style="width: 100%; background-color: #16a34a; color: white; padding: 12px; border: none; border-radius: 8px; font-size: 18px; cursor: pointer;">
      Hemen Satın Al
    </button>
  </div>
</div>
Ürün Görseli

Modern Koltuk Takımı

₺4,999.00

Bu koltuk takımı, evinize modern bir dokunuş katacak. Yüksek kaliteli malzemeden üretilmiştir ve uzun ömürlüdür.

Örnek 5: İki Sütunlu Banner (DoubleBanner - Kategoriye Yönlendirme)​

HTML Kodunu Göster

MDX/JSX Kullanımı:

<Afisbanner 
  title="Özel Koleksiyon" 
  price="8,999.00"
  description="Sınırlı sayıda üretilen özel tasarım ürünler. Evinize şıklık katın."
  buttonText="Hemen Al"
  layout="reversed"
/>

Saf HTML Kodu (Ters Düzen):

<div style="max-width: 1200px; margin: 0 auto; padding: 16px; display: flex; flex-wrap: wrap; flex-direction: row-reverse; gap: 32px; font-family: sans-serif;">
  <div style="flex: 1; min-width: 300px;">
    <div style="background-color: #e5e7eb; height: 384px; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
      <span style="color: #6b7280;">Ürün Görseli</span>
    </div>
  </div>
  <div style="flex: 1; min-width: 300px; display: flex; flex-direction: column; justify-content: center;">
    <h1 style="font-size: 30px; font-weight: 700; margin: 0; color: #111827;">Özel Koleksiyon</h1>
    <p style="font-size: 24px; color: #dc2626; font-weight: 600; margin: 16px 0;">₺8,999.00</p>
    <p style="font-size: 16px; color: #374151; line-height: 1.5; margin-bottom: 24px;">
      Sınırlı sayıda üretilen özel tasarım ürünler. Evinize şıklık katın.
    </p>
    <button style="width: 100%; background-color: #16a34a; color: white; padding: 12px; border: none; border-radius: 8px; font-size: 18px; cursor: pointer;">
      Hemen Al
    </button>
  </div>
</div>
Ürün Görseli

Özel Koleksiyon

₺8,999.00

Sınırlı sayıda üretilen özel tasarım ürünler. Evinize şıklık katın.

Örnek 6: Responsive Renkli Bilgi Kutusu​

Bu örnek, ekran boyutuna göre hem arka plan rengini hem de metin hizalamasını değiştiren responsive bir tasarım gösterir.

HTML Kodunu Göster

Basit Versiyon (Inline CSS):

<div style="padding: 32px; background-color: #bfdbfe; text-align: left;">
  <p style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">
    Bu kutunun rengi ve metin hizalaması ekran boyutuna göre değişir.
  </p>
  <p style="font-size: 14px;">
    Küçük ekranda mavi, orta ekranda yeşil, büyük ekranda turuncu.
  </p>
</div>

Responsive Versiyon (Media Queries ile):

<style>
  .responsive-box {
    padding: 32px;
    background-color: #bfdbfe; /* Mavi (mobil) */
    text-align: left;
  }
  
  /* Tablet ve üzeri (768px+) */
  @media (min-width: 768px) {
    .responsive-box {
      background-color: #bbf7d0; /* Yeşil */
      text-align: center;
    }
  }
  
  /* Laptop ve üzeri (1024px+) */
  @media (min-width: 1024px) {
    .responsive-box {
      background-color: #fed7aa; /* Turuncu */
      text-align: right;
    }
  }
  
  .responsive-box .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  
  .responsive-box .subtitle {
    font-size: 14px;
  }
</style>

<div class="responsive-box">
  <p class="title">
    Bu kutunun rengi ve metin hizalaması ekran boyutuna göre değişir.
  </p>
  <p class="subtitle">
    Küçük ekranda mavi, orta ekranda yeşil, büyük ekranda turuncu.
  </p>
</div>

Canlı Önizleme:

Bu kutunun rengi ve metin hizalaması ekran boyutuna göre değişir.

Küçük ekranda mavi, orta ekranda yeşil, büyük ekranda turuncu.

Örnek 7: Animasyonlu Üst Tanıtım Barı (Top Announcement Bar)​

Site genelinde en üstte görünen, kampanya duyuruları ve hızlı linklere sahip animasyonlu bir tanıtım barıdır. Gradient arka plan, animasyon efektleri ve responsive tasarım içerir.

HTML Kodunu Göster

Basit Versiyon (Inline CSS):

<div style="background: linear-gradient(to right, #2563eb, #9333ea); color: white; padding: 8px 16px; height: 44px; display: flex; align-items: center; overflow: hidden;">
  <div style="max-width: 1280px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px;">
    
    <!-- Sol taraf -->
    <div style="display: flex; align-items: center; gap: 16px;">
      <div style="display: flex; align-items: center; gap: 8px;">
        <span style="font-weight: 600;">🔥 %50 İndirim!</span>
      </div>
      <div style="display: flex; align-items: center; gap: 8px;">
        <span>Ücretsiz Kargo</span>
      </div>
    </div>

    <!-- Orta kısım -->
    <div style="display: flex; align-items: center; gap: 4px;">
      <span>✨</span>
      <span style="font-weight: 600;">Yeni Sezon Geldi!</span>
      <span>✨</span>
    </div>

    <!-- Sağ taraf -->
    <div style="display: flex; align-items: center; gap: 16px;">
      <a href="/giris" style="color: white; text-decoration: none; font-weight: 600;">Giriş</a>
      <a href="/kayit" style="color: white; text-decoration: none; font-weight: 600;">Kayıt</a>
      <button style="background: transparent; border: none; color: white; cursor: pointer; padding: 4px;">✕</button>
    </div>
  </div>
</div>

Gelişmiş Versiyon (Animasyonlu & Responsive):

<style>
  .promo-bar {
    background: linear-gradient(to right, #2563eb, #9333ea);
    color: white;
    padding: 8px 16px;
    height: 44px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
  }
  
  /* Animasyonlu arka plan efekti */
  .promo-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 3s infinite;
  }
  
  @keyframes shimmer {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
  }
  
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  
  .promo-bar .container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    position: relative;
    z-index: 10;
  }
  
  .promo-bar .left-section,
  .promo-bar .right-section {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
  }
  
  .promo-bar .center-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }
  
  .promo-bar .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  
  .promo-bar .pulse {
    animation: pulse 2s infinite;
  }
  
  .promo-bar a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
  }
  
  .promo-bar a:hover {
    color: #fef08a;
  }
  
  .promo-bar .close-btn {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: background-color 0.3s;
    flex-shrink: 0;
  }
  
  .promo-bar .close-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .promo-bar .divider {
    width: 1px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.3);
  }
  
  /* Responsive - Tablet ve mobil */
  @media (max-width: 1023px) {
    .promo-bar .center-section {
      display: none;
    }
  }
  
  @media (max-width: 767px) {
    .promo-bar .container {
      font-size: 12px;
      gap: 4px;
    }
    
    .promo-bar .left-section,
    .promo-bar .right-section {
      gap: 8px;
    }
    
    .promo-bar .icon {
      width: 12px;
      height: 12px;
    }
    
    .promo-bar .divider {
      display: none;
    }
    
    .promo-bar .left-section > div:nth-child(2),
    .promo-bar .right-section > a:nth-child(2) {
      display: none;
    }
  }
</style>

<div class="promo-bar">
  <div class="container">
    <!-- Sol taraf - Promo mesajları -->
    <div class="left-section">
      <div style="display: flex; align-items: center; gap: 8px;">
        <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"></path>
        </svg>
        <span style="font-weight: 600; white-space: nowrap;">🔥 %50 İndirim!</span>
      </div>
      
      <div style="display: flex; align-items: center; gap: 8px;">
        <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
          <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path>
          <path d="M3 4a1 1 0 00-1 1v1a1 1 0 001 1h1l1.68 5.39A3 3 0 008.62 15h7.89a1 1 0 000-2H8.62a1 1 0 01-.95-.68L7.16 11h7.07a3 3 0 002.84-2.07L18.48 4H3z"></path>
        </svg>
        <span style="white-space: nowrap;">Ücretsiz Kargo</span>
      </div>
    </div>

    <!-- Orta kısım - Dönen mesaj -->
    <div class="center-section">
      <span class="pulse">✨</span>
      <span style="font-weight: 600; white-space: nowrap; text-align: center;">Yeni Sezon Geldi!</span>
      <span class="pulse">✨</span>
    </div>

    <!-- Sağ taraf - Kullanıcı aksiyonları -->
    <div class="right-section">
      <a href="/giris" style="display: flex; align-items: center; gap: 4px;">
        <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
        </svg>
        <span style="white-space: nowrap;">Giriş</span>
      </a>
      
      <div class="divider"></div>
      
      <a href="/kayit" style="display: flex; align-items: center; gap: 4px;">
        <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
          <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path>
        </svg>
        <span style="white-space: nowrap;">Kayıt</span>
      </a>

      <button class="close-btn" onclick="this.parentElement.parentElement.parentElement.style.display='none'">
        <svg style="width: 16px; height: 16px;" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Canlı Önizleme:

🔥 %50 İndirim!
Ücretsiz Kargo
✨Yeni Sezon Geldi!✨
Giriş
Kayıt

Örnek 8: Bilgilendirme Üst Barı (Info Top Bar)​

Güvenli alışveriş, ücretsiz kargo bilgisi ve destek linkleri içeren minimal tasarımlı üst bilgilendirme barıdır.

HTML Kodunu Göster

Basit Versiyon (Inline CSS):

<div style="background-color: #f3f4f6; color: #1f2937; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; overflow: hidden;">
  <div style="width: 100%; max-width: 1280px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between;">
    
    <!-- Sol taraf -->
    <div style="display: flex; align-items: center; gap: 12px;">
      <div style="display: flex; align-items: center; white-space: nowrap;">
        <img src="https://img.icons8.com/?size=100&id=G8cFxZVgW87R&format=png&color=000000" alt="Secure" style="height: 18px; margin-right: 6px;">
        <span>Güvenli Alışveriş</span>
      </div>
      <span style="white-space: nowrap;">
        <strong style="font-weight: 700;">750</strong> TL üzeri <span style="text-decoration: underline;">Ücretsiz</span> Kargo
      </span>
    </div>
    
    <!-- Sağ taraf -->
    <div style="display: flex; align-items: center; gap: 16px;">
      <a href="https://api.whatsapp.com/send?phone=+905312345678&text=Merhaba" target="_blank" style="display: flex; align-items: center; color: #000; text-decoration: none;">
        <img src="https://img.icons8.com/?size=100&id=16733&format=png&color=000000" alt="WhatsApp" style="height: 22px; margin-right: 6px;">
        <span>WhatsApp Destek</span>
      </a>
      <a href="/siparis-takip" style="color: #000; text-decoration: none;">Sipariş Takibi</a>
    </div>
  </div>
</div>

Responsive Versiyon:

<style>
  .info-top-bar {
    background-color: #f3f4f6;
    color: #1f2937;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  
  .info-top-bar .container {
    width: 100%;
    max-width: 1280px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .info-top-bar .left-items {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .info-top-bar .right-items {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .info-top-bar .secure-badge {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  
  .info-top-bar .secure-badge img {
    height: 18px;
    margin-right: 6px;
  }
  
  .info-top-bar .shipping-info {
    white-space: nowrap;
    font-weight: 400;
  }
  
  .info-top-bar .shipping-info strong {
    font-weight: 700;
  }
  
  .info-top-bar .shipping-info .underline-text {
    text-decoration: underline;
  }
  
  .info-top-bar a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .info-top-bar a:hover {
    color: #4b5563;
  }
  
  .info-top-bar .whatsapp-link {
    display: flex;
    align-items: center;
  }
  
  .info-top-bar .whatsapp-link img {
    height: 22px;
    margin-right: 6px;
  }
  
  /* Responsive - Mobil */
  @media (max-width: 639px) {
    .info-top-bar .shipping-info {
      display: none;
    }
    
    .info-top-bar .whatsapp-link span {
      display: none;
    }
    
    .info-top-bar .left-items,
    .info-top-bar .right-items {
      gap: 8px;
    }
  }
</style>

<div class="info-top-bar">
  <div class="container">
    <!-- Sol taraf -->
    <div class="left-items">
      <div class="secure-badge">
        <img src="https://img.icons8.com/?size=100&id=G8cFxZVgW87R&format=png&color=000000" alt="Secure Shopping">
        <span>Güvenli Alışveriş</span>
      </div>
      
      <span class="shipping-info">
        <strong>750</strong> TL üzeri <span class="underline-text">Ücretsiz</span> Kargo
      </span>
    </div>
    
    <!-- Sağ taraf -->
    <div class="right-items">
      <a href="https://api.whatsapp.com/send?phone=+905312345678&text=Merhaba" target="_blank" class="whatsapp-link">
        <img src="https://img.icons8.com/?size=100&id=16733&format=png&color=000000" alt="WhatsApp">
        <span>WhatsApp Destek</span>
      </a>
      <a href="/siparis-takip">Sipariş Takibi</a>
    </div>
  </div>
</div>

Canlı Önizleme:

Secure ShoppingGüvenli Alışveriş

750 TL üzeri Ücretsiz Kargo

WhatsAppWhatsApp DestekSipariş Takibi

6. Kategori Bazlı Bannerlar​

Sadece belirli ürün kategorileri içerisinde (Örn: Elektronik kategorisinin en üstünde) görünen özel görsellerdir.

  • Fayda: Müşteriye o kategoriye özel indirimleri veya öne çıkan markaları göstererek dönüşüm oranını artırır.

7. Marka Slider​

Marka Slider, sitenizde satışı yapılan markaların logolarını bir döngü içerisinde sergilemenizi sağlar. Bu modül sayesinde hem marka bilinirliği yaratabilir hem de kullanıcıları doğrudan ilgili markanın ürün listesine yönlendirebilirsiniz.

  • Otomatik Döngü: Yüklenen marka logoları belirli bir hızda otomatik olarak sağdan sola (veya tam tersi) kayar. Kullanıcılar manuel olarak da kaydırabilir.

  • Marka Ürün Linkleme: Slider içindeki bir marka logosuna tıklandığında, sistem kullanıcıyı otomatik olarak o markaya ait tüm ürünlerin listelendiği kategori/marka sayfasına yönlendirir.

  • Logoların Düzenlenmesi: Marka kartları içerisine eklediğiniz logolar, slider içerisinde optimize edilmiş boyutlarda yan yana dizilir.

  • Görsel Bütünlük: Tüm marka logolarının benzer boyutlarda (genellikle şeffaf PNG veya beyaz arka planlı) yüklenmesi, slider alanının profesyonel görünmesini sağlar.

Banner Ayarları

Marka Slider Detay Parametreleri​

Slider'ın çalışma şeklini şu ayarlar ile optimize edebilirsiniz:

Aktif/Pasif: Slider alanını dilediğiniz zaman tek tıkla gizleyebilir veya yayına alabilirsiniz.

Sıralama: Hangi markanın slider içerisinde ilk sırada görüneceğini belirlemek için marka ayarlarındaki "Sıra No" alanını kullanabilirsiniz.

Görünür Marka Sayısı: Ekran genişliğine göre (Web/Mobil) aynı anda kaç logonun yan yana görüneceğini tema ayarlarından yapılandırabilirsiniz.

Pazarlama İpucu Marka

Slider alanını genellikle Footer (Site Altı) hemen üzerinde veya Ana Sayfa Slider altındaki ilk blokta konumlandırmak, müşterilerde "Güçlü Markalarla Çalışıyor" algısı oluşturarak dönüşüm oranlarını (CR) artırır.