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. 
Üstteki farklı kesme noktalarına tıklandığında site tasarımının nasıl değiştiğini gösteren bir GIF
Bu makalede bilgi edinebileceğiniz konular:
İpucu:
Her kesme noktasının, ihtiyaçlarınıza göre değiştirebileceğiniz varsayılan bir düzenleme boyutu (ekran genişliği) bulunur.

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.
Kesme noktalarını her site sayfası ve her şema bölümü için ayrı ayrı tanımlarsınız. Bu, bir şemanı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:
Bir site sayfası için kesme noktaları paneli
... Bu sayfadaki genel üst bilgide tanımlanmış 3 kesme noktası bulunur: 
Sayfadakinden farklı kesme noktaları olduğunu gösteren, genel bir başlık için kesme noktaları paneli

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. 
Basamaklı konsepte göre kesme noktalarının birbirini nasıl etkilediğini gösteren bir grafik

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. 
Tüm kesme noktalarını etkileyeceği için veri değişikliği yaparken editörde gördüğünüz bir mesajın ekran görüntüsü
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ıklayarak Görüntüleme ögesini 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. 
Bir ögeyi yeniden kategorize etmeye çalışırken, tüm kesme noktalarını etkileyen bir eylem olan editörde gördüğünüz mesajın ekran görüntüsü

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:

  1. İlgili ögeyi seçin.
  2. Diğer Eylemler simgesine tıklayın.
  3. Geçersiz Kılmaları Kaldır'a tıklayın.
Editördeki tablet kesme noktasındaki bir düğmenin, geçersiz kılmaları kaldırmak için tıklandığı ekran görüntüsü

Bu içerik yardımcı oldu mu?

|