Studio Editor: Ögeleri Konumlandırma
6 dakikalık okuma
Cihazların sürekli değiştiği dünyada, farklı ekran boyutlarında tam istediğiniz gibi görünmelerini sağlamak için ögelerinizin konumlarını kontrol etmek çok önemlidir. Studio Editor'da, ögeler bunun olmasını sağlamak için otomatik olarak yanaştırılır.
Bu size kesme noktaları arasında konumlandırma konusunda endişelenmenize gerek kalmadan ögeleri hareket ettirme özgürlüğü verir. Ancak, Denetçi panelinden konumu, yerleştirmeyi ve kenar boşluklarını her zaman kendiniz ayarlayabilirsiniz.
Bu makalede bilgi edinebileceğiniz konular:
Ögeleri tuval üzerinde konumlandırma
Sürükle ve bırak özelliğini kullanarak, her kesme noktası için ögenizin konumunu doğrudan tuval üzerinde ayarlayabilirsiniz. Bu, ögenin her ekranda gerçekten yerinde görünmesini sağlamanızı sağlar.
Öge aynı üst kapsayıcı içinde kaldığı sürece (ör. bölüm, hücre), onu hareket ettirebilirsiniz, diğer kesme noktalarını etkilemez. Bir ögeyi farklı bir üst üste (yeniden üst öge yaparsanız) taşırsanız, tüm kesme noktalarına uygulanır.
Denetçi'deki X ve Y koordinatları
Geçerli tuval boyutundaki tam konumunu görmek için ögenizin X ve Y koordinatlarını kontrol edebilirsiniz.
- X: Üst ögenin (ör. bölüm, kapsayıcı, yığın) sol kenarından sağ kenarına kadar olan yatay düzlem.
- Y: Üst ögenin üstünden altına kadar olan dikey düzey.
Aşağıdaki örnekte, metin ögesini üst ögesi olan hücrenin dışına taşıdığımızda px* değerinin negatife dönüştüğünü görebilirsiniz.
Px* nedir?
Px*, Studio Editor'de "tuval üzerindeki pikselleri" gösteren bir ölçü birimidir. Gördüğünüz px* değeri, mevcut tuval boyutuyla ilgili piksel eşdeğeridir. px* değerinin otomatik olarak nasıl değiştiğini görmek için farklı bir kesme noktasına geçin.
Otomatik yanaştırma
Yeni bir öge eklediğinizde otomatik olarak her iki ögeye de yanaştırılır:
- Üst ögenin üst kısmı (ör. bölüm, konteyner, yığın).
- Üst ögenin sol veya sağ kenarı; hangisi en yakınsa.
Otomatik yerleştirme, ögenin tüm ekranlarda ve cihazlarda yerinde kalmasını sağlar. Ögeleri serbestçe taşıyabilirsiniz ve yerleştirme noktaları size göre ayarlanır; "yeniden yerleştirmenize" gerek kalmaz.
Yerleştirme konumu ögeye bağlanan noktalı çizgilerle ve Denetçi panelindeki (Konum) yerleştirme noktalarıyla belirtilir. Aşağıdaki örnekte, metin ögesi otomatik olarak hücrenin üst ve sağ kenarlarına yerleştirilir.
İpucu:
Varsayılan olarak, Ögeyi otomatik yuvala onay kutusu seçilidir. Her zaman seçimini kaldırabilir ve yerleştirmeyi manuel olarak ayarlayabilirsiniz.
Ögeyi manuel olarak yanaştırma
Otomatik yerleştirmeyi geçersiz kılabilir ve bunu Denetçi panelinden manuel olarak ayarlayabilirsiniz. Bu, örneğin bir ögeyi üst yerine aşağıya yerleştirmek istediğinizde kullanışlıdır.
Ögeyi herhangi bir tarafa yerleştirme; bölümün, kapsayıcının veya hücrenin üstüne, altına, soluna, sağına ve hatta ortasına uzanır.
Bir ögeyi manuel olarak yerleştirmek için:
- İlgili ögeyi seçin.
- Editörün sağ üstündeki Denetçiyi Aç okuna
tıklayın. - Sayfayı aşağı kaydırarak Konum'a tıklayın.
- İlgili yerleştirme noktalarına (üst, alt, sağ veya sol) tıklayın. Alternatif olarak, Ortaya hizala simgesine
tıklayın. Böylece öge her zaman merkezde olur.
Not:
Bu, Ögeyi otomatik yuvala onay kutusunun seçimini otomatik olarak kaldırır.
Ögeleri yerleştirirken kenar boşluklarını kullanma
Öge yerleştirildiğinde kenar boşlukları öge ile üst ögenin kenarları arasında belirli bir mesafe kalmasına yardımcı olur. Sabitlenmemiş kenarlara da kenar boşlukları ekleyebilirsiniz. Kenar boşlukları bir tampon işlevi görerek diğer ögelerle çakışmaları önler.
Aşağıdaki örnekte, metin ögesi hücrenin üst ve sağ kenarlarına sabitlenmiştir. Denetçi panelindeki kenar boşluklarının üzerine gelindiğinde, kenar boşlukları tuvalde vurgulanır:
Kenar boşluğu oluşturmak veya düzenlemek için:
- İlgili ögeyi seçin.
- Editörün sağ üstündeki Denetçiyi Aç okuna tıklayın.
- Sayfayı aşağı kaydırarak Konum'a tıklayın.
- Yerleştirme, kenar boşlukları ve dolgu'nun altından bir kenar boşluğuna (ör. üst, sol) tıklayın.
- Kenar boşluğu için bir değer girin.
İpucu: Boyut'a tıklayarak (ör. px, %) değiştirin. Ögelerinizi her ekran boyutunda tutarlı bir şekilde konumlandırmak için yüzde (%) kullanmanızı öneririz. - (İsteğe bağlı) Tüm kenarlarda aynı kenar boşluğunu ayarlamak için Tüm kenarları düzenle simgesine
tıklayın.
Kenar boşluğu birimleri:
Kenar boşlukları piksel (px), yüzde (%), görüntü alanı yüksekliği (vh) ve görüntü alanı genişliği (vw) cinsinden ayarlanabilir. Ekran yeniden boyutlandırıldığında her birimin farklı bir sonucu olur. Ölçü birimlerinin davranışları arasındaki farkı görmek için tuvalinizi sürükleyerek yeniden boyutlandırın.
Ögelerin üst üste binmesini önleme
Ögeleri konumlandırırken daha küçük ekran boyutlarında üst üste binmediklerinden emin olmak önemlidir. Bunun önüne geçmek için aşağıdaki ipuçlarına göz atın.
En üste yerleştirme
Ögelerinizi bulundukları kapsayıcının, bölümün veya kılavuz hücresinin üst kenarına yanaştırmak genellikle iyi bir fikirdir. Böylece sayfanıza daha fazla içerik eklendiğinde öge ile kapsayıcı/bölüm arasında sürekli olarak tanımlı bir boşluk bırakılır.
Düzeni düzenlemek için hücre ekleme
Daha karmaşık düzenlerde bölümü düzenlemek için hücreler ekleyin. Ögeleri kendi hücrelerinin içine yerleştirip kılavuz çizgilerinden birine sabitlemek her ekran boyutunda mükemmel şekilde konumlandırılmalarını sağlar.
Yığın uygulama
Bir öğe grubunu yatay veya dikey yığına koymak, bunların çakışmamasını sağlar. Yığınlar, farklı ekran boyutlarına göre otomatik olarak ayarlanan esnek bir kapsayıcıdır. Sadece ögeler arasındaki boşlukları ayarlamanız gerekir.
Negatif kenar boşlukları kullanarak, ögelerin bir yığında üst üste binmesini sağlayabilirsiniz. Bu, ögeleri diğer ögelerin önüne yerleştirerek daha karmaşık bir tasarım oluşturmanıza olanak tanır.
Bu içerik yardımcı oldu mu?
|