Studio Editor: Ögelerinizin Boyutlarını Ayarlama
7 dakikalık okuma
Bir siteyi tasarlarken, ögelerin her ekran boyutunda harika göründüğünden emin olmak istersiniz. Studio Editor'de piksel cinsinden boyutu düzenlersiniz, gerisini duyarlı davranış halletsin.
Her öge varsayılan olarak bir davranışla eklenir (ör. Orantılı olarak ölçekle), bu davranış diğer ekranlarda ögenin yeniden boyutlandırılma şeklini kontrol eder. Denetçi panelinden, bir ögenin duyarlı davranışını ihtiyaçlarınızı daha iyi karşılayan bir davranışla değiştirebilirsiniz.
Ek Wix Studio web seminerlerine, eğitimlerine ve kurslarına göz atmak için Wix Studio Akademisi'ne gidin.
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.
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.
En boy oranını kilitlemek için:
- İlgili medya ögesini seçin.
- Denetçiyi Aç okuna tıklayın.
simgesine tıklayın.
- Boyut'un altındaki En boy oranını kilitle simgesine
tıklayın.
- Ö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'de 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).
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:
- Editörde ilgili kesme noktasını seçin.
- Ögeyi seçin.
- Denetçiyi Aç okuna tıklayın. simgesine tıklayın.
- Duyarlı davranış açılır menüsünden bir seçenek belirleyin.
Gelişmiş boyutlandırmayı kullanma
Gelişmiş boyutlandırma, kesme noktası başına ögenin boyutunun daha derinden özelleştirilmesine olanak sağlar. Bir öge için gelişmiş boyutlandırmayı etkinleştirdiğinizde, kullandığımız ölçümleri görür ve bunları ihtiyaçlarınıza göre ayarlarsınız.
Bu, pikseller yerine duyarlı birimlerle çalışabileceğiniz ve yepyeni bir dizi olasılıkla çalışabileceğiniz anlamına gelir.
Mevcut ölçüler nelerdir?
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 min. ve maks. değerler. İpucu: Denetçi'de ilgili birimi tıklayarak farklı bir birime (ör. px'den %'ye) geçin. Bu, öge için mevcut ölçülerin bir listesini açar.
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ş Göster: Denetçi'deki boyutlandırma her zaman gelişmiş olarak ayarlanmıştı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.
- Her Zaman Gelişmiş Göster: Denetçi'deki boyutlandırma her zaman gelişmiş olarak ayarlanmıştır.
Bu içerik yardımcı oldu mu?
|