Cihaz Bazlı Ayarlar (Masaüstü / Tablet / Mobil)
Bir bileşenin ayarlarını cihaza göre farklılaştırabilirsiniz. Örneğin başlık bilgisayarda 48 punto, telefonda 28 punto olabilir — üstelik iki ayrı…
Nerede bulunur: Tema Editörü → bir bileşen seçin → sağ paneldeki Özellikler'in sağ üst köşesindeki cihaz rozeti Kimler için: Aynı bileşenin telefonda farklı, bilgisayarda farklı görünmesini isteyen herkes Kısaca: Bir bileşenin ayarlarını cihaza göre farklılaştırabilirsiniz. Örneğin başlık bilgisayarda 48 punto, telefonda 28 punto olabilir — üstelik iki ayrı bileşen oluşturmadan.
Ne işe yarar?
Bilgisayarda güzel duran bir tasarım telefonda çoğu zaman aynı şekilde iyi durmaz: başlık çok büyük kalır, boşluklar gereğinden fazla olur, dört sütunlu bir alan sıkışır.
Normalde bunun için ya bileşeni telefonda tamamen gizlemeniz ya da herkes için ortalama bir değer seçmeniz gerekirdi. Cihaz bazlı ayarlar bu iki kötü seçeneği ortadan kaldırır: aynı bileşen kalır, sadece belirli ayarları telefonda (veya tablette) farklı bir değer alır.
Bunu bir bileşeni gizleyip göstermekle karıştırmayın. Görünürlük ayarı bileşeni o cihazda tamamen kaldırır; burada anlatılan özellik ise bileşeni yerinde bırakıp ayarlarını değiştirir. (Görünürlük için bkz. Özellikler Paneli (Sağ Panel))
Temel mantık: Masaüstü tabandır
Anlamanız gereken tek kural şudur:
Masaüstü, tüm ekranların temelidir. Tablet ve mobil, siz özellikle farklı bir değer vermediğiniz sürece masaüstündeki değeri kullanır.
Yani:
| Durum | Telefonda ne görünür? |
|---|---|
| Mobil için ayrı bir değer vermediniz | Masaüstündeki değer |
| Mobil için ayrı bir değer verdiniz | Mobil için verdiğiniz değer |
Mobil, tabletten devralmaz. Tablet için bir değer verip mobil için vermezseniz, telefon tabletinkini değil, masaüstündekini kullanır. Her cihaz doğrudan masaüstü tabanına bakar.
Bu yüzden doğru sıra şudur: önce masaüstünü bitirin, sonra bozulan yerleri tablet ve mobilde tek tek düzeltin. Baştan üç cihazı birden kurcalamak gereksiz iş çıkarır.
Cihaz rozeti nerede?
Tuvalde bir bileşene tıklayın. Sağ panel Özellikler moduna geçer. Panelin en üstünde, bileşenin adının sağında küçük bir rozet görürsünüz:
- Masaüstü
- Tablet
- Mobil
Bu rozet, üst araç çubuğundaki cihaz önizleme butonlarını takip eder. Yani tuvali mobil görünümüne aldığınızda rozet de Mobil olur. (Cihaz önizleme butonları için bkz. Tuval ve Önizleme)
Rozete tıkladığınızda küçük bir pencere açılır; asıl anahtar buradadır.
Adım adım: telefona özel bir değer verme
Örnek: Ana sayfadaki tanıtım başlığı bilgisayarda çok güzel duruyor ama telefonda taşıyor. Sadece telefonda küçültelim.
- Üst araç çubuğundan mobil cihaz butonuna tıklayın. Tuval telefon genişliğine daralır.
- Tuvalde başlık bileşenine tıklayın. Sağ panelde ayarları açılır.
- Panelin sağ üstündeki Mobil rozetine tıklayın.
- Açılan pencerede Yalnız bu breakpoint için anahtarını açın.
- Pencereyi kapatın ve yazı boyutunu küçültün (örneğin 48 → 28).
Bitti. Artık bu başlık bilgisayarda 48, telefonda 28 punto.
4. adımı atlarsanız değişikliğiniz masaüstü dahil tüm cihazları değiştirir. Rozete tıkladığınızda açılan pencere zaten bunu yazar: "Değişikliklerin nereye kaydedileceğini seçin."
"Yalnız bu breakpoint için" anahtarı
Bu anahtar, o andan sonra yaptığınız değişikliklerin nereye yazılacağını belirler.
| Anahtar | Yaptığınız değişiklik nereye gider? |
|---|---|
| Kapalı | Temel değere — yani tüm cihazlara. |
| Açık | Yalnızca o an seçili cihaza (tablet veya mobil). |
Masaüstü görünümündeyken bu anahtar kullanılamaz ve şu açıklama görünür: "Masaüstünde bu seçenek yoktur — masaüstü zaten temel değerdir." Bu bir hata değildir; masaüstü zaten herkesin kullandığı taban olduğu için "yalnız masaüstü için" diye bir şey yoktur.
Anahtar bileşene değil, çalışma şeklinize aittir: bir kez açtığınızda, siz kapatana kadar o cihazda yaptığınız tüm düzenlemeler o cihaza özel kaydedilir.
Bir ayarın cihaza özel olduğunu nasıl anlarım?
Sistem bunu iki yerde gösterir.
1) Ayarın kendi üstünde. Cihaza özel değer verilmiş her ayarın üzerinde küçük bir etiket belirir:
Mobil özel
Yanındaki geri alma simgesine tıklarsanız yalnızca o ayarın cihaza özel değeri silinir ve ayar masaüstündeki değere geri döner.
2) Cihaz rozetinin üstünde. Rozet, o cihaz için kaç ayarın farklılaştığını sayı olarak gösterir. Örneğin Mobil ③ demek, bu bileşende mobil için 3 ayrı ayar tanımlanmış demektir.
Cihaza özel ayarları geri alma
İki seçeneğiniz var:
| Ne yapmak istiyorsunuz? | Nasıl? |
|---|---|
| Tek bir ayarı geri al | Ayarın üstündeki Mobil özel etiketinin yanındaki geri alma simgesine tıklayın. |
| O cihazdaki tüm farkları temizle | Cihaz rozetine tıklayın → açılan pencerede Sıfırla butonuna basın. |
Rozet penceresinde ayrıca bir özet görürsünüz: "3 alan mobil için farklı" ve altında "Bu bileşenin mobil özel değerlerini kaldır."
Sıfırla, o bileşenin o cihaza ait tüm özel değerlerini siler; tek tek seçemezsiniz. Sadece bir ayarı geri almak istiyorsanız yukarıdaki birinci yolu kullanın.
Geri aldığınızda ayar silinmez — masaüstündeki değeri kullanmaya döner.
Hangi ayarlar cihaza göre değiştirilebilir?
Bileşenin Özellikler panelinde gördüğünüz ayarların neredeyse tamamı için cihaza özel değer verebilirsiniz: yazı boyutu, renkler, kenar boşlukları, hizalama, görseller, metinler ve diğerleri.
Pratikte en çok işe yarayanlar: yazı boyutu, boşluk/dolgu, sütun boşluğu ve hizalama. Telefonda sorun çıkaran şey genelde bu dördüdür.
İstisna — yapı alanları cihaza göre değişmez. Izgaranın Sütun Sayısı ve Sütun İçerikleri, Sekmeler'in Sekme İçerikleri ve Karusel'in Slayt İçerikleri her cihazda aynıdır. Bu alanları tablet/mobil kipinde düzenlerseniz de değer masaüstü tabanına yazılır; panelde bunu söyleyen bir not görürsünüz. Tablet ve mobil sütun sayısı için ızgaranın kendi Tablet Sütun ve Mobil Sütun alanlarını kullanın. Nedeni: blokların hangi sütunda durduğu cihazlar arasında ayrışırsa bazı bloklar bir cihazda görünüp diğerinde kaybolabilir. Bir bloğu yalnız belirli bir cihazda gizlemek istiyorsanız o bloğun Görünürlük ayarındaki Mobilde gizle / Tablette gizle / Masaüstünde gizle seçeneklerini kullanın.
Aynı istisna, ızgaranın Sütun Düzeni ve Stili alanı için de geçerlidir. Bu alan tek bir yerden yönetilir; masaüstü, tablet ve mobil değerlerini alanın içindeki ilgili satırlardan verirsiniz. Yani sütun genişliğini mobilde değiştirmek için cihaz kipine geçmenize gerek yoktur — alanın içindeki Mobil satırını doldurursunuz.
Izgaranın sütun sayısını azaltırsanız (ör. 3 → 2), kaldırılan sütunlarda kalan bloklar silinmez: kalan son sütunun sonuna taşınır ve vitrinde de orada görünür. Yani sütun sayısını düşürerek blok gizleyemezsiniz; gizlemek için bloğun kendi Görünürlük ayarını ya da aktif/pasif anahtarını kullanın.
Bir sütunu telefonda öne almak istiyorsanız blokları taşımayın: ızgaranın Sütun Düzeni ve Stili alanındaki Sıra değerini kullanın. Sütun içerikleri yerinde kalır, yalnız görünme sırası değişir. (Ayrıntı için bkz. Özellikler Paneli (Sağ Panel) → Grid)
Sık sorulanlar
Değişikliğim telefonda görünmüyor. Büyük ihtimalle Yalnız bu breakpoint için anahtarı kapalıyken düzenleme yaptınız ve değer tabana yazıldı — bu durumda her cihazda aynı görünür. Anahtarı açıp değeri tekrar girin.
Masaüstünü değiştirdim, telefon da değişti. Doğru davranış budur. Telefon için ayrı bir değer tanımlamadıysanız masaüstünü takip eder. Telefonun bağımsız olmasını istiyorsanız ona özel değer verin.
Telefon için bir değer verdim, sonra masaüstünü değiştirdim. Telefon etkilendi mi? Hayır. Bir ayarı cihaza özel yaptıysanız, o ayar artık masaüstünden bağımsızdır. Bağı geri kurmak için o ayarı geri alın.
Tablet için ayar yaptım, telefon da düzeldi mi? Hayır. Mobil, tabletten devralmaz; doğrudan masaüstüne bakar. Telefon için ayrıca ayar yapmalısınız.
Bu ayarları mağazamda görmek için ne yapmalıyım? Tema editöründeki diğer değişiklikler gibi Yayınla demeniz gerekir. Tuvalde görmeniz yeterli değildir.
Bileşeni telefonda hiç göstermek istemiyorum. O zaman cihaza özel ayar değil, Görünürlük ayarındaki Mobilde Gizle seçeneğini kullanın (bkz. Özellikler Paneli (Sağ Panel)).
Kaç cihaz var? Üç: Masaüstü (taban), Tablet ve Mobil. Ara değerler tanımlayamazsınız.
İlgili sayfalar
- Özellikler Paneli (Sağ Panel) — Özellikler panelindeki tüm ayar türleri ve Görünürlük kontrolü.
- Tuval ve Önizleme — Cihaz önizleme butonları ve tuval.
- Üst Araç Çubuğu — Üst araç çubuğu ve Yayınla.
- Tema Editörü — Genel Bakış — Tema Editörü genel bakış.
Bu sayfa faydalı oldu mu?