Studio Editor: Ögelerinizin Boyutlarını Ayarlama

8 dakikalık okuma
Bir siteyi tasarlarken, her ekran boyutunda harika göründüğünden emin olmak istersiniz. Studio Editor'de, boyutlandırmayı px* olarak ayarlarsınız, gerisini duyarlı davranış halletsin. 
Her ögenin varsayılan bir davranışı vardır (ör. Orantılı olarak ölçekle) bu işlemin ardından diğer ekranlarda yeniden boyutlandırılma şeklini kontrol edin. Varsayılan davranışı her zaman ihtiyaçlarınızı daha iyi karşılayan bir davranışla değiştirebilirsiniz.
px* sayfanın düzenleme boyutuna göre değişken boyut birimidir.
Bu makalede, Studio Editor'de boyutlandırmanın nasıl çalıştığını öğrenin:
İpucu:
Ögenin boyutunu ve duyarlı davranışını kesme noktasına göre ayarlayabilirsiniz. 

Ögeleri yeniden boyutlandırma

Tuvalde bir öge seçin ve küçültmek veya büyütmek için yan tutmaçları sürükleyin. Bu, ögenin geçerli kesme noktasında nasıl görüneceğini belirler. 
Denetçi panelinde, ögenin piksel cinsinden tam genişliğini ve yüksekliğini kontrol edebilirsiniz. Gerekirse kendi genişlik / yükseklik değerlerinizi girebilirsiniz. 
Denetçi şunları sizin için hesaplasın:
Boyut değerlerini yazarken kolaylık olması için toplama ( + ), çıkarma ( - ), çarpma ( * ) ve bölme ( / ) kullanabilirsiniz. Örneğin, geçerli genişliğin yanına *3 ekleyerek bir ögeyi 3 kat genişletebilirsiniz.   
Tuvaldeki bir ögeyi yeniden boyutlandırmak için sürükleme tutamaçlarının nasıl kullanılacağını gösteren bir GIF

Medya ögelerini yeniden boyutlandırma

Görüntü veya video gibi bir medya ögesini yeniden boyutlandırırken, genişlik ve yüksekliğin her zaman birbiriyle orantılı kalması için en boy oranını kilitleyebilirsiniz. 
Bu, genişliği değiştirdiğinizde, ögenin orijinal şeklini korumak için yüksekliğin otomatik olarak ayarlandığı (veya tam tersi) anlamına gelir.
Tuvaldeki bir ögenin yeniden boyutlandırılmasının nasıl göründüğünü gösteren bir GIF

En boy oranını kilitlemek için:

  1. İlgili medya ögesini seçin.
  2. Denetçiyi Aç okuna tıklayın.  simgesine tıklayın.
Paneli açmak için Studio Editor'da tıkladığınız Denetçiyi Aç oku
  1. Boyut'un altındaki En boy oranını kilitle simgesine tıklayın.
Herhangi bir medya ögesi için Denetçi'de tıklayabileceğiniz en boy oranı simgesinin ekran görüntüsü
  1. Ögeyi aşağıdakilerden birini kullanarak yeniden boyutlandırın:
    • Denetçi'ye genişlik / yükseklik değerini girme (diğer değer otomatik olarak ayarlanır).
    • Tutamaçları tuvaldeki ögenin etrafındaki sürükleme.
Not:
Bu seçenek, gelişmiş boyutlandırma modunda kullanılamaz. 

Boyutu px* cinsinden ayarlama

px*, Studio Editor'da değişken bir ölçü birimidir. Arka plandaki gerçek ölçüm duyarlıyken, tanıdık bir ölçümü (piksel) kullanarak boyutlandırmayı düzenlemenize olanak tanır.
Başka bir deyişle, tuval üzerindeki boyutu temsil eden piksellerle tasarım yaparsınız ve ögeler duyarlı kalır. Belirli değerler ve boyut birimleri, seçtiğiniz duyarlı davranışa bağlıdır. Hesaplamayı ve kullanılan duyarlı boyut birimini görmek için px*'in üzerine gelin.
Aşağıdaki örnekte, kapsayıcının mevcut tuval üzerindeki genişliği 1000 px* olur. Gerçek birim yüzdedir, bu nedenle genişlik her ekrana göredir (%79.1).
Denetçi'de px* üzerinde gezinildiğinde gerçek hesaplamanın bulunduğu bir pop-up penceresi açıldığını gösteren ekran görüntüsü
Px* ve px arasındaki fark nedir?
Her ikisi de piksel cinsinden düzenleme yapmanıza izin verir:
  • Px*, gördüğünüz boyutun şu anda üzerinde çalıştığınız kesme noktasıyla ilgili olduğu anlamına gelir. 
  • Px , boyutun tüm kesme noktalarında sabit olduğu anlamına gelir.

Bir ögenin duyarlı davranışını seçme

Sayfaya bir öge eklediğinizde, öge zaten yerleşik bir duyarlı davranışla gelir. Bu, ögenin farklı ekranlarda nasıl göründüğü konusunda endişelenmenize gerek olmadığı anlamına gelir; duyarlı davranış, yeniden boyutlandırılmasını sağlar. 
Bununla birlikte, tasarımınız için daha uygun bir davranış görürseniz, duyarlı davranışı değiştirmek isteyebilirsiniz. 
Not:
Seçtiğiniz duyarlı davranış, kullanımdaki boyutlandırmayı etkiler. Örneğin, Sabit duyarlı davranışın seçilmesi, ölçümü px*'den px'e değiştirir.

Farklı bir duyarlı davranış seçmek için:

  1. İlgili kesme noktasını seçin.
  2. Ögeyi seçin. 
  3. Editörün sağ üst köşesindeki Denetçiyi Aç simgesine  tıklayın.
Paneli açmak için Studio Editor'da tıkladığınız Denetçiyi Aç oku
  1. Duyarlı davranış açılır menüsünden bir seçenek belirleyin.
Duyarlı Davranış açılır menüsünün ve mevcut seçeneklerin açık olduğu bir GIF

Gelişmiş boyutlandırmayı kullanma

Gelişmiş boyutlandırma, kesme noktası başına ögenin boyutunun daha derinden özelleştirilmesine olanak tanır. Bu mod, px* ile çalışmak ve duyarlı bir davranış seçmek yerine, perde arkasında kullandığımız ölçümleri (ör. px, %, vh) görmenizi ve bunları ihtiyaçlarınıza göre ayarlamanızı sağlar.
Gelişmiş boyutlandırmanın etkinleştirilmesi, tüm kesme noktalarında seçtiğiniz belirli öge için geçerlidir. Gelişmiş boyutlandırma modu, kolay erişim için o öge için etkin kalır ama bunu istediğiniz zaman devre dışı bırakabilirsiniz.

Gelişmiş boyutlandırmaya erişmek ve düzenlemek için:

  1. Editörde ilgili kesme noktasını seçin.
  2. Ögeyi seçin. 
  3. Denetçiyi Aç okuna tıklayın.  simgesine tıklayın.
Paneli açmak için Studio Editor'da tıkladığınız Denetçiyi Aç oku
  1. Boyut'un yanındaki Diğer Eylemler simgesine tıklayın.
  2. Gelişmiş Boyut geçiş düğmesini etkinleştirin.
  3. Boyutlandırmayı gerektiği gibi düzenleyin: Genişlik, yükseklik ve minimum ve maksimum değerler.
    İpucu: Denetçi'de bu birime tıklayarak farklı bir birime (ör. px'den %'ye) geçin. Bu, öge için kullanılabilir ölçülerin bir listesini açar.
Denetçi'de birine tıkladığınızda açılan ölçüm listesini gösteren GIF
Bölüm yüksekliğini ayarlama:
Ögelerin istendiği gibi görüntülenmemesine neden olabileceği için yüksekliği piksel cinsinden ayarlamanızı önermiyoruz. Örneğin, taşabilir veya kırpılmış görünebilir. 

Boyutlandırma tercihini ayarlama

Tasarladığınız site için boyutlandırma tercihinizi belirleyin. Gelişmiş CSS ölçümleriyle çalışmaktan hoşlanıyorsanız editörde gelişmiş boyutlandırmayı etkinleştirebilirsiniz. Alternatif olarak, eğer öge başına boyutlandırma modunu seçmeyi tercih ederseniz, bu şekilde tutabilirsiniz.

Bir sitenin boyutlandırma tercihini ayarlamak için:

  1. Sağ üstteki Wix Studio simgesine  tıklayın.
  2. Görünüm'ün üzerine gelin.
  3. Boyutlandırma Tercihi'nin üzerine gelin.
  4. Tercihinizi belirleyin:
    • Her Zaman Gelişmiş'i Göster: Denetçi'deki boyutlandırma her zaman gelişmiş olarak ayarlanır.
      Not: Bu mod, belirli ögeleri gelişmiş boyutlandırmadan geri alma seçeneğini devre dışı bırakır.  
    • Öge başına ayarla: Her ögenin boyutlandırma tercihini siz belirlersiniz. 
Boyutlandırma tercihini kontrol edebileceğiniz Studio Editor'daki üst menünün ekran görüntüsü

SSS

Boyutlandırma hakkında daha fazla bilgi edinmek için aşağıdaki sorulara tıklayın.

Bu içerik yardımcı oldu mu?

|