Studio Editor: Kesme Noktalarında Tasarlama
4 dakikalık okuma
Studio Editor, siteleri her zaman iyi görünecek şekilde kesme noktasına göre özelleştirmenize olanak sağlar. Kesme noktaları, ziyaretçilerin kullanma eğiliminde olduğu olası ekranları ve cihazları (ör. tablet, mobil) temsil eden ekran boyutu aralıklarıdır.
Masaüstünde tablet ve mobil cihazlara uygun tasarımlar da oluşturabilirsiniz. Ancak, tasarımı daha küçük ekranlara sığdırmak için geçersiz kılmalar oluşturabilirsiniz. Başlamak için en üstteki kesme noktası simgesine tıklayın.
Ek Wix Studio web seminerlerine, eğitimlerine ve kurslarına göz atmak için Wix Studio Akademisi'ne gidin.
Bu makalede bilgi edinebileceğiniz konular:
İpucu:
Müşterinizin sitesinin her sayfasındaki her kesme noktası için varsayılan bir düzenleme boyutu (ekran genişliği) ayarlayabilirsiniz.
Kesme noktalarını tanımlama
Studio Editor, istediğiniz zaman özelleştirebileceğiniz ve yeniden tanımlayabileceğiniz 3 yerleşik kesme noktasıyla birlikte gelir:
- Masaüstü: 1001 piksel ve üzeri
- Tablet: 751px - 1000px
- Mobil: 320px - 750px
Tasarımınızı belirli ekran boyutlarına göre daha hassas hale getirmek için en fazla 3 ek kesme noktası ekleyebilirsiniz.
Her site sayfası ve her genel bölüm için kesme noktalarını ayrı ayrı tanımlarsınız. Bu, bir bölümün ve bulunduğu sayfanın tamamen farklı kesme noktalarına sahip olabileceği anlamına gelir.
Örneğin, aşağıdaki sayfada tanımlanmış 5 kesme noktası var:
... Bu sayfadaki genel üst bilgide tanımlanmış 3 kesme noktası bulunur:
İpucu:
Bir site ziyaretçisinin gördüğü kesme noktası, görüntü alanı genişliklerine bağlıdır. Örneğin, bir iPad Pro kullanıcısı (yani 1024 piksel genişliğinde) masaüstü kesme noktasını (1001 piksel ve üzeri) görecektir. Bu, her modun farklı kesme noktası aralıklarına girebilecek farklı bir ekran genişliğine sahip olması nedeniyle dikey veya yatay moda göre de değişir.
Basamaklı tasarım
Editörde, kesme noktaları boyunca tasarım söz konusu olduğunda basamaklı bir tasarım kullanılır. Daha büyük kesme noktalarında yaptığınız değişiklikler, daha küçük kesme noktalarını etkiler ama daha küçük kesme noktalarındaki değişiklikler büyük kesme noktalarını etkilemez.
Örneğin, masaüstünde mavi olacak şekilde tasarlanmış bir düğme, tablet ve mobil cihazlarda otomatik olarak mavi renkte görünür. Mobil cihazlarda rengini değiştirirseniz, düğme tablet ve masaüstünde hala mavi renkte görünür.
Not:
Bazı değişiklikler tüm kesme noktalarına uygulanır; örneğin, ögeleri değiştirdiğinizde veya sildiğinizde. Aşağıdaki bölümde bu değişiklikler hakkında daha fazla bilgi edinin.
Ek masaüstü kesme noktaları oluşturdunuz mu?
2. en büyük kesme noktasını silerseniz, en büyük kesme noktasındaki ayarlar otomatik olarak daha küçük olanlara aktarılır; geçersiz kılmalar oluşturmuş olsanız bile. Örneğin, yalnızca en büyük kesme noktasından gizlenen ögeler, daha küçük kesme noktalarında da gizlenir. Bu sorunu gidermek için geçersiz kılmaları tekrar oluşturun.
Tüm kesme noktalarına uygulanan değişiklikler
Bazı eylem türleri, tüm kesme noktalarına otomatik olarak uygulanır ve belirli bir görünüm penceresine göre özelleştirilemez.
Veri değişiklikleri
Bir ögenin içeriğini düzenlerken, etkili bir şekilde öge verilerini değiştirmiş olursunuz. Örneğin, bir ögenin bağlantısını veya bir görüntünün kaynağını değiştirmek tüm kesme noktalarına uygulanır.
Başka bir örnek, sayfadaki ögeleri değiştirdiğinizde veya sildiğinizdedir; öge tüm kesme noktalarında otomatik olarak değiştirilir / silinir.
Bunları biliyor muydunuz?
Belirli kesme noktalarından ögeleri gizleyebilirsiniz. İlgili kesme noktasına gidin, ögeye sağ tıklayın ve Gizle'ye seçin.
Yapısal değişiklikler
Bir ögenin sayfanızın hiyerarşisindeki yerindeki değişiklikler. Örneğin, ögeleri bir arada istiflediğinizde veya bir ögeyi farklı bir hücreye taşıdığınızda, sayfa yapısını değiştirirsiniz ve bu, tüm kesme noktalarında yansıtılır.
Kesme noktalarını kullanarak geçersiz kılmalar oluşturma
Belirli bir kesme noktasında bir ögenin tasarımında değişiklik yaptığınızda geçersiz kılma oluşur. Yani artık üzerindeki daha büyük kesme noktasından tasarım değerleri çekmez. Bu geçersiz kılma işlemleri daha küçük kesme noktalarına kadar uzanır.
İki tür geçersiz kılma oluşturabilirsiniz:
- Tasarım: Bir ögenin özelliklerinde yapılan renklendirme, kenarlık ve yazı tipi gibi değişiklikler.
- Düzen: Farklı bir üst ögeye taşınmadığı sürece bir ögenin konumu ve boyutu değişir.
İpucu:
Studio Editor'deki ögeler ve bölümler, yerleşik bir duyarlı davranış ile birlikte gelir. Bu, daha küçük kesme noktalarında nasıl yeniden boyutlandırılacağını kontrol eder, böylece hepsini manuel olarak ayarlama konusunda endişelenmenize gerek kalmaz.
Belirli bir kesme noktasında tasarım geçersiz kılmaları kaldırma
Bir ögenin tasarımını ve düzenini her zaman en büyük kesme noktasındaki özelliklerine sıfırlayabilirsiniz.
Daha küçük kesme noktalarındaki ögenin özellikleri etkilenmez, yalnızca geri döndürdüğünüz ögeyi içeren kesme noktasından etkilenir. Örneğin, geçersiz kılmaları tablette kaldırıyorsanız, bu mobil uygulamayı etkilemez.
Bir kesme noktasındaki tasarım geçersiz kılmaları kaldırmak için:
- İlgili ögeyi seçin. İpucu: Bunu doğrudan tuval üzerinde veya Katmanlar panelinde seçebilirsiniz.
- Diğer Eylemler simgesine
tıklayın. - Geçersiz Kılmaları Kaldır'a tıklayın.
Bunları biliyor muydunuz?
Duyarlı AI aracını'e tıklayarak tüm kesme noktalarında bölümlerin düzenini hızlı bir şekilde optimize edin.
Bu içerik yardımcı oldu mu?
|