Studio Editor: Ögelerinizin Boyutlarını Ayarlama

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.

Hangi medya ögelerinde bu seçenek bulunur?

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:

İlgili medya ögesini seçin.
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

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ü

Ö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.

Mevcut davranışlar arasındaki farklar neler?

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:

İlgili kesme noktasını seçin.
Ögeyi seçin.
Editörün sağ üst köşesindeki Denetçiyi Aç simgesine tıklayın.

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.

Mevcut ölçüler nelerdir?

Şunları kullanmayı tercih edebilirsiniz:

Piksel (px): Ögenizin her ekran boyutunda tam olarak aynı kalmasını istiyorsanız, yüksekliğini ve genişliğini px değerleri olarak ayarlamanız yeterlidir.
Yüzde (%): Ögenin genişlik / yükseklik değeri üst ögenin boyutlarına bağlıdır. Bu seçim ögenin üst ögesiyle orantılı olarak yeniden boyutlandırılmasını sağlar.
- Örneğin bir metin ögesini (alt) konteynere (ana) sabitleyebilir ve genişliğini %50 olarak belirleyebilirsiniz. Bu şekilde, metniniz ekran boyutundan bağımsız olarak her zaman kapsayıcının genişliğinin %50'sini kaplar.
Görüntü alanı genişliği ve yüksekliği (vw ve vh): Bu ölçüler, belirli bir görünümün (tarayıcının) genişliğini ve yüksekliğini temsil eder.
- Örneğin, 1vw genişliği = tarayıcının genişliğinin %1'i.
Maksimum İçerik (maks-c): Bu ölçümü bir ögenin genişliğini ayarlamak ve içerik ne kadar büyük olursa olsun veya kaç kelime içerdiğinden bağımsız olarak alt ögelerin boyutuna bağlı hale getirmek için kullanabilirsiniz. Üst öge kendisini içeriğe sığdırır.
Hesaplama: Temel matematik ilkelerini kullanarak, bir ögenin genişliğini veya yüksekliğini belirleyen bir "formül" yazabilirsiniz. Bu hesaplamada farklı ölçümleri bile birleştirebilirsiniz (ör. vh ve px).
- Örneğin, bir başlık ve bir bölümün tüm görüntü alanı yüksekliğini (100vh) kaplamasını sağlayabilirsiniz. Başlık yüksekliği 100px olarak ayarlanırsa, bölüm yüksekliği için hesaplama şu şekilde olur: (100vh - 100px). Bu, başlık yüksekliğini görüntü alanından çıkarır.

Otomatik genişlik ve yükseklik

Bazı ögeler için genişlik veya yükseklik zaten Otomatikolarak ayarlanmıştır. Bu, ögenin içeriğinin genişliği/yüksekliği belirlediği anlamına gelir ve yeniden boyutlandırma konusunda endişelenmeden içerik eklemenize veya kaldırmanıza olanak tanır.

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:

Editörde ilgili kesme noktasını seçin.
Ögeyi seçin.
Denetçiyi Aç okuna tıklayın. simgesine tıklayın.

Boyut'un yanındaki Diğer Eylemler simgesine tıklayın.
Gelişmiş Boyut geçiş düğmesini etkinleştirin.
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:

Sağ üstteki Wix Studio simgesine tıklayın.
Görünüm'ün üzerine gelin.
Boyutlandırma Tercihi'nin üzerine gelin.
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.

Orantılı olarak ölçeklenecek bir bölüm ayarladım ama ögeler ölçeklenmiyor. Neden?

Gelişmiş boyutlandırmayı ne zaman kullanmalıyım?