Studio Editor: Düğme Simgelerine Animasyonlar Ekleme
4 dk.
Bu makalede
- Hazır tasarımlı simge animasyonu ekleme
- Özel simge animasyonları oluşturma
- Simge tasarımını özelleştirme
- Özel simge gereksinimleri ve yönergeleri
Stil düğmeleri mi kullanıyorsunuz? Göz alıcı efektler yaratmak için simge animasyonları ekleyin, müşterilerinizin sitelerini en küçük ayrıntısına kadar etkileşimli hale getirin.
Wix Studio’nun sunduğu hazır tasarımlı hareketli simgelerden birini seçerek göz alıcı bir efekt yaratabilir veya başlangıç ve bitiş simgelerini kombine ederek özel bir animasyon oluşturabilirsiniz. Ayrıca kişiselleştirilmiş bir dokunuş için kendi SVG dosyalarınızı yükleyebilirsiniz.
Düğme simgesi animasyonları nasıl çalışır?
Hazır tasarımlı simge animasyonu ekleme
Hızlı düzenleme için çarpıcı simge animasyonlarımızdan birini seçin. İstediğiniz efekti seçtikten sonra süreyi belirleyebilirsiniz.
Hazır tasarımlı bir hareketli simge eklemek için:
- Editörünüze gidin.
- İlgili tasarımlı düğmeye tıklayın.
- Ayarlar'a tıklayın.
- Simge türü altından Hareketli'ye tıklayın.
- Ardından ne yapacağınıza karar verin:
- Simge seçin altındaki hareketli simgelerden birini seçin.
- Medya Yöneticisi'ndeki hareketli simge yelpazemizi keşfetmek için Ekle simgesine
tıklayın.
- (İsteğe bağlı) Animasyon süresini değiştirmek için Süre kaydırıcısını sürükleyin.
İpucu:
Hazır tasarımlı simgelerimizin üzerine gelerek animasyonu önizleyebilirsiniz.
Özel simge animasyonları oluşturma
Müşterinizin sitesindeki düğmeler için kendi simge animasyonlarınızı oluşturun. Başlangıç ve bitiş simgeleri seçerek müşterinizin sitesine özgü kusursuz bir hareket oluşturabilirsiniz. Wix simgelerini kombine edin veya kendi SVG dosyalarınızdan ikisini kullanın.
Özel animasyonlar oluşturmak için:
- Editörünüze gidin.
- İlgili tasarımlı düğmeye tıklayın.
- Ayarlar'a tıklayın.
- Simge türü altından Hareketli'yi seçin.
- Ekle simgesine
tıklayın ve Yeni oluştur'u seçin. - Başlangıç ve bitiş simgelerinizi ayarlayın:
- Başlangıç simgesi altındaki Ekle simgesine
tıklayın. - Wix Medya Dosyaları sekmesinden bir dosya seçin veya Site Dosyaları altından kendi dosyanızı yükleyin.
- Dosya Seçin'e tıklayın.
- Bitiş simgesi için aynı adımları tekrarlayın.
- Başlangıç simgesi altındaki Ekle simgesine
- (İsteğe bağlı) En üstteki Geri'ye tıklayın ve Süre kaydırıcısını kullanarak animasyon süresini belirleyin.
İpuçları:
- Kendi dosyanızı Wix'in sunduğu bir simgeyle birleştirebilirsiniz.
- Efektin istediğiniz gibi göründüğünden emin olmak için önizleme kutusunu kullanın.
Simge tasarımını özelleştirme
Simgeyi tasarım vizyonunuza, müşterinizin özgün markasına ve düğmeye uyacak şekilde özelleştirin. Düğmenin daha dinamik olmasını sağlamak amacıyla simgeyi yeniden boyutlandırabilir, rengini değiştirebilir ve döndürebilirsiniz.
Ayrıca simgenin 'üzerindeyken' durumunu tasarlayarak etkileşimi artıracak ekstra bir katman ekleyebilirsiniz; örneğin, simgenin dönmesini ya da renginin değişmesini sağlayabilirsiniz.
Simge tasarımını özelleştirmek için:
- Editörünüze gidin.
- İlgili tasarımlı düğmeye tıklayın.
- Editörün sağ üst köşesindeki Denetçiyi Aç simgesine
tıklayın.
- Tasarım altından Durum seçimi yapın: Normal veya Üzerindeyken.
- Tasarım altındaki listeden Simge'ye tıklayın.
- Mevcut seçenekleri kullanarak simgenin tasarımını özelleştirin:
- Simgeyi yeniden boyutlandırın.
- Simge rengini değiştirin ve opaklığını ayarlayın.
- Simgeyi farklı bir açıyla döndürün.
Özel simge gereksinimleri ve yönergeleri
Özel simgelerle ilgili bazı gereksinimler bulunmaktadır. Yüklemek ve kullanmak istediğiniz dosyaların aşağıdaki özelliklere sahip olmaları gerekir:
- Yalnızca düz siyah (#000000)
- SVG formatında
- En fazla 250 KB
Not:
SVG dosyalarınızı Adobe Illustrator veya Figma'da oluşturduysanız, dışa aktarmadan önce bileşik nesne (compound path) haline getirmeniz gerekir.
Ayrıca simgeleri oluştururken akılda tutulması gereken bazı en iyi uygulamalar bulunmaktadır. Animasyonların sorunsuz çalışması için aşağıdaki talimatları izlemenizi öneririz.
- Başlangıç ve bitiş simgelerinin başlangıç konumunun aynı olmasına dikkat edin.
- Her iki simgenin aynı sayıda noktaya sahip olup olmadığını kontrol edin.
- Dolgulu (boşlukların olmadığı) simgeler kullanın.
- SVG simgesi oluşturmak için tek bir büyük şekil yerine birkaç küçük şekil kullanın.
- Şekilleri yeniden boyutlandırırken kalitelerini korumak amacıyla ölçeklendirin.
- Tuvaldeki piksellerle uyumluluğu sağlamak için programın piksel görünümünü kullanın.
- Simgelerinizin şekilleri birbirinden çok farklıysa, daha sorunsuz bir geçiş efekti için aşağıdaki ipuçlarını deneyebilirsiniz:
- Simgelerin dönüştürülmüş versiyonlarını (ör. başlangıç simgesinin hafifçe bitiş simgesine dönüştüğü veya bitiş simgesinin hafifçe başlangıç simgesine dönüştüğü hallerini) kullanın.
- Bir simgedeki şekilleri diğerinden (ör. bitiş simgesindeki şekilleri başlangıç simgesinden) gizleyin.
Önemli:
Wix dışında oluşturduğunuz SVG dosyaları için destek veya sorun giderme hizmeti sağlayamıyoruz.