Editor X: Hazır Etkileşim Ekleme

5 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)
Sayfanızdaki ögelere tıklayan/üzerine gelen ziyaretçilere animasyonlu bir kullanıcı deneyimi sunmak için Etkileşimler ekleyin. Hızlı ve kolay bir animasyona mı ihtiyacınız var? Hazır ayarlarımızdan birini seçin ve onu zevkinize göre değiştirin. 
Etkileşim, ziyaretçilerin tıkladığı/üzerine geldiği ögeye veya sayfadaki farklı bir ögeye animasyon ekleyebilir. Her iki durumda da görünüm ve zamanlama üzerinde tam kontrole sahip olduğunuz için gerçekten kullanışlıdır. 
Etkileşimlerin canlı bir sitede nasıl göründüğünü gösteren GIF.

1. Adım | Üzerine gelme veya tıklama tetikleyicileri ekleme

Etkileşimi tetikleyen ögeyi seçerek başlayın. Bu, ziyaretçilerinizin animasyonu görmeden önce üzerine geldiği veya tıkladığı ögedir. Ardından yeni etkileşiminizi eklemek için Denetçi panelindeki Etkileşimler sekmesine gidin. 
İpucu:
Bir ögeye birden fazla etkileşim ekleyebilirsiniz, böylece üzerine gelindiğinde veya tıklandığında farklı bir animasyonu tetikler.

Bir tetikleyici eklemek için:

  1. Etkileşimin uygulanacağı ögeye tıklayın.
  2. Editor X'in sağ üst köşesindeki Denetçi simgesine  tıklayın.
  3. (Denetçi panelinde) Etkileşimler sekmesine tıklayın.
  4. Üzerinde Gezinme / Tıklama alanındaki + Ekle'ye tıklayın. 
Denetçi panelindeki, yeni bir etkileşim ekleyebileceğiniz Etkileşimler sekmesinin ekran görüntüsü

2. Adım | Etkileşiminizi ayarlama

Bir öge ve tetikleyici seçtikten sonra etkileşimi ayarlayın. Önceden tasarlanmış bir animasyonu, onu göstermesi gereken ögeyi ve üzerine gelindiğinde veya tıklandığında tam olarak ne olacağını seçin.
Not:
Kullanılabilir animasyonlar, seçtiğiniz ögeye göre değişir.

Etkileşiminizi ayarlamak için:

  1. (Etkileşim Kurulumu panelinde) Üzerine Geldiğinde / Tıklandığında ne olacağını seçin :
    • Animasyon Başlat: Ögeye tıklamak / üzerine gelindiğinde seçilen animasyon tetiklenir.
    • Animasyonu Sıfırla: Ögeye tıklandığında / üzerine gelindiğinde daha önce uygulanmış tüm animasyonlar kaldırılır.
    • Açık/Kapalı: Ögeye tıklamak, animasyonu tetikler ve ikinci bir tıklama animasyonu kaldırır.
      Not: Bu seçenek yalnızca tıklama etkileşimleri için kullanılabilir.
  2. Animasyon ögesiniseçin:
    • Ögenin kendi animasyonunu tetiklemesini sağlayın: Ögenin adına tıklayın (yanında (kendisi) ifadesi görünür).
    • Sayfada farklı bir ögeye animasyon ekleyin: Açılır menüden bir öge seçin veya sayfadan Tuvalde Seç'e tıklayın.
      İpucu: Bir alt öge seçmek için Cmd / Ctrl tuşuna basılı tutun.
  3. Bir animasyon seçin:
    1. Hazır Ayarlar sekmesine tıklayın. 
    2. Listeden bir animasyon seçin.
Hazır ayar animasyonu seçip Denetçi'de Etkileşim Kurulumu'nun ekran görüntüsü
İpucu:
Ögeleri tıklandığında veya üzerine gelindiğinde gösterilecek şekilde ayarlarken, tuvalde damalı bir kaplama ile görünür. Burada ögenin başlangıçta şeffaf olduğunu belirtmek isteriz. 
Editor X'e tuvalde damalı kaplama ile görünen, üzerine gelindiğinde görünecek bir düğme
Bu göstergeyi istediğiniz zaman kapatabilirsiniz. Üst çubukta Görüntüle'ye ve sonra Şeffaf Ögeler simgesine tıklayın.

3. Adım | (İsteğe bağlı) Animasyonu ayarlayın

İstediğiniz efekti elde etmek için animasyonu seçtikten sonra özelleştirin. Animasyonu gerçekten etkili hale getirmek için süre, gecikme ve kolaylık gibi ayarları kontrol edebilirsiniz. 

Animasyonu ayarlamak için:

  1. (Denetçi panelinde) En alttaki Animasyon Ayarla seçeneğine tıklayın.
  2. Mevcut ayarları beğeninize göre özelleştirin:
    • Gecikme: Animasyon başlamadan önce bir gecikme (saniye cinsinden) eklemek için kaydırıcıyı sürükleyin.
    • Süre: Animasyonun süresini (saniye cinsinden) ayarlamak için kaydırıcıyı sürükleyin.
    • Hareket hızı: Açılır menüden animasyonun hareket şeklini seçin.
    • Ölçek: Ögenizin ne kadar büyüyeceğini veya küçüleceğini seçin. 
    • Açı: Hareket açısını değiştirin. 
    • Mesafe: Ögenizin sayfadaki varsayılan konumundan uzaklaşmasını veya yaklaşmasını sağlayın.
    • Yön: Ögenizin döndüğü yönü değiştirin.
  3. (İsteğe bağlı) Animasyonunuzun nasıl göründüğünü görmek ve gerekirse ayarlamalar yapmak için Önizleme'ye tıklayın. 
Not:
Kullanılabilir ayarlar, seçtiğiniz hazır animasyona bağlıdır.
Hazır ayarlı bir animasyonun ayarlarını yapan Denetçi panelinin ekran görüntüsü
Sırada ne var?

SSS

Etkileşim oluşturma hakkında daha fazla bilgi edinmek için aşağıdaki başlıklara tıklayın. 

Bu içerik yardımcı oldu mu?

|