TreyzaYardım Merkezi

Tema Editörü — Genel Bakış

Mağazanızın müşterilere görünen sayfalarını "sürükle-bırak" mantığıyla, parça parça (bileşen bileşen) inşa ettiğiniz görsel tasarım aracı.

Nerede bulunur: Yönetim panelinden Tema Editörü (tam ekran açılır; sol üstteki Panele Dön oku ile geri çıkarsınız) Kimler için: Online mağazasının görünümünü (vitrinini) kendi eliyle, kod yazmadan tasarlamak isteyen her mağaza sahibi Kısaca: Mağazanızın müşterilere görünen sayfalarını "sürükle-bırak" mantığıyla, parça parça (bileşen bileşen) inşa ettiğiniz görsel tasarım aracı.


Ne işe yarar?

Tema Editörü, müşterilerinizin gördüğü online mağazanızın (vitrininizin) nasıl görüneceğini belirlediğiniz yerdir. Ana sayfanızdaki büyük tanıtım görselinden, kategori kutucuklarına, "Sıkça Sorulan Sorular" bölümüne, en alttaki iletişim bilgilerine (footer) kadar her şeyi buradan tasarlarsınız.

En güzel yanı: kod bilmenize gerek yoktur. Hazır "yapı taşlarını" (bunlara bileşen diyoruz) tutup sayfanıza sürükler, sonra renklerini, yazılarını, görsellerini değiştirirsiniz. Yaptığınız her değişikliği anında ekranın ortasındaki önizlemede görürsünüz.

İpucu: Tema Editörü'nü bir "duvar panosu" gibi düşünün. Elinizde hazır kartlar (bileşenler) var; bunları panoya dizip üzerlerini istediğiniz gibi süslüyorsunuz. Beğenmezseniz kaldırıp yenisini koyabilirsiniz.


Ekranın genel yapısı: 3 panel

Tema Editörü açıldığında ekran üç ana bölüme ayrılır:

BölümKonumuNe işe yarar?
Bileşen KütüphanesiSol panelSayfaya ekleyebileceğiniz hazır yapı taşlarının (bileşenlerin) listesi. Buradan tutup ortaya sürüklersiniz.
Tuval (Canvas)Orta (en geniş alan)Mağazanızın canlı önizlemesi. Eklediğiniz her şey burada gerçek görüntüsüyle belirir. Bileşenleri buradan seçer, sürükleyip sıralarsınız.
Sağ PanelSağ tarafÜç farklı görevi vardır (aşağıda). Seçtiğiniz bileşenin ayarlarını, sayfadaki tüm bileşenlerin listesini veya tüm mağazanın genel görünüm ayarlarını burada yönetirsiniz.

Sağ panel üç farklı moda geçebilir (üst araç çubuğundaki butonlarla değiştirilir):

  1. Özellikler — Tuvalde seçtiğiniz bir bileşenin ayarlarını (yazı, renk, görsel, boşluk vb.) düzenlersiniz.
  2. Bileşen Havuzu — Açık sayfadaki tüm bileşenlerin listesi; gizleme/silme/sıralama yaparsınız.
  3. Tema Ayarları — Tüm mağazaya etki eden genel ayarlar (renk paleti, yazı tipi, logo, sabit butonlar vb.).

İpucu: Sol ve sağ paneller dar geliyorsa, üst araç çubuğundaki panel aç/kapat butonlarıyla onları gizleyip tuvale daha çok yer açabilirsiniz. Bu, özellikle küçük ekranlarda işinizi kolaylaştırır.


Temel kavramlar (sözlük)

Tema Editörü'nde sık geçen terimleri en baştan açıklayalım:

TerimNe demek?
Vitrin / MağazaMüşterilerinizin gördüğü, ürün satın aldığı online site. (Yönetim paneli sizin arka ofisiniz, vitrin ise müşterinin gördüğü yüz.)
BileşenSayfanın bir parçası / yapı taşı. Örnek: bir tanıtım afişi, bir kategori kutucuğu satırı, bir "Sıkça Sorulan Sorular" bölümü.
Sayfa (Şablon)Mağazanızın bir ekranı. Örnek: Ana Sayfa, Kategori Sayfası, Ürün Sayfası, kendi yaptığınız Özel Sayfalar.
Yapı (Üst / Alt)Tüm sayfalarda ortak görünen bölümler. Üst Yapı = sayfaların en üstündeki menü/logo (header). Alt Yapı = en alttaki iletişim/link bölümü (footer). Bir kez tasarlarsınız, her sayfada görünür.
Tuval (Canvas)Ortadaki canlı önizleme alanı.
ÖzelliklerSeçtiğiniz bileşenin ayarları (sağ panelde açılır).
Kapsayıcı (Container)İçeriğin sayfada ne kadar geniş alana yayılacağı.
YayınlamaYaptığınız değişiklikleri gerçek mağazada canlıya almak. Yayınlamadan müşteriler değişikliği görmez.

Sayfalar ve Yapı: aradaki fark

Bu, yeni başlayanların en çok karıştırdığı konudur, baştan netleştirelim:

  • Sayfalar, müşterinin gezindiği ayrı ekranlardır: Ana Sayfa, Kategori Sayfası, Ürün Sayfası ve sizin oluşturduğunuz Özel Sayfalar (örneğin "Hakkımızda" sayfası).
  • Yapı ise her sayfada ortak görünen iki bölümdür:
    • Üst Yapı (Header): Sayfaların tepesindeki logo, menü, arama, sepet — her sayfada aynı.
    • Alt Yapı (Footer): Sayfaların en altındaki linkler, iletişim, sosyal medya — her sayfada aynı.

Yani Üst Yapı'yı bir kere düzenlerseniz, mağazanızdaki tüm sayfaların üstü değişir. Bu büyük kolaylıktır: menüyü her sayfada tek tek yapmazsınız.

İpucu: İlk kez girdiğinizde sistem sizin için otomatik olarak bir Ana Sayfa, bir Üst Yapı ve bir Alt Yapı oluşturur. Yani boş bir ekranla baş başa kalmazsınız; hazır bir iskelet üzerinde çalışmaya başlarsınız.


Tipik çalışma akışı (özet)

Bir mağaza sahibi olarak Tema Editörü'nde genelde şu sırayı izlersiniz:

  1. Sayfa seçin. Üstteki sayfa menüsünden hangi sayfayı düzenleyeceğinizi seçin (örn. Ana Sayfa).
  2. Bileşen ekleyin. Sol panelden bir yapı taşını (örn. bir tanıtım afişi) tutup ortadaki tuvale sürükleyin — ya da üstüne tıklayın.
  3. Özelleştirin. Eklediğiniz bileşene tuvalde tıklayın; sağ panelde açılan Özellikler'den yazısını, rengini, görselini değiştirin.
  4. Sıralayın. Bileşenleri yukarı-aşağı sürükleyerek sayfadaki sıralarını ayarlayın.
  5. Genel ayarları yapın. Üstteki Tema Ayarları butonundan mağazanızın renk paletini, yazı tipini, logosunu belirleyin.
  6. Önizleyin. Üstteki Önizle moduna ve farklı cihaz görünümlerine (masaüstü/tablet/mobil) geçip kontrol edin.
  7. Yayınlayın. Her şey hazırsa sağ üstteki Yayınla butonuna basın. Değişiklikler artık gerçek mağazanızda canlıdır.

Kaydetme ve yayınlama nasıl çalışır? (ÇOK ÖNEMLİ)

Bu konuyu yanlış anlamak, "değişikliklerim kayboldu" ya da "yaptığım değişiklik mağazada görünmüyor" sorunlarına yol açar. Dikkatle okuyun:

  • Tema Editörü'nde yaptığınız tasarım değişikliklerinin çoğu (bileşen ekleme/silme, renk, yazı, sıralama, tema ayarları) önce sadece sizin ekranınızda tutulur. Müşteriler bunları siz Yayınla'ya basana kadar göremez.
  • Yayınla butonuna bastığınızda tüm bu birikmiş değişiklikler gerçek mağazaya gönderilir ve canlıya alınır.

Dikkat — iki istisna var: Aşağıdaki iki ayar grubu Yayınla'dan bağımsızdır ve değiştirdiğiniz anda otomatik kaydedilir (ayrı bir sisteme):

AyarDavranış
Tema Ayarları → Ödeme sekmesiHer değişiklik birkaç saniye içinde otomatik kaydedilir. "Yayınla" beklemez.
Tema Ayarları → Ürün sekmesi (ürün kartı, galeri, vb.)Diyalogdaki Kaydet butonuna basınca anında kaydedilir. "Yayınla" beklemez.

Yani bu iki bölümde yaptığınız değişiklikler, siz Yayınla'ya basmasanız bile mağazaya yansır.

Dikkat — kaydedilmemiş değişiklikler: Bir sayfada yayınlamadığınız değişiklikler varken başka bir sayfaya geçmeye çalışırsanız, sistem sizi Yayınlanmamış Değişiklikler uyarısıyla durdurur. Burada üç seçeneğiniz olur: İptal (geçmekten vazgeç), Değişiklikleri At (değişiklikleri sil, kaydetmeden geç) veya Yayınla ve Geç (önce yayınla, sonra geç). Değişiklikleri At seçeneği geri alınamaz.


Bu bölümdeki diğer rehberler

Tema Editörü geniş bir alan olduğu için ayrı rehberlere böldük. Sırayla okumanızı öneririz:

  1. Üst Araç Çubuğu — En üstteki tüm butonlar ne işe yarar (Üst Araç Çubuğu)
  2. Sayfalar ve Yapı — Sayfa oluşturma, düzenleme, silme; Üst/Alt Yapı (Sayfalar ve Yapı)
  3. Bileşen Kütüphanesi — Sol panel; bileşen nasıl eklenir (Bileşen Kütüphanesi (Sol Panel))
  4. Tuval ve Önizleme — Ortadaki çalışma alanı; sıralama, önizleme (Tuval ve Önizleme)
  5. Özellikler Paneli — Bir bileşenin ayarlarını düzenleme (Özellikler Paneli (Sağ Panel))
  6. Bileşen Havuzu — Sayfadaki bileşenleri toplu yönetme (Bileşen Havuzu (Sağ Panel))
  7. Tema Ayarları (Site, Renk, Yazı) — Genel görünüm ayarları (Tema Ayarları — Site, Renk, Yazı ve Genel)
  8. Sabit Butonlar, Davranış, Ödeme — Diğer tema ayarı sekmeleri (Tema Ayarları — Sabit Butonlar, Davranış ve Ödeme)
  9. Ürün Görünüm Ayarları — Ürün kartı ve ürün sayfası tasarımı (Tema Ayarları — Ürün Görünüm Ayarları)
  10. Hazır Temalar — Tek tıkla hazır tema uygulama (Hazır Temalar)
  11. Bileşen Kataloğu — Tüm bileşenlerin tek tek tanıtımı (Bileşen Kataloğu (Tüm Bileşenler))
  12. Yapay Zekâ Araçları — Tasarımda size yardım eden AI butonları (Yapay Zekâ (AI) Araçları)

Sık sorulan

S: Yaptığım değişiklikler hemen müşterilere görünür mü? C: Hayır. Tasarım değişikliklerinin çoğu siz Yayınla'ya basana kadar sadece sizin ekranınızda kalır. (İstisnalar: Ödeme ve Ürün ayarları — onlar anında kaydolur.)

S: Yanlışlıkla bir şeyi bozarsam ne olur? C: Henüz Yayınla'ya basmadıysanız, sayfayı kapatıp yeniden açtığınızda yayınlanmamış değişiklikler gider ve son yayınlanan haline dönersiniz. Ayrıca dilerseniz Hazır Temalar'dan baştan temiz bir tasarımla başlayabilirsiniz (bkz. Hazır Temalar).

S: Mağazanın görünümünü değiştirmek ürünlerimi veya siparişlerimi etkiler mi? C: Hayır. Tema Editörü yalnızca görünümle ilgilenir. Ürünleriniz, stoklarınız, siparişleriniz ayrı bölümlerde durur ve buradan yaptığınız tasarım değişikliklerinden etkilenmez.

S: Bilgisayardan mı yoksa telefondan mı tasarlamalıyım? C: Tema Editörü geniş bir araçtır; rahat çalışmak için bilgisayardan (geniş ekran) kullanmanızı öneririz. Ama tasarladığınız mağazanın telefonda nasıl görüneceğini, üstteki Mobil önizleme butonuyla her zaman kontrol edebilirsiniz.

Bu sayfada