Wix Yardım Merkezi
    Ana Sayfa
  1. Studio, Uzmanlar ve Kurumsallar
  2. Wix Studio
  3. Studio Editor'u Kullanma
  4. Studio Editor'da Tasarım
    5. Studio Editor: Dikey Bölüm Oluşturmak İçin Kapsayıcı Kullanma

Studio Editor: Dikey Bölüm Oluşturmak İçin Kapsayıcı Kullanma

4 dakikalık okuma
Dikey bölümler Studio Editor'da mevcut değildir. Ancak, benzer bir efekt elde etmek ve tıpkı bir kenar çubuğu bölümü gibi görünmesini sağlamak için sabitlenmiş bir kapsayıcı kullanabilirsiniz.
Son sonuç örneği: Studio Editor'de oluşturulan canlı bir sitede gezinmek için kullanılan bir kenar çubuğu bölümü

1. Adım | Kapsayıcı ekleme ve ızgara uygulama

İlk olarak, bir kapsayıcı ekleyin ve yüksekliğini 100vh'ye ayarlayın, böylece tüm ekranın yüksekliğini kaplar. Ardından, satırın boyutu Otomatik olarak ayarlanmış şekilde gelişmiş bir CSS ızgarası uygulayın.   

Kapsayıcı eklemek ve ızgara uygulamak için

  1. Studio Editor'daki Öge Ekle panelinden  bir kapsayıcı ekleyin.
  2. Kapsayıcının yüksekliğini 100vh olarak değiştirin:
    1. Editörün sağ üstündeki Denetçi okuna  tıklayın.
    2. Boyut'un yanındaki Diğer Eylemler simgesine tıklayın.
    3. Gelişmiş Boyutlandırma geçiş düğmesini etkinleştirin.
    4. Yüksekliği 100vh olarak ayarlayın.
      İpucu: Geçerli ölçü birimine tıklayın (ör. %, px) kullanın.
  3. Kapsayıcıya bir CSS ızgarası uygulayın:
    1. (Denetçi panelinde) Sayfayı kaydırarak Düzen seçeneğine gidin.
    2. Gelişmiş CSS Izgarası'nın yanındaki Uygula'ya tıklayın.
    3. Satırlar'a tıklayın.
    4. Otomatik olarak değiştirmek için mevcut beden ölçüsüne tıklayın.
Denetçi panelinde ızgara satır boyutunu Otomatik olarak ayarlama

2. Adım | Kapsayıcıyı başlığa iliştirin

Kapsayıcıyı eklemek için geçerli sayfanın üst bilgisine sürükleyin. Bu, üst bilgiyi kapsayıcıya göre yeniden boyutlandırır ama yüksekliği Denetçi panelinde tekrar değiştireceğiz. 
Ardından, ziyaretçiler sayfayı yukarı ve aşağı kaydırırken kapsayıcının görünür kalması için üst bilgiyi sabitleyin.

Kapsayıcıyı başlığa eklemek için:

  1. Sayfanın üst bilgisine eklemek için kapsayıcıyı sürükleyin. 
  2. Üst bilgiyi yeniden boyutlandırın:
    1. Üst bilgiyi seçin.
    2. Editörün sağ üstündeki Denetçi okuna  tıklayın.
    3. Boyut'un yanındaki Diğer Eylemler simgesine tıklayın.
    4. Gelişmiş Boyutlandırma geçiş düğmesini etkinleştirin.
    5. Yükseklik değerini px cinsinden istediğiniz değere ayarlayın.
      İpucu: Geçerli ölçü birimine tıklayın (ör. %, vh) kullanın.
  3. Sayfayı aşağı kaydırarak Konum'a gelin.
  4. Konum türü açılır menüsünden Sabitlenmiş'i seçin.
Denetçi panelinin ve kapsayıcı takılı olarak üst bilginin yan yana görünümü

3. Adım | Kapsayıcıyı hizalayın ve sayfaya dolgu ekleyin

Şimdi kapsayıcıyı yerleştirme zamanı. Nerede görünmesini istediğinize bağlı olarak, kapsayıcıyı üst ve sol / üst ve sağ köşelere hizalayın.
Son adım, sayfanın ilgili tarafına dolgu eklemektir; bu, kapsayıcının sayfa içeriğini kaplamasını engeller. 

Kapsayıcıyı hizalamak ve dolgu eklemek için:

  1. Kapsayıcıyı seçin.
  2. (Inspector) Kapsayıcıyı yukarı ve sağa/sola hizalayın:
    1. Yukarıya Hizala simgesine tıklayın.
    2. Sola Hizala simgesine / Sağa Hizala simgesine tıklayın.
  3. Sayfaya dolgu ekleyin:
    1. Denetçi'nin üst çubuğundaki Sayfa'ya tıklayın.
      Selecting the page in the breadcrumbs at the top of the Inspector panel
    2. Konum alanında, dolguyu kapsayıcı ile aynı genişlikte olacak şekilde ayarlayın.
      Örneğin, kapsayıcı genişliği %20 ise ve sayfanın sol tarafında bulunuyorsa, sol dolgu da %20'ye ayarlanmalıdır.
      Setting the page padding in the Inspector panel

4. Adım | Kapsayıcıyı özelleştirin

Kapsayıcı artık kenar çubuğu bölümü olarak kullanmanız için hazır. İhtiyacınız olan ögeleri ekleyin ve kapsayıcıyı Denetçi panelinden tasarlayın. Aşağıdaki örnekteki gibi görünmelidir; üst bilgiye ekli ve tuvalde yukarı ve aşağı kaydırırken tüm ekran yüksekliğini kaplıyor. 
Makaledeki talimatlar kullanılarak kenar çubuğu bölümüne dönüştürülen bir konteyner örneği

Bu içerik yardımcı oldu mu?

|
Bu makalede
  • 1. Adım | Kapsayıcı ekleme ve ızgara uygulama
  • 2. Adım | Kapsayıcıyı başlığa iliştirin
  • 3. Adım | Kapsayıcıyı hizalayın ve sayfaya dolgu ekleyin
  • 4. Adım | Kapsayıcıyı özelleştirin