Wix Yardım Merkezi
    Ana Sayfa
  1. Studio, Uzmanlar ve Kurumsallar
  2. Wix Studio
  3. Studio Editor'u Kullanma
  4. Studio Editor'da Tasarım
    5. Studio Editor: Yerleştirme, Kenar Boşlukları ve Dolgu İle Çalışma

Studio Editor: Yerleştirme, Kenar Boşlukları ve Dolgu İle Çalışma

8 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.
Ek Wix Studio web seminerlerine, eğitimlerine ve kurslarına göz atmak için Wix Studio Akademisi'ne gidin.
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. 
Bir ögenin başka bir üst hücreye sürüklenirken ekran görüntüsü ve tüm kesme noktalarını etkilediğine dair bildirim

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. 
Denetçi'de negatif bir X değeri oluşturarak, üst hücresinin dışına taşınan bir metin ögesini gösteren bir GIF
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 ve manuel yerleştirme

Editöre yeni bir öge eklerken, tüm ekranlarda ve cihazlarda yerinde kalmasını sağlamak için otomatik olarak yanaştırılır. Ancak, otomatik yerleştirmeyi her zaman devre dışı bırakabilir ve yerleştirme noktalarını manuel olarak seçebilirsiniz.
Daha fazla bilgi edinmek için aşağıdaki konulardan birine tıklayın.

Ö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: 
Denetçi'de üst ve sağ kenar boşluklarının üzerinde gezinen bir imleç ve bunların tuval üzerinde vurgulanma şeklini gösteren bir GIF

Kenar boşluğu oluşturmak veya düzenlemek için:

  1. İlgili ögeyi seçin.
  2. Editörün sağ üst köşesindeki Denetçiyi Aç simgesine  tıklayın.
Studio Editor'da Denetçi panelinin açılmasına ilişkin ekran görüntüsü.
  1. Sayfayı aşağı kaydırarak Konum'a tıklayın.
  2. Yerleştirme, kenar boşlukları ve dolgu'nun altından bir kenar boşluğuna (ör. üst, sol) tıklayın.
  3. (İsteğe bağlı) Yalnızca seçtiğiniz tarafı düzenlemek için Tek tek düzenle simgesine tıklayın.
  4. Kenar boşluğu için bir değer girin.
    İpucu: Boyut'a tıklayarak (ör. px*, %) değiştirin.
Bir ögenin çevresine kenar boşlukları oluşturabileceğiniz Konum kutusunun ekran görüntüsü
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.

Duyarlı konteynerlerin çevresine dolgu ekleme

Kenarlar (üst, alt veya yanlar) ile içindeki içerik arasında boşluk oluşturmak için kapsayıcılara dolgu ekleyin. Temel kapsayıcılar, yığınlar, esnek kutular, tekrarlayıcılar, hücreler, bölümler ve sayfalar dahil olmak üzere her türlü duyarlı kapsayıcıya dolgu eklenebilir. 

Dolgu eklemek için:

  1. İlgili ögeyi seçin.
  2. Editörün sağ üst köşesindeki Denetçiyi Aç simgesine  tıklayın.
Studio Editor'da Denetçi panelinin açılmasına ilişkin ekran görüntüsü.
  1. Sayfayı aşağı kaydırarak Konum'a tıklayın.
  2. Duyarlı kapsayıcının türüne bağlı olarak dolgu ekleme adımlarını izleyin:
Studio Editor'da bir Yığın ögesinin tüm kenarlarına %4 dolgu ekleme
Sırada ne var?
Sürükle ve bırak özelliğini kullanarak dolguyu doğrudan tuval üzerinde ayarlayabilirsiniz. Duyarlı kapsayıcıyı seçin ve bu seçeneği görmek için dolgunun üzerine gelin.

Ö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. 
Şimdilik, ögeler arasında istenmeyen çakışmalar görüyorsanız, sorunu gidermek için bu eğitim videosunu izleyin. 

Bu içerik yardımcı oldu mu?

|
Bu makalede
  • Ögeleri tuval üzerinde konumlandırma
  • Denetçi'deki X ve Y koordinatları
  • Otomatik ve manuel yerleştirme
  • Ögeleri yerleştirirken kenar boşluklarını kullanma
  • Duyarlı konteynerlerin çevresine dolgu ekleme
  • Ögelerin üst üste binmesini önleme