Müşterinizin sitesinin farklı kesme noktalarındaki görünümünde sorunlarla mı karşılaşıyorsunuz? Studio Editor size farklı ekran boyutlarında üst üste binen, yanlış yerleştirilmiş veya yanlış hizalanmış ögeler gibi yaygın duyarlılık sorunlarının üstesinden gelmenizi sağlayacak araçlar sunar. Doğru ayarlamalarla tüm cihazlarda harika görünen şık ve profesyonel bir site oluşturabilirsiniz.
Belirli kesme noktalarında çok küçük görünen metin
Müşterinizin sitesini daha küçük ekranlarda görüntülediğinizde metinler çok mu küçük görünüyor? "Orantılı olarak ölçekle"
duyarlı davranışını ve "maks-min" ayarını kullanarak metninizin her ekran boyutunda her zaman ideal görünmesini sağlayabilirsiniz.
Metni seçin ve Denetçi panelini açın. Öncelikle, Duyarlı davranış alanını Orantılı Olarak Ölçekle olarak ayarlayın. Ardından, minimum ve maksimum yazı tipi boyutlarını ayarlamak için Tasarım'ın altından Maks-min'e tıklayın.
Kesme noktalarında yanlış yerleştirilmiş ögeler
Müşterinizin sitesindeki bir ögenin konumu farklı ekran boyutlarında beklenmedik bir şekilde değişiyorsa, bu muhtemelen yuvalanma ve kenar boşluğu ayarlarından kaynaklanıyordur. Aşağıdaki adımları izleyerek sorunu çözün ve ögelerinizin doğru konumda kalmasını sağlayın.
Ögenin yuvalanma düzenini kontrol edin
İlgili ögeyi seçin ve yuvalanma noktalarını (ör. üst, sol, vb.) kontrol edin. Yuvalanma yeri istenen konumla eşleşmiyorsa (ör. siz altta olmasını istediğiniz halde üste yuvalanmışsa), ekran boyutu değiştiğinde öge yer değiştirebilir.
Yuvalanma konumu, tuval üzerinde ögeye bağlanan noktalı çizgilerle ve Denetçi panelinde (Konum altındaki) yuvalanma noktalarıyla belirtilir. Denetçideki yuvalanma noktalarına tıklayarak seçebilir veya mevcut seçimi kaldırabilirsiniz.
Ögenin kenar boşluklarını ayarlayın
Kenar boşlukları, öge ile yuvalandığı kenarlar arasındaki mesafe olarak tanımlanır. Ekran boyutu değiştiğinde, kenar boşlukları ögeyi farklı yönlere "itebilir".
Örneğin, %60 kenar boşluğuyla üste yuvalanan bir öge, bölüm daraldığında (ayarlanan kenar boşluğu değerini korumak için) otomatik olarak yukarı taşınır. Kenar boşluklarını azaltmayı deneyebilir ve sonuçları test edebilirsiniz.
Yüzde cinsinden belirlenen kenar boşluklarının ekran boyutuna göre dinamik olarak ayarlanması beklenmedik değişimlere yol açabilir. Bu nedenle sabit bir boyut birimine (ör. piksel) geçmeyi değerlendirebilirsiniz.
(Sabit duyarlı davranışlı bölüm için) Ögelerin kenar boşluklarını piksel birimine dönüştürün
Bölümünüzün
duyarlı davranışını "Sabit" olarak ayarlarsanız, alt ögelerin kenar boşluklarını piksel cinsinden belirlemeye özen gösterin.
Yüzde gibi değişken kenar aralığı birimleri kullanmak, kenar boşluklarının ekran boyutuna göre artıp azalmasına yol açarak ögenin yer değiştirmesine neden olur. Piksel cinsinden kenar boşluklarına geçmek, ögeyle kenarlar arasındaki mesafenin (sayfanın genişliğine göre hesaplanmak yerine) her zaman sabit kalmasını sağlar.
Kesme noktalarında yanlış hizalanmış ögeler
Ekran boyutu değiştiğinde bölümünüzdeki ögelerin hizalamaları bozuluyorsa, bu genellikle tutarsız yuvalanma veya kenar boşluğu ayarlarından kaynaklanır.
Ögelerinizin tüm ekran boyutlarında doğru şekilde hizalanmasını sağlamak için aşağıdaki adımları izleyin.
Ögelerin aynı kenarlara yuvalandığından emin olun
Ögelerin yuvalanma ayarları çakışıyorsa, ekran boyutu değiştiğinde doğru şekilde hizalanmayabilirler.
Aynı bölümdeki ögelerin farklı yuvalanma ayarlarına sahip olup olmadığını kontrol edin. Örneğin, bir öge üst kenara yuvalanırken diğeri alt kenara yuvalanmış olabilir. Tüm ilgili ögelerin aynı üst kapsayıcı kenarına (örneğin, üst, alt) yuvalanmasını öneririz.
Yuvalanma konumu, tuval üzerinde ögeye bağlanan noktalı çizgilerle ve Denetçi panelinde (Konum altındaki) yuvalanma noktalarıyla belirtilir. Denetçideki yuvalanma noktalarına tıklayarak seçebilir veya mevcut seçimi kaldırabilirsiniz.
Aynı kenar boşluğu birimlerini kullanın
Kenar boşlukları temel olarak öge ile yuvalandığı kenarlar arasındaki mesafedir. Farklı birimler (ör. yüzde ve piksel) kullanmanız, ekran boyutu değiştiğinde ögelerin yanlış hizalanmasına neden olabilir.
Denetçi panelini açın ve Konum başlığı altından ögenin mevcut kenar boşluklarını kontrol edin. Farklı bir kenar boşluğu birimine geçmek için ilgili kenar boşluğunu seçin ve geçerli birime (ör. px*, px, %) tıklayın.
Ögeler arasındaki ilişkileri kontrol edin
İlk olarak, ögelerin aynı üst kapsayıcıda (ör. bölüm, hücre vb.) yer alıp almadıklarını doğrulamak için
Katmanlar panelini kontrol edin. Ögeler aynı üst kapsayıcıda yer alıyorsa ancak aralarında bir ilişki tanımlanmamışsa, bağımsız olarak hareket ederek üst üste binebilirler.
Ögeleri dikey veya yatay olarak
yığmak bu sorunu çözebilir, çünkü yığınlar ögelerin farklı ekran boyutlarında tutarlı bir şekilde hizalanmasını sağlar.
Kesme noktalarında üst üste binen ögeler
Editörde ögelerin kendi aralarında doğru şekilde konumlandıklarını ancak canlı siteyi farklı ekran boyutlarında kontrol ettiğinizde üst üste bindiklerini görebilirsiniz. Bu durum genellikle ögelerin yerleştirilme şeklinden veya duyarlı davranışlarından kaynaklanır.
Müşterinizin sitesindeki ögeler farklı ekran boyutlarında üst üste biniyorsa, sorunun kaynağını tespit etmek ve düzeltmek için aşağıdaki adımları izleyin.
Ögelerin konum ve yuvalanma düzenini kontrol edin
Ögeler aynı üst kapsayıcı içinde birbirinden bağımsız olarak konumlandırıldığında, ekran boyutu değiştikçe üst üste binebilirler. Tutarlılığı sağlamak için konum ayarlarını ve birimlerini gözden geçirin.
Her bir ögeye (ör. başlık, paragraf, düğme) tıklayın ve Denetçi panelinden konum bilgilerini kontrol edin. Ögelerin yuvalanma ve kenar boşlukları birimleri arasındaki farklılıkları bulmaya çalışın.
Bir ögenin kenar boşluğu birimi "yüzde" iken diğerinin "piksel" ise, üst kapsayıcı yeniden boyutlandırıldığında ögelerin konumları farklı şekilde değişir.
Ögelerin duyarlı davranışını ayarlayın
Üst üste binme durumu, ekran boyutu değiştiğinde ögelerin farklı şekilde davranmasından da kaynaklanabilir. Örneğin, bir öge orantılı olarak ölçeklenirken, bir diğeri sarmalanabilir ve üçüncüsü sabit kalabilir.
Her bir ögeye tıklayın ve Denetçi panelinden
duyarlı davranışını kontrol edin. Üst üste binmeye neden olabilecek farklı davranışlara sahip ögeleri bulmaya çalışın.
Ögeler arasındaki ilişkileri kontrol edin
İlk olarak, ögelerin aynı üst kapsayıcıda (ör. bölüm, hücre vb.) yer alıp almadıklarını doğrulamak için
Katmanlar panelini kontrol edin. Ögeler aynı üst kapsayıcıda yer alıyorsa ancak aralarında bir ilişki tanımlanmamışsa, bağımsız olarak hareket ederek üst üste binebilirler.
Ögeleri dikey veya yatay olarak
yığmak bu sorunu çözebilir, çünkü yığınlar ögelerin birbirlerine karşı konumlarının farklı ekran boyutlarında korunmasını sağlar.
