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

Gelişmiş Slider bloğu, T-Soft Online Mağazanızın anasayfasına veya herhangi bir sayfasına görsel ağırlıklı, animasyonlu bir slayt gösterisi eklemenizi sağlar. Standart Hero Slider'dan farklı olarak her slide için ayrı ayrı mobil/tablet görseli, küçük resim (thumbnail), buton metni, zengin metin içeriği ve yayınlama zaman aralığı tanımlayabilirsiniz. Slide adedi ve kenar boşluğu gibi görsel ayarlar ekran boyutuna göre (XS'ten XXL'e kadar) ayrı ayrı yapılandırılabildiğinden hem masaüstü hem de mobil deneyimi tam kontrol altında tutabilirsiniz.

1. Bloğu Sayfaya Ekleme

Gelişmiş Slider bloğunu bir sayfaya eklemek için öncelikle T-Soft yönetim panelinde sol menüden Online Mağaza → Blok Yönetimi yolunu izleyin. Açılan ekranda üst kısımdaki sayfa seçici üzerinden düzenlemek istediğiniz temayı, ardından sayfayı seçin (örneğin Default → Anasayfa → Anasayfa Default).

Sayfa blok listesi açıldığında, bloğu hangi satır bölümüne eklemek istediğinize karar verin. Her satırın sağ alt köşesinde turuncu renkli + Yeni butonu bulunur; bu butona tıklayın.

Sağ taraftan kayan Kullanılabilir Bloklar paneli açılır. Listede Gelişmiş Slider satırını bulun ve solundaki turuncu + ikonuna tıklayın. Blok, seçtiğiniz satırın alt kısmına eklenecektir.

2. Düzenleme Ekranına Giriş

Blok eklendikten sonra, sağ tarafında yer alan kalem (düzenle) ikonuna tıklayarak bloğun ayar ekranını açın.

Düzenleme ekranı yatay olarak ikiye bölünmüştür:

• Sol panel — Genel Ayarlar: Bloğun kimler tarafından görüleceği, hangi cihazlarda gösterileceği ve hangi dillerde aktif olacağı gibi yapısal ayarları içerir.
• Sağ panel — İçerik ve Slider Ayarları: Slide'ların eklenip yönetildiği Resimler bölümü ile tüm slider'ı etkileyen görünüm ve davranış ayarlarını içerir.

3. Genel Ayarlar

Genel ayarlar üç ana gruptan oluşur: temel tanımlama alanları, yetkilendirme ayarları ve görünüm/dil ayarları.

3.1 Temel Tanımlama

Blok Başlığı

Bloğa yönetim panelinde görünecek bir iç isim verebilirsiniz. Bu alan yalnızca yönetim arayüzünde tanımlama amacıyla kullanılır; mağaza ziyaretçileri tarafından görülmez. Özellikle aynı sayfada birden fazla slider bloğu kullandığınızda her birine anlamlı bir isim vermek (örneğin "Anasayfa Üst Slider", "Kampanya Slider") yönetimi kolaylaştırır.

Tema

Bloğun görsel temasını belirler. Açılır menüden mevcut temalar listelenir; varsayılan değer Default'tur. Farklı bir tema seçildiğinde slider'ın HTML çıktısı ve stil sınıfları o temaya göre şekillenir.

Şablon

Bloğun kullanacağı Twig şablonunu seçer. Varsayılan değer default.twig'dir. Yanındaki Düzenle butonuna tıklayarak şablon kodunu doğrudan düzenleyebilirsiniz; bu özellik özelleştirilmiş görünümler veya ek CSS/JS entegrasyonları için kullanışlıdır. Şablonu değiştirmeden önce mevcut şablonun yedeğini almanız tavsiye edilir.

3.2 Yetkilendirme

Bu grup, bloğun mağaza ön yüzünde hangi kullanıcı tiplerine gösterileceğini belirler. Her seçenek bağımsız bir açma/kapatma (toggle) düğmesiyle kontrol edilir.

Ziyaretçi Görsün

Mağazaya giriş yapmamış, hesapsız kullanıcıların bloğu görmesini sağlar. Kampanya veya tanıtım amaçlı slider'lar genellikle bu seçenek açık bırakılarak tüm ziyaretçilere gösterilir.

Üye Görsün

Mağazaya üye girişi yapmış kullanıcıların bloğu görmesini sağlar. Yalnızca üyelere özel kampanyalar veya kişiselleştirilmiş içerik göstermek istediğinizde bu seçeneği açık, Ziyaretçi Görsün seçeneğini kapalı bırakabilirsiniz.

Bayi Görsün

Bayi hesabıyla giriş yapmış kullanıcıların bloğu görmesini sağlar. Bayilere özel fiyat listesi veya kampanya slider'ı gibi senaryolarda kullanılabilir.

3.3 Görünüm (Cihaz Bazlı)

Bu grup, bloğun hangi cihaz kategorilerinde görüntüleneceğini kontrol eder. Her cihaz tipi için bağımsız toggle bulunur.

Masaüstü

Bilgisayar ve geniş ekranlı cihazlarda bloğun gösterilip gösterilmeyeceğini belirler.

Mobil

Akıllı telefonlarda bloğun gösterilip gösterilmeyeceğini belirler. Mobil cihazlar için daha sade bir sayfa deneyimi istiyorsanız yalnızca bu toggle'ı kapatarak slider'ı mobil görünümden kaldırabilirsiniz; bu durumda slider'ın yerine başka bir blok tasarımı eklenebilir.

Tablet

Tablet ekranlarında bloğun gösterilip gösterilmeyeceğini belirler.

Uygulama

T-Soft mobil uygulama kanalından erişen kullanıcılara bloğun gösterilip gösterilmeyeceğini belirler. 

3.4 Dil Ayarları

Bu grup, bloğun hangi dil(ler)de aktif olarak görüntüleneceğini belirler. Her dil için ayrı bir onay kutusu bulunur; mağazanızda aktif olan diller burada listelenir.

Bir dil seçildiğinde blok, o dilde yapılan ziyaretlerde gösterilir. Aynı slider'ı tüm dillerde göstermek istiyorsanız tüm dilleri işaretleyebilirsiniz. Dile özel farklı içerik girilmesi gerektiğinde ise sağ panelin üstündeki dil seçici açılır menüsünden (örneğin Türkçe / İngilizce) ilgili dili seçerek o dile ait slide içeriklerini ayrıca girebilirsiniz.

4. İçerik Yönetimi — Resimler

Sağ panelin üst kısmındaki Resimler bölümü, slider'daki her bir slide'ın (slaydın) eklenip yönetildiği alandır. Her slide burada ayrı bir satır olarak listelenir ve sıraları sürükle-bırak ile değiştirilebilir.

4.1 Yeni Slide Ekleme

Resimler bölümünün sağ alt köşesindeki turuncu + Yeni butonuna tıklayın. Sağ taraftan kayan bir panel açılır; bu panel iki bölümden oluşur: temel alanlar (üstte) ve Gelişmiş Ayarlar (altta, genişletilebilir).

4.2 Temel Slide Alanları

Başlık

Slide üzerinde büyük puntolarla görüntülenecek ana başlık metnidir. Kısa ve dikkat çekici olması önerilir; örneğin "Yaz Koleksiyonu Geldi" veya "%50'ye Varan İndirimler". Bu alan tema şablonuna bağlı olarak slider görseli üzerine bindirme (overlay) biçiminde gösterilir.

Alt Başlık

Başlığın hemen altında görünecek, daha küçük puntolu ikincil metin alanıdır. Başlığı destekleyici bilgi vermek veya harekete geçirici bir ifade eklemek için kullanılabilir; örneğin "Tüm kategorilerde sezon indirimleri başladı."

URL

Slide görselinin veya üzerindeki butonun tıklanması halinde kullanıcının yönlendirileceği bağlantıyı tanımlar. İki yöntemle ayarlanabilir:

• Sayfa Linki: Açılır menüden mağazanızdaki mevcut bir sayfa (kategori, ürün, özel sayfa vb.) seçilebilir. Bu yöntem, link yapısının değişmesi durumunda yeniden düzenleme gerektirmediğinden tercih edilmesi önerilir.
• Manuel URL: Açılır menünün yanındaki arama/giriş alanına harici veya dahili bir URL doğrudan yazılabilir.

Büyük Ekran (Masaüstü Görseli)

Slider'ın masaüstü cihazlarda göstereceği ana görseldir. "Görsel Ekle" alanına tıklayarak medya kütüphanesinden seçim yapabilir ya da doğrudan dosyayı bu alana sürükleyip bırakabilirsiniz. En iyi sonuç için görsel boyutunun temanızın önerdiği boyutla örtüşmesi önemlidir; aksi hâlde görsel otomatik kırpılabilir veya boşluk kalabilir.

4.3 Gelişmiş Ayarlar (Slide Bazlı)

Slide formunu aşağı kaydırdığınızda veya Gelişmiş Ayarlar başlığına tıkladığınızda ek alanlar açılır. Bu alanlar, her slide için daha ince kontrol imkânı sunar.

Mobil/Tablet Görseli (isteğe bağlı)

Masaüstü görselinden bağımsız olarak, mobil ve tablet cihazlar için ayrı bir görsel yükleyebilirsiniz. Bu alan zorunlu değildir; boş bırakıldığında sistem masaüstü görselini tüm cihazlarda kullanır. Ancak masaüstü için hazırlanan yatay/geniş format görseller dar ekranlarda kötü görünebileceğinden, özellikle metin içeren slider tasarımlarında dikey veya kare formatlı ayrı bir mobil görseli eklemeniz önerilir.

Küçük Resim (Thumbnail)

Slider'ın sayfalama bölümünde, ilgili slide'a ait önizleme küçük resmi olarak kullanılacak görseli tanımlar. Bu alan yalnızca "Küçük Resimleri Göster" ayarı aktifleştirildiğinde görünür hâle gelir. Thumbnail görseli genellikle ana görselin küçük ve kırpılmış hâli olur.

Buton Metni

Slide üzerinde görünecek harekete geçirici butonun (Call to Action) etiketidir. Örneğin "Alışverişe Başla", "Koleksiyonu Keşfet" veya "Hemen İncele" gibi değerler girilebilir. Bu alan boş bırakılırsa slide üzerinde buton görünmez.

Veri 1 / Veri 2 / Veri 3

Tema şablonunun desteklediği ek metin alanlarıdır. Standart başlık ve alt başlık dışında özelleştirilmiş şablonlarda üçüncü bir metin satırı, rozet, etiket veya fiyat gibi bilgileri aktarmak için kullanılabilir. Bu alanların nasıl gösterileceği tamamen aktif tema şablonuna bağlıdır; varsayılan şablonda bu alanlar işlevsiz kalabilir.

İçerik

Zengin metin editörü (WYSIWYG) ile slide üzerine eklemek istediğiniz uzun form içerik girilebilir. Kalın/italik metin, hizalama, renk, link ve HTML kodu gibi biçimlendirme seçenekleri sunulur. Gelişmiş Editör butonuyla tam ekran editöre geçiş yapılabilir. Bu alan özellikle bilgi içerikli veya açıklamalı slider tasarımlarında kullanışlıdır.

Yayınlama Zaman Aralığı

Slide'ın mağaza ön yüzünde ne zaman yayınlanacağını ve ne zaman yayından kalkacağını belirler. Başlangıç Tarihi ve Bitiş Tarihi alanlarına tarih ve saat girilebilir. Bu özellik özellikle kampanya dönemlerinde kullanışlıdır; örneğin bir indirim slider'ını kampanya başlangıç saatinde otomatik olarak yayına alıp bitiş saatinde otomatik kaldırabilirsiniz.

Formu doldurduktan sonra sağ üst köşedeki turuncu Kaydet butonuna tıklayın. Slide, Resimler listesine eklenecektir.

4.4 Eklenen Slide'ları Yönetme

Kaydedilen her slide, Resimler bölümünde bir satır olarak görünür. Satırda slide görseli ve başlığının küçük önizlemesi yer alır. Satırın sağ tarafında dört yönetim ikonu bulunur:

Göz (Gizle/Göster) İkonu

Slide'ı geçici olarak mağaza ön yüzünden gizler. Slide silinmez, yalnızca görünmez hale gelir. Aynı ikona tekrar tıklandığında slide yeniden yayına alınır. Mevsimsel içerikleri saklamak veya test amaçlı geçici olarak devre dışı bırakmak için idealdir.

Kopyala İkonu

Mevcut slide'ın tüm içeriğini (görsel, başlık, URL vb.) kopyalayarak yeni bir slide oluşturur. Benzer yapıda birden fazla slide oluşturacaksanız her seferinde sıfırdan doldurmak yerine kopyalama yapıp üzerinde küçük değişiklikler yapmak zaman kazandırır.

Düzenle (Kalem) İkonu

Slide'ın düzenleme formunu yeniden açar. Tüm alanlar daha önce girilmiş değerleriyle görünür ve istenilen değişiklikler yapılabilir.

Sil (Çöp Kutusu) İkonu

Slide'ı kalıcı olarak siler. Bu işlem geri alınamaz; silmeden önce emin olunması önerilir.

Sıralama: Slide satırları sürükle-bırak ile yeniden sıralanabilir. Slider'daki gösterim sırası bu listedeki sıraya göre belirlenir.

5. Slider Görünüm ve Davranış Ayarları

Resimler bölümünün hemen altındaki Ayarlar grubu, tüm slider'ı genel olarak etkileyen görünüm ve davranış parametrelerini içerir. Bu ayarlar tek tek slide'lara değil, bloğun tamamına uygulanır.

5.1 Slider Başlık Bilgileri

Başlık

Tüm slider bloğunun üstünde gösterilecek genel bir başlık alanıdır. Örneğin "Öne Çıkan Kampanyalar" gibi bir başlık girilebilir. Bu alan temanın desteklemesine bağlıdır; bazı temalarda görünmeyebilir.

Alt Başlık

Blok başlığının altında görünecek tamamlayıcı bir açıklama metnidir. Başlık gibi bu alan da tema desteğine bağlıdır.

5.2 Slide Adedi

Ekranda aynı anda kaç slide'ın yan yana görüntüleneceğini belirler. Değeri 1 olarak bırakırsanız klasik tam genişlik hero slider görünümü elde edersiniz. 2, 3 veya daha yüksek değerler girildiğinde slider, birden fazla kartı yan yana göstererek bir ürün karüzeli (carousel) görünümüne dönüşür.

Bu ayar duyarlı (responsive) yapıdadır; yani farklı ekran boyutları için farklı değerler tanımlanabilir. Ayar ilk açıldığında kaydırıcı (slider) biçiminde görünür; Gelişmiş bağlantısına tıklayarak tüm kırılım noktaları için ayrı alan girişine geçilebilir:

Her alana 0 girildiğinde o kırılım noktası için temanın varsayılan değeri kullanılır. Varsayılan Ayarlara Dön butonuyla tüm değerler sıfırlanarak tema varsayılanına geri dönülebilir.

5.3 Kenar Boşluğu

Slider'daki slide'lar arasındaki yatay boşluğu piksel cinsinden tanımlar. Örneğin 16 girildiğinde her iki slide arasında 16 piksel boşluk bırakılır. Slide adedi 1 olduğunda bu ayarın görsel etkisi sınırlıdır; ancak birden fazla slide gösterildiğinde kartlar arasındaki hava miktarını doğrudan etkiler.

Slide Adedi gibi bu alan da kırılım noktalarına göre ayrı ayrı ayarlanabilir. Gelişmiş bağlantısıyla XS–XXL alanlarına geçiş yapılabilir.

5.4 Navigasyon ve Sayfalama

Navigasyon Göster

Slider'ın sol ve sağ kenarlarında görünen ileri/geri ok butonlarının (navigasyon okları) gösterilip gösterilmeyeceğini belirler. Varsayılan olarak açık gelir. Okları gizlemek istiyorsanız bu toggle'ı kapatabilirsiniz; bu durumda kullanıcılar yalnızca kaydırma (swipe) veya sayfalama noktalarıyla slider'ı kontrol edebilir.

Sayfalama Türü

Slider'ın alt kısmında görünen sayfalama göstergesinin biçimini seçer. Açılır menüden tema tarafından sunulan seçenekler listelenir (örneğin nokta, çizgi, sayı vb.). Boş bırakıldığında tema varsayılanı uygulanır.

Sayfalama Göster

Sayfalama göstergesinin (genellikle slide sayısını temsil eden noktalar dizisi) görünüp görünmeyeceğini belirler. Varsayılan olarak açık gelir. Minimalist bir görünüm için kapatılabilir.

Küçük Resimleri Göster

Aktif edildiğinde, slider'ın alt kısmında her slide için tanımlanmış thumbnail (küçük resim) görselini sayfalama alanında gösterir. Bu seçenek ancak her slide için Küçük Resim (Thumbnail) alanına görsel yüklendiğinde anlamlı sonuç verir. Varsayılan olarak kapalı gelir.

5.5 Geçiş Efekti

Efekt

Slide'lar arasındaki geçiş animasyonunu belirler. Varsayılan değer slide'dır; bu değerde bir slide sola kayarken bir sonraki sağdan girer. Tema desteğine bağlı olarak ek efektler seçilebilir (örneğin fade — yavaşça solma/belirme). Açılır menüden mevcut seçenekler listelenir.

5.6 Otomatik Oynatma ve Döngü

Döngü

Son slide'dan sonra tekrar ilk slide'a dönerek sonsuz döngüde oynatılmasını sağlar. Varsayılan olarak kapalı gelir. Otomatik oynatma ile birlikte kullanıldığında slider kesintisiz döner; aksi hâlde son slide'a gelince otomatik geçiş durur.

Otomatik Oynatma (ms)

Slider'ın slide'lar arasında otomatik geçiş yapıp yapmayacağını ve geçişler arasındaki bekleme süresini milisaniye cinsinden belirler. Varsayılan değer 10'dur; bu değer pratikte otomatik oynatmayı devre dışı bırakır. Otomatik oynatmayı etkinleştirmek için gerçekçi bir değer girin:

Otomatik oynatma aktifken Döngü seçeneğini de açmayı unutmayın; aksi hâlde son slide'da otomatik geçiş duracaktır.

6. Değişiklikleri Kaydetme

Sağ paneldeki slide ve ayar değişikliklerinin her birinde ilgili formun Kaydet butonu kullanılmalıdır. Genel blok ayarları (sol panel) için ayrıca sayfanın üst kısmındaki ana kaydet butonuna tıklamanız gerekebilir. Değişiklikler kaydedildikten sonra ön belleği temizlemek için sağ üst köşedeki Ön Bellek Temizle butonunu kullanmanız önerilir; aksi hâlde değişiklikler mağaza ön yüzüne hemen yansımayabilir.

Örnekler