Tema Yönetimi | Gelişmiş Banner Bloğu Ekleme ve Düzenleme Rehberi

E-ticaret sitelerinde bannerlar, resimler ve fotoğraflar; ürünleri tanıtmanın, ziyaretçilerin ilgisini çekmenin ve satışları artırmanın en etkili yollarından biridir. Ana sayfa veya kategori sayfalarında öne çıkan görseller, kampanyaları ve indirimleri vurgulayarak kullanıcıları alışverişe yönlendirir.

Gelişmiş Banner modülü; masaüstü ve mobil cihazlar için optimize edilmiş, zaman ayarlı ve kullanıcı gruplarına özel dinamik görsel alanlar oluşturmanızı sağlar. Tekli, çiftli veya 12'ye kadar yan yana görsel yerleştirme gibi esnek düzenleme seçenekleri sunan banner blokları sayesinde sitenizin farklı sayfalarında etkili görseller yönetebilirsiniz.

Yeni bir blok oluşturmak ya da mevcut bir Gelişmiş Banner bloğunu düzenlemek için Online Mağaza > Blok Yönetimi sayfasını kullanabilirsiniz. Var olan bir bloğu düzenlemek için düzenleme kalemine, yeni blok eklemek için "+Yeni" butonuna tıklayın. Açılan alanda "Gelişmiş Banner" yanındaki artı simgesine tıklayarak bloğu ekleyip düzenleme kalemine tıklayarak içeriğine ulaşabilirsiniz.

1. Genel Ayarlar Paneli

Banner oluşturma ekranının sol tarafında yer alan bu alan, oluşturacağınız banner bloğunun temel altyapısını ve görünürlük kurallarını belirler.

• Blok Başlığı: Banner bloğuna yönetim panelinde kolayca bulabilmeniz için vereceğiniz isimdir (Örn: Gelişmiş Banner).
• Tema: Bannerın sitenizde hangi tema stili ve CSS kuralları ile çalışacağını belirler. Varsayılan olarak Default seçilidir.
• Şablon (Twig): Bannerın yazılımsal yerleşim şablonunu seçtiğiniz alandır. default.twig genel kullanım şablonudur. Yanındaki "Düzenle" butona tıklayarak kod yapısına müdahale edebilirsiniz.

Yetkilendirme Menüsü

Bug akordeon menü açıldığında, bannerın hangi ziyaretçi türlerine gösterileceğini seçebilirsiniz:

• Ziyaretçi Görsün: Sitenize üye girişi yapmamış anonim kullanıcılara gösterim ayarıdır.
• Üye Görsün: Sitenize kayıtlı ve giriş yapmış standart üyelere gösterim ayarıdır.
• Bayi Görsün: B2B altyapısını kullanan, sitenize tanımlı bayi gruplarına gösterim ayarıdır.

Görünüm Menüsü

Banner bloğunun hangi cihazlarda listeleneceğini cihaz bazlı (açma/kapama butonları ile) kontrol etmenizi sağlar:

• Masaüstü / Mobil / Tablet / Uygulama: Seçili cihazların ekranlarında banner bloğunun aktif ya da pasif olmasını belirleyebilirsiniz.

Dil Ayarları

Siteniz çok dilli ise banner bloğunun hangi dil seçeneklerinde aktif olacağını bu alandan filtreleyebilirsiniz.

2. Banner İçeriği ve Resim Listesi Yönetimi

Sağ üst alanda yer alan "Resim Listesi" bölümü, eklediğiniz mevcut görselleri listeler. Üst taraftaki dil açılır menüsünden (Örn: Türkçe) hangi dil için içerik girdiğinizi seçebilirsiniz.

Yeni bir görsel eklemek için turuncu renkli "+ Yeni" butonuna basmanız gerekir. Bu butona bastığınızda sağ taraftan "Yeni Görsel Ekleme Penceresi" açılır.

Yeni Görsel Ekleme Penceresi Alanları:

• Başlık & Alt Başlık: Görselin üzerinde veya altında listelenecek ana metin alanlarıdır. Sitenizin tasarımına göre başlık ve açıklama olarak web arayüzüne yansır.
• URL Tipi ve Arama: Banner tıklandığında kullanıcının yönlendirileceği adrestir. Açılır menüden Sayfa Linki, Kategori, Ürün veya Harici Link seçerek altındaki arama çubuğundan sitenizdeki ilgili sayfayı kolayca bağlayabilirsiniz.

Sütun Genişliği (COL-X) Ayarları

Görselin yan yana kaçlı bir yapıda duracağını ve ekranda kaplayacağı alanı (Bootstrap Grid sistemine uygun olarak) belirler:

• Standart Görünüm: Mobil (Telefon) ve Masaüstü (Monitör) ikonlarının yanındaki kaydırıcı çubukları (slider) sağa sola çekerek 0 ile 12 arasında bir değer verebilirsiniz (12 tam ekran genişliğidir). "Varsayılan Ayarlara Dön" butonu ile temaya ait orijinal genişliğe sıfırlayabilirsiniz.
• Gelişmiş Görünüm: Sağ alttaki "Gelişmiş" butonuna tıkladığınızda ekran boyutlarına göre hassas genişlik ayarı açılır:
  • XS: Çok küçük ekranlar (Giriş seviyesi akıllı telefonlar)
  • SM: Küçük ekranlar (Geniş ekranlı akıllı telefonlar)
  • MD: Orta ekranlar (Tabletler)
  • LG: Geniş ekranlar (Dizüstü bilgisayarlar)
  • XL: Çok geniş ekranlar (Masaüstü bilgisayarlar / Monitörler)
  • XXL: Ultra geniş ekranlar (Büyük masaüstü monitörleri)

• Örnek: Yan Yana 2 Adet Görsel Gösterme Kurgusu

  Sitenizde yan yana 2 adet banner listelemek istiyorsanız, 12'li grid sistemini 2'ye bölerek her bir görselin ekran boyut karşılıklarına 6 değerini yazmalısınız ($12 / 2 = 6$). Yan yana farklı boyutlarda görsel de ekleyebilirsiniz. Görsellerin toplam sütun genişlikleri 12 olacak şekilde ayarlayabilirsiniz.

  Bu kurgunun bilgisayarlarda yan yana, cep telefonlarında ise dikey ekrandan dolayı alt alta ve tam ekran görünmesini sağlamak için panel ayarları şu şekilde olmalıdır:

  • Masaüstü ekranlar (MD, LG, XL, XXL) için: Her iki görsele de 6 değeri verilir, böylece ekranı %50 - %50 paylaşarak yan yana dururlar.

  • Mobil ekranlar (ALL, SM) için: Her iki görsele de 12 değeri verilir, böylece mobilde küçülmek yerine alt alta tam genişlikte listelenirler.

• Büyük Ekran (Görsel Ekle): Masaüstü bilgisayarlarda görüntülenecek yüksek çözünürlüklü yatay/dikey banner görselini bu alana sürükleyip bırakarak veya tıklayarak yükleyebilirsiniz.

• Mobil/Tablet (İsteğe Bağlı) (Görsel Ekle): Mobil cihazlarda masaüstü bannerları küçüldüğünde okunaksız olabileceğinden, sadece telefon ve tablet ekranlarına özel olarak tasarlanmış dikey veya kare formattaki mobil banner görselini bu alana yüklemeniz önerilir.
• Buton Metni: Banner üzerinde bir eylem butonu (Örn: Şimdi İncele, Alışverişe Başla) yer alacaksa, butonun içinde yazacak metindir. 
• Veri 1, Veri 2, Veri 3: Tasarım şablonunuza bağlı olarak banner üzerinde kullanılmak üzere ayrılmış özel veri (kod/etiket/fiyat vb.) giriş alanlarıdır.
• İçerik (Gelişmiş Editör): Bannerın içerisine düz metin dışında HTML biçimlendirmeli yazılar, özel ikonlar veya tablolar eklemek isterseniz kullanabileceğiniz zengin metin editörüdür.
• Not: Buton ve veri alanları gibi bazı bölümler kullanılan temaya göre sitede görünme durumları değişmektedir.

Yayınlama Zaman Aralığı

Bannerın sitede kalacağı süreyi otomatik olarak yönetmenizi sağlar:

• Başlangıç Tarihi: Bannerın sitenizde yayına gireceği gün ve saat.
• Bitiş Tarihi: Bannerın yayından otomatik olarak kaldırılacağı gün ve saat (Örn: Kampanya bitiş anı).

3. Bannerı Kaydetme ve Yayınlama

Tüm alanları eksiksiz bir şekilde doldurduktan sonra, sağ üst köşede bulunan turuncu renkli "Kaydet" butonuna basarak görselinizi Resim Listesi'ne ekleyebilir ve banner modülünü siteniz üzerinde aktif hale getirebilirsiniz.

4. Resim Listesi Hızlı İşlem Butonları

Resim Listesi panelinde eklediğiniz her bir banner satırının sağ tarafında yer alan butonlar, görsellerinizi hızlıca yönetmenizi sağlar. Soldan sağa bu butonların işlevleri şu şekildedir:

• Göz İkonu (Durum - Aktif/Pasif): Görselin sitedeki görünürlüğünü kontrol eder. Üzeri çizili göz ikonu bannerın şu an pasif olduğunu gösterir. Tıklayarak görseli silmeden sitede yayına alabilir veya gizleyebilirsiniz.
• Kopyala İkonu (Çoğalt): Mevcut banner içeriğini, linkini ve ayarlarını tek tıkla kopyalayarak alt satıra yeni bir kopyasını oluşturur. Benzer ayarlarda hızlıca yeni bannerlar üretmek için kullanılır.
• Kalem İkonu (Düzenle): İlgili bannerın detay penceresini (Başlık, URL, Görsel, Sütun Genişliği vb.) sağ taraftan tekrar açarak içerikleri güncellemenizi sağlar.
• Çöp Kutusu İkonu (Sil): Eklenen banner görselini ve ona bağlı tüm tanımlı ayarları sistemden kalıcı olarak kaldırır.

5. Ayarlar (Blok Başlık ve Açıklama Seçeneği)

Resim listesinin hemen altında yer alan bu alan, banner bloğunun tamamını kapsayan genel bir üst başlık yapısı kurgulamanızı sağlar:

• Metin Girilirse:"Başlık" ve "Alt Başlık" alanlarına herhangi bir veri girişi yaptığınızda, bu metinler sitenizin ön yüzünde banner bloğunun hemen üzerinde kurumsal bir başlık alanı olarak görüntülenir.
• Boş Bırakılırsa: Bu alanları boş bıraktığınız takdirde sistem üst alanda herhangi bir başlık alanı oluşturmaz ve banner görselleriniz doğrudan listelenir.

6. Banner Örnekleri