Tuval ve Önizleme
Mağazanızın canlı önizlemesi. Bileşenleri buradan seçer, sürükleyerek sıralar; farklı cihaz görünümlerinde ve önizleme modunda kontrol edersiniz.
Nerede bulunur: Tema Editörü'nün ortasındaki büyük alan (mağazanızın canlı görüntüsü) Kimler için: Eklediği bileşenleri yerleştiren, sıralayan ve sonucu görmek isteyen herkes Kısaca: Mağazanızın canlı önizlemesi. Bileşenleri buradan seçer, sürükleyerek sıralar; farklı cihaz görünümlerinde ve önizleme modunda kontrol edersiniz.
Ne işe yarar?
Tuval (Canvas), ekranın ortasındaki en geniş alandır ve mağazanızın gerçek görüntüsünü canlı olarak gösterir. Sol panelden eklediğiniz her bileşen burada müşterinin göreceği haliyle belirir. Bir ayarı değiştirdiğinizde sonucu anında burada görürsünüz — yani "kör" çalışmazsınız, ne yaptığınızı her an görürsünüz.
Tuval aslında mağazanızın canlı bir penceresidir (teknik adıyla bir "önizleme çerçevesi"). Bu yüzden yüklenirken kısa bir an Önizleme yükleniyor... yazısı ve dönen bir simge görebilirsiniz; bu normaldir, birkaç saniye içinde mağazanız belirir.
Tuvalde bir bileşeni seçme ve düzenleme
- Tuvalde düzenlemek istediğiniz bölümün (bileşenin) üstüne tıklayın.
- Bileşen seçilir ve sağ panelde Özellikler açılır.
- Artık sağ panelden o bileşenin yazısını, rengini, görselini, boşluklarını değiştirebilirsiniz (ayrıntı: Özellikler Paneli (Sağ Panel)).
Bir bileşenin üzerine fareyle geldiğinizde, onu taşımak, gizlemek veya silmek için küçük tutamaç/butonlar belirir. Bu butonlar doğrudan bileşenin üzerinde görünür.
İpucu: Hangi bileşeni seçtiğinizden emin değilseniz veya kalabalık bir sayfada doğru bileşene tıklamakta zorlanıyorsanız, Bileşen Havuzu'nu (sağ panel) kullanın. Orada sayfadaki tüm bileşenler liste halindedir; listeden seçmek tuvalde tıklamaktan daha kolaydır (bkz. Bileşen Havuzu (Sağ Panel)).
Bileşenleri sıralama (sürükle-bırak)
Bileşenlerin sayfadaki yukarı-aşağı sırasını değiştirmek için:
- Sıralamak istediğiniz bileşenin taşıma tutamacından (sürükleme noktası) farenizle basılı tutun.
- Yukarı veya aşağı sürükleyin. Sürüklerken bileşenin nereye yerleşeceğini gösteren bir çizgi/işaret belirir.
- İstediğiniz konuma gelince fareyi bırakın. Bileşen yeni sırasına oturur.
Sürükleme sırasında fareyi tuvalin üst veya alt kenarına yaklaştırırsanız sayfa otomatik kayar; böylece uzun sayfalarda bileşeni aşağıya/yukarıya taşımak kolaylaşır.
İpucu: Sürükle-bırak ile sıralamayı zor buluyorsanız, Bileşen Havuzu'ndan da bileşenleri tutup sıralayabilirsiniz — orası daha derli topludur.
Üst Yapı ve Alt Yapı tuvalde nasıl görünür?
Bir normal sayfayı düzenlerken, tuvalde o sayfanın kendi bileşenlerinin yanı sıra (eğer açıksa) ortak Üst Yapı (en üstte) ve Alt Yapı (en altta) bölümleri de görünür. Böylece sayfanın gerçekte, menü ve footer ile birlikte nasıl görüneceğini görürsünüz.
Dikkat: Tuvalde menüyü (Üst Yapı) veya footer'ı (Alt Yapı) düzenlerseniz, bu tüm sayfalarınızı etkiler — çünkü onlar ortaktır. Sadece tek bir sayfaya özel bir şey eklemek istiyorsanız, onu Üst/Alt Yapı'ya değil, sayfanın kendi gövdesine ekleyin.
Boş sayfa görünümü
Bir sayfada henüz hiç bileşen yoksa tuval boş görünür ve sizi yönlendiren bir mesaj çıkar: Henüz bileşen eklenmemiş ve altında Sol panelden bileşen sürükleyerek veya tıklayarak başlayın. Bu, "buraya sol panelden bileşen ekleyin" demektir.
Eğer hiçbir sayfa seçili değilse tuval Bir sayfa seçin mesajı gösterir; üstteki sayfa menüsünden bir sayfa seçmeniz yeterlidir.
Cihaz görünümleri: Masaüstü / Tablet / Mobil
Üst araç çubuğundaki üç cihaz butonu (/ / ) tuvalin genişliğini değiştirir:
| Görünüm | Tuval genişliği | Ne için? |
|---|---|---|
| Masaüstü | Tam genişlik | Bilgisayar ekranındaki görünüm. |
| Tablet | Orta (≈768 piksel) | Tablet ekranındaki görünüm. |
| Mobil | Dar (≈375 piksel) | Telefon ekranındaki görünüm. |
Bu butonlar mağazanızın gerçek ayarını değiştirmez; sadece önizlemeyi o cihaz genişliğinde gösterir.
Ancak bu butonların ikinci bir görevi daha vardır: seçtiğiniz cihaz, bir bileşeni düzenlerken değişikliğin hangi cihaza kaydedileceğini de belirler. Telefona özel ayar yapmak için bkz. Cihaz Bazlı Ayarlar (Masaüstü / Tablet / Mobil)
İpucu: Bir bileşenin yalnızca telefonda ya da yalnızca bilgisayarda görünmesini sağlayabilirsiniz (bileşenin Görünürlük ayarından — bkz. Özellikler Paneli (Sağ Panel)). Böyle bir ayar yaptıysanız, doğru çalışıp çalışmadığını bu cihaz görünümleriyle test edin.
Önizleme verisi: örnek mi, gerçek mi?
Mağazanızın birçok sayfası tek bir şablondan çizilir ama binlerce farklı içerikle açılır: ürün sayfası her üründe, kategori sayfası her kategoride aynı şablonu kullanır. O yüzden bu sayfaları düzenlerken tuvalin sağ üst köşesinde bir seçici çıkar: "önizlemede hangi içeriği göstereyim?"
Önce en önemlisi: örnek veriler canlı sitenize ÇIKMAZ. Seçici yalnız sizin editör ekranınızı etkiler. Örnek ürünler, örnek kategoriler ve örnek yazılar mağazanızın kataloğuna eklenmez, adresleri ziyaretçiye açılmaz, site haritanıza ve ürün akışlarınıza girmez, arama motorlarına gönderilmez. Seçtiğiniz örnek, siz Kaydet ve Yayınla deseniz bile şablonla birlikte yayınlanmaz — yayınlanan şey tasarımınızdır, önizlemede gördüğünüz içerik değil.
Hangi sayfalarda seçici var?
| Sayfa | Seçicide ne çıkar? |
|---|---|
| Ürün Sayfası | Üç hazır örnek (basit · varyantlı · paketli ürün) + Mağazamdan ürün seç… |
| Kategori Sayfası | Üç hazır örnek (ana kategori · alt kategori · renk/beden filtreli) + Mağazamdan kategori seç… |
| Marka Sayfası | Üç hazır örnek (logolu · logosuz · ürünsüz marka) + Mağazamdan marka seç… |
| Etiket Sayfası | Üç hazır örnek (popüler · az ürünlü · ürünsüz etiket) + Mağazamdan etiket seç… |
| Blog Sayfası | Üç hazır örnek (dolu liste · konuya göre süzülmüş · boş blog) + Mağazamın gerçek yazıları… |
| Blog Yazı Sayfası | İki hazır örnek (görselli uzun yazı · görselsiz kısa yazı) + Mağazamdan yazı seç… |
| Arama Sonuçları | Üç hazır örnek (sonuç veren · sonuç vermeyen · sorgusuz arama) + Mağazamda ara… (kendi kelimenizi yazarsınız) |
| Form Sayfası | Üç hazır örnek (iletişim · randevu başvurusu · tek alanlı form) + Mağazamdan form seç… |
Diğer sayfalarda seçici yoktur ve gerekmez:
- Sepet, Ödeme, Hesabım, Giriş/Kayıt, Değerlendirme — bunlar bir "içeriğe" değil ziyaretçinin durumuna bağlıdır (sepetinde ne var, giriş yapmış mı). Editörde oturum olmadığı için bu sayfalar kendiliğinden örnek veriyle dolar: örnek sipariş, örnek kupon, örnek favori. Ayrı bir seçim yapmanız gerekmez.
- Ana Sayfa — zaten gerçek kataloğunuzla dolar.
- Üst/Alt Yapı, Özel Sayfalar, 404 / Hata / Bakım — veri istemezler.
Seçiciyi nasıl kullanırım?
- Tuvalin sağ üst köşesindeki butona tıklayın (örn. Önizleme markası seç).
- Açılan menüde iki bölüm vardır:
- Hazır örnek … — Treyza'nın hazırladığı temsilî içerikler. Her biri farklı bir durumu gösterir: dolu liste, boş liste, uzun açıklama, görselsiz kayıt. Şablonunuzun zor durumlarda nasıl göründüğünü test etmenin en hızlı yolu budur.
- Mağazamdan … seç… — kendi ürününüzü, kategorinizi, markanızı seçersiniz; şablon gerçek verinizle çizilir.
- Seçimden vazgeçmek için aynı menüdeki Önizleme … kaldır satırını kullanın.
Arama sayfasında menü yerine küçük bir pencere açılır: hazır örnekleri seçebilir veya kendi arama kelimenizi yazabilirsiniz (örn. gömlek).
"Bunlar benim ürünlerim değil" — örnek veriyi nasıl tanırım?
Örnek veri gösterilirken editör bunu iki yerden belli eder:
- Tuvalin üstünde açıklayıcı bir şerit çıkar — örneğin "Örnek marka verisi gösteriliyor — gerçek bir marka seçmek için sağ üstteki seçiciyi kullanın."
- İçeriğin adının yanında küçük bir ÖRNEK rozeti belirir.
Ayrıca örnek veri üzerindeyken tuvaldeki butonlar ve bağlantılar tıklanmaz; yanlışlıkla var olmayan bir sayfaya gitmezsiniz.
Sayfa açılırken hangisi seçili gelir?
- Ürün Sayfası açılışta gerçek bir ürününüzü gösterir. Kendi ürününüzle çalışmak çoğu zaman daha faydalıdır; örnek ürüne geçmek isterseniz seçiciden seçin.
- Diğer yedi sayfa açılışta örnek veriyle gelir. Böylece kataloğunuz, blogunuz veya formlarınız henüz boşken bile sayfanın nasıl görüneceğini görürsünüz.
- Mağazamdan … ile seçtiğiniz gerçek bir içerik silinmiş ya da yayından kaldırılmışsa editör sessizce örneğe döner; boş bir ekranla kalmazsınız.
Kataloğunuz boşsa bu bir avantajdır. Yeni bir mağazada henüz ürün, kategori ve blog yazısı yoktur — örnek veri sayesinde tasarımı ürün girmeden önce bitirebilirsiniz.
Örnek görseller de örnektir. Örnek içeriklerin fotoğrafları Treyza'nın önizleme görselleridir; galerinize eklenmez ve mağazanızda kullanılamaz.
Düzenle / Önizle modu
Üst araç çubuğundaki Düzenle ve Önizle butonları tuvalin çalışma şeklini değiştirir:
- Düzenle: Normal çalışma modu. Bileşenleri seçip taşıyabilir, ayarlarını değiştirebilirsiniz. Sol ve sağ paneller açıktır.
- Önizle: Düzenleme tutamaçları kaybolur, paneller gizlenir. Mağaza tam olarak müşterinin göreceği gibi, temiz haliyle görünür. Hiçbir şeyi yanlışlıkla taşıma/silme riski olmadan inceleyebilirsiniz.
İpucu: Bir bölümü bitirdikten sonra Önizle'ye geçip gerçek görünümü kontrol etmek iyi bir alışkanlıktır. Sonra Düzenle'ye dönüp çalışmaya devam edersiniz.
Önizleme yüklenmezse
Nadiren tuval bir hata mesajı gösterip yüklenemeyebilir. Bu durumda bir hata yazısı ve bir Tekrar dene butonu görürsünüz. Tekrar dene'ye basmak çoğunlukla sorunu çözer. Çözülmezse sayfayı (tarayıcıyı) yenilemeyi deneyin.
Sık sorulan
S: Tuvalde bir bileşene tıklıyorum ama seçilmiyor / yanlış bileşen seçiliyor. C: İç içe geçmiş bileşenlerde (örneğin sütunların içindeki bir yazı) doğru parçaya tıklamak zor olabilir. En kolayı Bileşen Havuzu'ndan seçmektir. Ayrıca seçtiğiniz iç bileşenden bir üst bileşene dönmek için sağ panelin üstündeki Üst Bileşen butonunu kullanabilirsiniz.
S: Mobil görünümde yazılar/görseller taşıyor. C: Bu, o bileşenin mobil için fazla büyük ayarlandığı anlamına gelebilir. Bileşeni seçip sağ panelden yazı boyutunu, boşlukları veya görsel ayarlarını mobil için uygun hale getirin. Bazı büyük bileşenleri mobilde tamamen gizlemeyi de tercih edebilirsiniz (Görünürlük ayarı).
S: Değişikliklerim tuvalde görünüyor ama mağazamda görünmüyor. C: Tuval sizin çalışma kopyanızı gösterir. Müşterilerin görmesi için değişiklikleri Yayınla ile canlıya almanız gerekir (Ödeme ve Ürün ayarları hariç — onlar anında kaydolur).
S: Editörde gördüğüm ürünler/kategoriler benim değil. Bunlar sitemde de görünecek mi? C: Hayır. Bunlar Treyza'nın örnek verileridir ve yalnız sizin editör ekranınızda çizilir. Kataloğunuza eklenmez, adresleri ziyaretçiye açılmaz, site haritanıza girmez ve Yayınla dediğinizde canlıya çıkmaz. Kendi içeriğinizle çalışmak isterseniz sağ üstteki seçiciden Mağazamdan … seç… deyin. Ayrıntı.
S: Tuvalde bir butona tıklıyorum ama hiçbir şey olmuyor. C: Örnek veri gösteriliyorsa bağlantı ve butonlar bilerek tıklanmaz — var olmayan bir sayfaya gitmenizi engeller. Gerçek davranışı denemek için önce sağ üstteki seçiciden kendi içeriğinizi seçin.
S: Sağ üstte önizleme seçicisi göremiyorum. C: Seçici yalnız içeriğe bağlı sayfalarda çıkar (Ürün, Kategori, Marka, Etiket, Blog, Blog Yazı, Arama, Form). Sepet, Ödeme, Hesabım, Giriş/Kayıt ve Değerlendirme sayfaları zaten kendiliğinden örnek veriyle dolar; Ana Sayfa ise gerçek kataloğunuzu gösterir.
Bu sayfa faydalı oldu mu?