Studio Editor: Tekrarlayıcılar Ekleme ve Özelleştirme

7 dakikalık okuma
Tekrarlayıcılar farklı içeriklerin aynı tasarım ve düzen altında gösterildiği öge listeleridir. Sitenin CMS (İçerik Yönetim Sistemi) içeriği de dahil olmak üzere içeriğinizi görüntülemenin hızlı ve kolay bir yoludur.
Studio Editorde, tekrarlayıcılar, her ögenin her ekran boyutunda harika görünmesini sağlamak için duyarlı bir esnek düzende düzenlenir.
Ek Wix Studio web seminerlerine, eğitimlerine ve kurslarına göz atmak için Wix Studio Akademisi'ne gidin.
Bu makalede şunların nasıl yapılacağını öğrenin:

Sayfanıza tekrarlayıcı ekleme

İhtiyaçlarınıza göre eklemeniz ve özelleştirmeniz için önceden tasarlanmış çok sayıda tekrarlayıcımız bulunur. Bunlardan bazıları daha çok metinleri ön plana çıkaran "liste" stiline sahipken, bazıları resimli içerikleri sergilemeye yöneliktir. 
Beğendiğiniz bir tekrarlayıcıyı ekledikten sonra içerik çalışmalarına başlayın. 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 her bir ögenin içindeki ögeleri ayrı ayrı özelleştirebilirsiniz (ör. metin, görüntüler).

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

  1. Editörün sol çubuğundaki Öge Ekle simgesine  tıklayın.
  2. Düzen Araçları'na tıklayın.
  3. Tekrarlayıcılar'ı seçin.
  4. Sayfaya sürükleyin.
İpucu:
Tekrarlayıcı ögelerinden birinden sildiğiniz bir bileşen aynı anda tüm ögelerden silinir. 

Tekrarlayıcı ögelerini yönetme

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

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

  1. İlgili tekrarlayıcıyı seçin.
  2. Editörün sağ üst köşesindeki Denetçiyi Aç simgesine  tıklayın.
Studio Editor'da Denetçi panelinin açılmasına ilişkin ekran görüntüsü.
  1. (Denetçi Panelinde) Öge sayısının yanındaki Yönet'e tıklayın.  
Studio Editor'daki Denetçi panelinin üst kısmında tekrarlayıcı ögelerini yönetmek için Yönet düğmesine tıklanmasının ekran görüntüsü
  1. Tekrarlayıcı ögelerinizi nasıl yönetmek istediğinizi seçin:
    • Bir ögeyi çoğaltın: Bir öge seçin, daha sonra alttaki Ögeyi Çoğalt'a tıklayın.
    • Öge silme: Diğer Eylemler simgesine  tıklayın. simgesine dokunun ve Sil'e tıklayın.
    • Ögeyi yeniden adlandırma: İlgili ögenin yanındaki Diğer Eylemler simgesine tıklayın ve Yeniden Adlandır'ı seçin. İpucu: Bir ögeyi yeniden adlandırmak, tekrarlayıcıdaki diğer ögeleri otomatik olarak yeniden adlandırır.
    • Ögeleri yeniden sıralama: Yeniden Sırala simgesine basılı tutun ve ögeyi yeni konumuna sürükleyin.
Ögeleri Denetçi'de yönettiğiniz ve yeniden sıraladığınız panelin ekran görüntüsü

Bir tekrarlayıcı tasarlama

Tekrarlayıcının tasarımını müşterinizin sitesine uyacak ş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. 
İpucu:

Bir tekrarlayıcı tasarlamak için:

  1. Bir tekrarlayıcı öge seçin.
  2. Editörün sağ üst köşesindeki Denetçiyi Aç simgesine  tıklayın.
Studio Editor'da Denetçi panelinin açılmasına ilişkin ekran görüntüsü.
  1. Tasarım altındaki mevcut seçenekleri kullanarak tekrarlayıcınızı özelleştirin:
    • 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 tekrarlayıcı öge seçtiğinizde Denetçi'deki tasarım seçeneklerinin 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 deseni, aynı tasarımın farklı stiller ve animasyonlarla iki versiyonunu oluşturmanıza olanak sağlar.
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. 

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

  1. İlgili tekrarlayıcıyı seçin.
  2. Editörün sağ üst köşesindeki Denetçiyi Aç simgesine  tıklayın.
Studio Editor'da Denetçi panelinin açılmasına ilişkin ekran görüntüsü.
  1. Sayfayı aşağı kaydırarak Düzen'e gidin.
  2. AB tasarım desenini ayarla geçiş düğmesini etkinleştirin.
  3. A ve B tasarım ögeleri:
    1. Tekrarlayıcınızda A veya B ögesine tıklayın.
      İpucu: İlgili gruptaki herhangi bir öge olabilir.
    2. (Denetçi panelinde) Bu ö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 bir animasyon ekleyin (Not: AB desenlerine sahip tekrarlayıcı ögeler için yalnızca Fareyle Üzerine Gelme ve Tıklama etkileşimleri kullanılabilir).
      • İmleç bölümünden özel bir imleç uygulayın.
    3. Diğer öge grubu için ab adımlarını tekrarlayın.
AB desen tasarımına sahip bir tekrarlayıcının ekran görüntüsü, geçiş düğmesinin etkinleştirildiğini gösteren

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

Ekran boyutu değiştiğinde tekrarlayıcıdaki ö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. 
Odak 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. İlgili tekrarlayıcıyı seçin.
  2. Editörün sağ üst köşesindeki Denetçiyi Aç simgesine  tıklayın.
Studio Editor'da Denetçi panelinin açılmasına ilişkin ekran görüntüsü.
  1. Sayfayı aşağı kaydırarak Düzen'e gidin.
  2. Seçili ekran tipine göre tekrarlayıcının düzenini özelleştirin:
Boşluklar hakkında not:
Bazı eski tarayıcılar CSS boşluklarını desteklemez (ör. Chrome 76-83, Safari 12-14 ve Edge 79-83). Sitenize bu tarayıcılardan erişen ziyaretçiler tekrarlayıcı ögeleri arasına koyduğunuz boşlukları görmezler. 
Kartlar ekran türünü seçtiğinizde Denetçi'de görünen düzen seçenekleri.

Bu içerik yardımcı oldu mu?

|