Wix Yardım Merkezi
    Ana Sayfa
  1. Sitenizi Oluşturma
  2. Editor X
  3. Editor X Sitesine Öge Ekleme
    4. Editor X: Tekrarlayıcıları Kullanma

Editor X: Tekrarlayıcıları Kullanma

8 dakikalık okuma
Editor X platformu, ajanslara ve serbest çalışanlara yönelik yeni platformumuz Wix Studio'ya geçiş yapıyor.Wix Studio hakkında daha fazla bilgi edinin (Yalnızca İngilizce)
Tekrarlayıcılar farklı içeriklerin aynı tasarım ve düzen altında gösterildiği öge listeleridir. İçeriğinizi sitenizde sergilemenin kolay ve hızlı bir yolunu sunarlar. 
Editor X'teki tekrarlayıcılar yeniden boyutlandırılan içeriği sayfaya otomatik olarak yeniden yerleştirerek her ekran boyutunda düzgün görünmesini sağlayan esnek bir düzene sahiptir.
Bu makalede öğrenecekleriniz:
Editor X'te tasarlayabileceğiniz bir tekrarlayıcı örneği.
İpucu:
Bir koleksiyondaki dinamik içeriği İçerik Yöneticisi ile bağlayarak göstermek için tekrarlayıcıları da kullanabilirsiniz. 

Sayfanıza tekrarlayıcı ekleme

Sitenize ekleyebileceğiniz ve ihtiyaçlarınıza göre özelleştirebileceğiniz çok sayıda tekrarlayıcı şablonumuz bulunmaktadır. Bunlardan bazıları daha çok metinleri ön plana çıkaran "liste" stiline sahipken, bazıları resimli içerikleri sergilemeye yöneliktir. 

Sayfanıza bir tekrarlayıcı eklemek için:

  1. Editor X'in üst çubuğundaki Öge Ekle simgesine  tıklayın.
  2. Düzen Araçları'na tıklayın.
  3. Tekrarlayıcılar'ı seçin.
  4. Tekrarlayıcılardan birini sayfanıza sürükleyin.
Editor X'teki Öge Ekle panelinden ekleyebileceğiniz tekrarlayıcıları gösteren ekran görüntüsü

Tekrarlayıcıya içerik ekleme

Tekrarlayıcıdaki tüm ögeler aynı tasarıma sahiptir. Tekrarlayıcıdaki bir ögenin tasarımında yaptığınız herhangi bir değişiklik veya ekleme otomatik olarak tüm ögelere yansıyarak tasarım tutarlılığının korunmasını sağlar. 
Bununla birlikte ögelerin içindeki bileşenleri ayrı ayrı özelleştirebilirsiniz. Örneğin, tekrarlayıcı ögelerinden birine eklediğiniz bir düğme aynı anda tüm ögelere eklenir, ancak her ögedeki düğmeye farklı bir metin girebilirsiniz.  

Tekrarlayıcıya içerik eklemek için:


  1. Editor X'in üst çubuğundaki Öge Ekle simgesine tıklayın.
  2. İstediğiniz bileşeni doğrudan tekrarlayıcıya sürükleyin. 
  3. Her bir ögedeki bileşenlere tıklayarak ayrı ayrı özelleştirin. 
İpucu:
Tekrarlayıcı ögelerinden birinden sildiğiniz bir bileşen aynı anda tüm ögelerden silinir. 
Tekrarlayıcı ögelerinden birine eklenen bileşenin aynı anda tüm ögelere eklenmesini gösteren bir video

Tekrarlayıcı ögelerini yönetme

Denetçi panelinden tekrarlayıcı ögelerini kolayca çoğaltabilir, yeniden adlandırabilir, yeniden sıralayabilir ve silebilirsiniz.

Tekrarlayıcı ögelerinizi yönetmek için:

  1. Tekrarlayıcınıza tıklayın.
  2. Editor X'in sağ üst köşesindeki Denetçi simgesine  tıklayın.
  3. (Denetçi Panelinde) Öge sayısının yanındaki Yönet'e tıklayın. 

    A screenshot of the top of the Inspector panel where you can click Manage to manage repeater items
  4. Tekrarlayıcı ögelerinizi nasıl yönetmek istediğinizi seçin:
    • Öge çoğaltma: En alttaki Ögeyi Çoğalt seçeneğine tıklayın.
    • Öge silme: İlgili ögenin yanındaki Diğer Eylemler simgesine tıklayın ve Sil'i seçin.
    • Ögeyi yeniden adlandırma: İlgili ögenin yanındaki Diğer Eylemler simgesine tıklayın ve Yeniden Adlandır'ı seçin.
    • Ögeleri yeniden sıralama: Ögeye tıklayın ve yeni konumuna sürükleyin.
Denetçi'deki Ögeleri Yönet panelinin ekran görüntüsü

Tekrarlayıcınızı tasarlama

Tekrarlayıcınızın tasarımını kendinize ait olacak şekilde özelleştirin. Ögelerin arka plan rengini değiştirebilir, kenarlıklar, gölge veya ziyaretçiler tekrarlayıcının üzerine geldiğinde görünen ilginç bir imleç ekleyebilirsiniz. 

Tekrarlayıcınızı tasarlamak için:

  1. Tekrarlayıcınıza tıklayın.
  2. Editor X'in sağ üst köşesindeki Denetçi simgesine  tıklayın.
  3. Tasarım sekmesine tıklayın. 
  4. Tekrarlayıcınızı tasarlamak için mevcut seçenekleri kullanın:
    • Tüm ögelerin dolgu rengini ve opaklığını değiştirin.
    • Ögeleri öne çıkarmak için bir kenarlık ve gölge ekleyin.
    • Öge köşelerini keskinleştirin veya yuvarlayın. 
    • Ziyaretçiler tekrarlayıcının üzerine geldiğinde havalı bir imleç ekleyin. 
Bir AB tasarım deseni mi kullanıyorsunuz?
Bu tasarım değişiklikleri, AB çoğaltmasından bağımsız olarak tüm tekrarlayıcı ögelerine uygulanır. 
Denetçi panelindeki tasarım sekmesinde bulunan bir tekrarlayıcının ve mevcut seçeneklerin ekran görüntüsü

Tekrarlayıcı ögeleri için bir AB tasarım deseni ayarlama

Daha ayrıntılı bir tasarım oluşturmak için tekrarlayıcınızı 2 gruba bölün. AB modeli, aynı tasarımın farklı stiller ve etkileşimlerle iki versiyonunu oluşturmanıza olanak tanır.
AB kalıbını etkinleştirdiğinizde, tekrarlayıcı ögeleriniz A ve B gruplarına ayrılır. Editörde her bir gruba hangi ögelerin ait olduğunu görebilirsiniz. A veya B ögelerinden herhangi birini tasarlarken, gruptaki diğer ögeler otomatik olarak eşleşecek şekilde değişir. 
Tüm B ögesini tasarlayan bir tekrarlayıcı ve Denetçi panelinin ekran görüntüsü

Tekrarlayıcı ögeleri için bir AB tasarım deseni ayarlamak için:

  1. Tekrarlayıcınıza tıklayın.
  2. Editor X'in sağ üst köşesindeki Denetçi simgesine  tıklayın.
  3. Ekran başlığına ilerleyin.
  4. AB tasarım desenini ayarla geçiş düğmesini etkinleştirin.
    A screenshot of the Display section in the Inspector panel, enabling the AB pattern toggle
  5. A ve B tasarım ögeleri:
    1. Tekrarlayıcınızdaki A veya B ögelerine tıklayın.
      İpucu: İlgili gruptaki herhangi bir öge olabilir.
    2. (Denetçi panelinde) Tasarım sekmesine tıklayın.
    3. Öge grubunu nasıl özelleştirmek istediğinizi seçin:
      • Tasarım bölümünden bir tasarım hazır ayarı seçin.
      • Ögelerin Dolgu rengini ve opaklığını değiştirin.
      • Etkileşimler sekmesinden üzerinde gezinme veya tıklama etkileşimi ekleme. 

Tekrarlayıcınızın düzenini değiştirme

Ekran boyutu değiştiğinde tekrarlayıcınızdaki ögelerin nasıl yerleştirileceğini belirleyin. Seçilen görünüm şekline (Kartlar, Liste, Kaydırıcı, Kılavuz hücreler) bağlı olarak öge aralıklarını, hizalamayı, yönü ve diğer ayarları özelleştirebilirsiniz. 
Tekrarlayıcıya tıklandığında görünür olan ve hızlı bir şekilde düzen değiştirmenize olanak sağlayan açılır menünün ekran görüntüsü
Kesme noktalarıyla çalışma:
  • Her bir kesme noktasında farklı bir tekrarlayıcı düzeni uygulayabilirsiniz.
  • Liste ve Kaydırıcı düzenleri özellikle tabletler ve mobil cihazlar gibi daha küçük ekran boyutlarında yaygın olarak kullanılırlar.

Tekrarlayıcı düzenini daha fazla özelleştirmek için:

  1. Tekrarlayıcınıza tıklayın.
  2. Editor X'in sağ üst köşesindeki Denetçi simgesine  tıklayın.
  3. Seçili ekran tipine göre tekrarlayıcınızın düzenini özelleştirin:
CSS boşlukları hakkında not:
Bazı eski tarayıcılar (ör. Chrome 76-83, Safari 12-14 ve Edge 79-83) bu özelliği desteklememektedir. Sitenize bu tarayıcılardan erişen ziyaretçiler tekrarlayıcı ögeleri arasına koyduğunuz boşlukları görmezler. 
Editor X'te bir tekrarlayıcının görünüm ayarlarının yapıldığı Denetçi panelinin ekran görüntüsü
Tekrarlayıcılar hakkında daha fazla bilgi edinin:
Tekrarlayıcılarla ilgili dersimize ve alıştırmalarımıza erişmek için ilgili Akademi X sayfasına gidin.  

Bu içerik yardımcı oldu mu?

|

Bu makalede

  • Sayfanıza tekrarlayıcı ekleme
  • Tekrarlayıcıya içerik ekleme
  • Tekrarlayıcı ögelerini yönetme
  • Tekrarlayıcınızı tasarlama
  • Tekrarlayıcı ögeleri için bir AB tasarım deseni ayarlama
  • Tekrarlayıcınızın düzenini değiştirme