Studio Editor: Esnek Kutuları Yönetme ve Özelleştirme

4 dakikalık okuma
Ziyaretçilerinize özgün bir deneyim sunmak için esnek kutuları yönetin ve özelleştirin. Ögeleri sayfa yapınıza uyacak şekilde yeniden boyutlandırabilir, görüntüleme ayarlarını düzenleyebilir ve ilerledikçe ögeleri ekleyebilir, silebilir ve yeniden sıralayabilirsiniz.
Bu makalede şunların nasıl yapılacağını öğrenin:

Esnek kutu ögelerini yönetme

İçeriğinizi daha da kişiselleştirmek ve güncel tutmak için esnek kutu ögelerini yönetin. Ögeleri kesme noktalarından gizleyebilir, sıralarını değiştirebilir ve daha fazlasını yapabilirsiniz. 

Esnek kutu ögelerinizi Denetçi'den yönetmek için:

  1. Esnek kutunuza tıklayın.
  2. Editörün sağ üstündeki Denetçi okuna  tıklayın.
  3. (Denetçi Panelinde) Öge sayısının yanındaki Yönet'e tıklayın. 
  4. Ögelerinizle ne yapmak istediğinizi seçin:
  • Yeniden sıralama: 
    • İlgili ögenin yanındaki Yeniden Sırala simgesine basılı tutun ve onu yeni konumuna sürükleyin. 
  • Yönetin:
    1. İlgili albümün yanındaki Diğer Eylemler simgesine tıklayın.
    2. Seçenekleri kullanarak ögeleri yönetin:
    • Çoğalt: Belirli bir ögenin kopyasını oluşturun.
    • Yeniden Adlandır: Her ögeye tanıyabileceğiniz bir ad verin.
    • Sil: Ögeyi tamamen kaldırın.
    • Gizle: Bu ögeyi üzerinde çalıştığınız belirli kesme noktasından gizleyin.
Denetçi panelinin Ögeleri Yönet bölümü. İmleç, bir ögeyi yeniden adlandırma seçeneğinin üzerine geliyor.

Esnek kutu ekranınızı özelleştirme

Sayfanızın yapısını tamamlamak için bir esnek kutu görünümü seçin. Seçtiğiniz ekrana bağlı olarak, boşluklar, yön ve genişlik gibi ayarları düzenleyerek görünümünü daha da özelleştirebilirsiniz. 

Görünümü özelleştirmek için:

  1. Esnek kutunuza tıklayın.
  2. Editörün sağ üstündeki Denetçi okuna  tıklayın.
  3. Tasarım sekmesini seçin.
  4. Düzenler'e tıklayın.
  5. (İsteğe bağlı) Görüntüleme türü'ne tıklayın ve açılır menüden bir tür seçin.
  6. Seçtiğiniz ekran türüne göre flexbox'ınızı özelleştirin:
    • Yön: Ögelerinizin soldan sağa mı yoksa sağdan sola mı düzenleneceğine karar verin. 
    • Öge oranları: Tüm esnek kutu ögelerine aynı boyut tanımlarını vermek için Eşitle'ye tıklayın.
    • Öge genişliği: Esnek kutu ögelerinin genişliğini yüzde olarak seçin veya hepsini maksimum genişlik olarak ayarlayın.
    • Boşluklar: Esnek kutu ögeleri arasındaki yatay ve dikey boşluklar için (px, vh, vw veya ölçek cinsinden) bir değer girin. Not: Kaydırıcıyı veya slayt görünümünü seçerseniz, mevcut seçenekler (yatay veya dikey), seçtiğiniz kaydırıcı yönüne bağlıdır.
    • Öge hizalama: Ögelerinizin nasıl hizalanıp konumlandırılacağını seçin. Elde etmek istediğiniz görünüme bağlı olarak, ögeleri esnek kutu kenarlarına (başlangıç veya bitiş) hizalayabilir veya ögelerin arasında / etrafında boşluk oluşturabilirsiniz.
    • Taşan içerik: Taşan içeriği gizlemeyi veya görüntülemeyi seçin.
    • Kaydırma yönü: Ögeleri yatay veya dikey kaydırıcıda gösterin.
    • Snap hizalamayı kaydır: Etkinleştirmek için geçiş düğmesine tıklayın. Esnek kutunuzun slaytları arasında gezinirken, her bir ögeye (slayt) "yapışır", böylece ziyaretçiler bu ögeleri kaçırmaz.
    • Slayt başına öge: Slayt eylemi başına kaç ögenin görüntüleneceğini ayarlayın.
    • Gezinme: Ziyaretçilerin ögeler arasında gezinmesine yardımcı olmak için oklar, bir düğme veya metin ekleyin.
    • Kaydırma çubuğunu göster: Ziyaretçilerinizin ögeler arasında gezinmesini sağlayan kaydırma çubuğunu gösterin veya gizleyin.
Denetçi panelinin Düzen bölümü. İmleç boşluk alanının üzerinde geziniyor.
Notlar:
  • Gösterilen özelleştirme seçenekleri, seçtiğiniz görüntüleme stiline bağlıdır.
  • Bazı eski tarayıcılar boşlukları desteklemez (ör. Chrome 76-83, Safari 12-14 ve Edge 79-83). Bu, sitenize bu tarayıcılardan erişen ziyaretçilerin, esnek kutu ögeleri arasına koyduğunuz boşlukları görmeyeceği anlamına gelir. 
Kesme noktalarıyla çalışma:
  • Her kesme noktası için farklı bir düzen ayarlayabilirsiniz.
  • Mobil cihazlar gibi daha küçük ekranlarda sütun veya kaydırıcı düzenini öneririz.

Esnek kutu ögelerini yeniden boyutlandırma

Her bir esnek kutu ögesini diğerlerinden daha büyük veya daha küçük yapmak için yeniden boyutlandırabilirsiniz. Her bir ögenin genişliğini ve yüksekliğini ve ayrıca ögelerin etrafındaki yatay ve dikey kenar boşluklarını ayarlamak için Denetçi panelini kullanın.

Bir ögeyi yeniden boyutlandırmak için:

  1. Esnek kutunuza tıklayın.
  2. Yeniden boyutlandırmak istediğiniz ögeyi seçin.
  3. Editörün sağ üstündeki Denetçi okuna  tıklayın.
  4. Tasarım sekmesini seçin ve ögeyi nasıl ayarlamak istediğinizi belirleyin:
    • Beden: Seçtiğiniz bedeni alana girin ve ölçü birimini seçin.
    • Pozisyon: İlgili Kenar Boşlukları / Dolgu seçeneğini seçin ve seçilen tutarı alana girin.
Denetçi panelinin Tasarım sekmesi. İmleç, minimum genişlik alanının üzerinde geziniyor.

Bu içerik yardımcı oldu mu?

|