Wix Yardım Merkezi
  1. Ana Sayfa
  2. Studio, Uzmanlar ve Kurumsallar
  3. Wix Studio
  4. Studio Editor'u Kullanma
  5. Designing in the Studio Editor
  6. Building a responsive site
  7. 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
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
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.
Px* nedir?
px* (Ölçek) yerleştirme, kenar boşlukları ve dolgu için varsayılan ölçü birimidir. Gördüğünüz px* değeri mevcut tuval boyutunuzdaki 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. 
Ek Wix Studio web seminerlerine, eğitimlerine ve kurslarına göz atmak için Wix Studio Akademisi'ne gidin.

Ö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

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. İlgili kenar boşluğu (sol, sağ, üst veya alt) için bir değer girin.
Editör ve Denetçi panelinde kenar boşlukları alanının vurgulandığı bir kapsayıcı
Boyut birimini hızlı bir şekilde değiştirin:
Başka bir boyuta geçmek için geçerli boyut birimine tıklayın. Aynı birimi tüm kenarlara aynı anda uygulayabilir veya her bir kenar için farklı bir birim seçebilirsiniz.

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. 
Dolguyu ekledikten sonra sürükle ve bırak özelliğini kullanarak doğrudan tuval üzerinde ayarlayabilirsiniz. Duyarlı kapsayıcıyı seçin ve dolgunun üzerine gelin.

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ı kaydırarak Düzen'e gidin. 
  2. Düzenlemek istediğiniz dolgu malzemesini seçin:
    • Belirli bir taraf : Simgeye tıklayın ve ilgili kenar(lar) için bir değer girin (sol, sağ, üst veya alt).
    • Yatay dolgu : Sol ve sağ dolgu için bir değer girin. 
    • Dikey dolgu : Üst ve alt dolgu için bir değer girin. 
Tuvaldeki bir kapsayıcının Denetçi panelindeki dolgu ayarlarının yanındaki ekran görüntüsü
Boyut birimini hızlı bir şekilde değiştirin:
Başka bir boyuta geçmek için geçerli boyut birimine tıklayın. Aynı birimi tüm kenarlara aynı anda uygulayabilir veya her bir kenar için farklı bir birim seçebilirsiniz. 

Ö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

Bu içerik yardımcı oldu mu?

|