Animasyonları WordPress web sitenize dahil etmek, yorgun bir web sayfasını canlandırmanın ve ziyaretçilerinizi sitenizde geçirdikleri süre boyunca meşgul tutmanın harika bir yoludur. Bunu yapmanın kolay ve etkili bir yolu, Lottie animasyonlarını kullanmaktır: yüksek kaliteli, hafif animasyonlar.
Lottie animasyonlarının popülaritesi birçok nedenden dolayı artıyor ve eğer çoğunluğa atlayıp web sitenizi güzelleştirmeye hazırsanız, tam size göre olabilir.
Bu animasyonları oluşturmanın ve bunları WordPress sitenize sorunsuz bir şekilde eklemenin birkaç farklı yolu vardır.
Lottie Animasyonları nedir?
Lottie , After Effects animasyonlarını oluşturan ve animasyon verilerinin tipik bir görüntü dosyası türü yerine JSON dosyaları olarak dışa aktarılmasına izin veren Android, iOS, Web ve Windows için bir kitaplıktır . Kısacası, statik bir varlığı eğlenceli ve ilgi çekici bir şeyle kolayca değiştirebilirler.
Bu açık kaynaklı çözüm ilk olarak AirBnB’deki ekip tarafından tanıtıldı, ancak farklı pazarlardaki tasarımcılar ve animatörler arasında hızla popülerlik kazanıyor. WordPress web sitenizde Lottie animasyonları kullanmanın büyük bir avantajı, dosya boyutunun GIF animasyonu veya mp4 dosyalarına kıyasla çok küçük olmasıdır. Ek olarak, esnek animasyon formatı, tarayıcının işlemeyi işlemesine olanak tanır.
Lottie animasyonlarını kullanmanın birçok olasılığı, bu kadar popüler olmalarının bir nedenidir. Lottie animasyonlarını hareketli başlıklar, düğmeler, göz alıcı grafik öğeler ve daha fazlası olarak kullanabilirsiniz. Ayrıca, animasyonu, ziyaretçiler web sayfasını kaydırdıkça, üzerine geldiğinde veya tıkladığında tetiklenecek şekilde ayarlayabilirsiniz. Hem B2C hem de B2B web siteleri için çok yönlülükleri ve kolay uygulanabilmeleri , web tasarımınızın kalitesini ve genel görünümünü iyileştirmek için onları oyunun kurallarını değiştiren bir yol haline getirir.
Lottie Animasyonları Oluşturma
Sitenize Lottie animasyonları ekleyip eklemeyeceğinizi düşünürken, öncelikle bir hisse senedi mi yoksa özel bir yaklaşım mı yapacağınıza karar vermeniz gerekir. Her birinin artıları ve eksileri vardır, bu nedenle karar vermeden önce her iki seçeneği de düşünmek akıllıca olacaktır.
Herhangi bir animasyon türünde, daha az her zaman daha fazladır. Bir web sitesinin yeniden tasarımına animasyonlu bir öğe eklerken , bu animasyonun müşterinin yolculuğunda hangi rolü üstlendiğini göz önünde bulundurun.
Adobe After Effects
Web siteniz için özel bir Lottie animasyonu arıyorsanız, Adobe After Effects konusunda uzmanlaşmış ve bu tür animasyonlara aşina olan bir animatör veya tasarımcıyla çalışmanız gerekir.
Pek çok Lottie animasyonu bir illüstrasyon stili kullanır, bu nedenle ilerlemeden önce bunun web sitesinin markasına ve stiline uyup uymadığına karar vermeniz gerekir. Grafik öğelerine ve animasyon efektlerine karar verdiğinizde, animatörün Adobe After Effects’te özel animasyonlar oluşturması ve After Effects uzantısını kullanarak bunları Lottie animasyonları olarak dışa aktarması gerekecektir. Bu, sitenize kolayca uygulanabilecek yüksek kaliteli bir animasyon oluşturacaktır.
Lottie animasyonlarının yüksek kaliteli olmasının bir nedeni, oluşturma sürecinin bir geliştirici veya mühendisin tasarımcının animasyonunu web formatında yeniden oluşturma ihtiyacını ortadan kaldırmasıdır. Animasyonların uygulanmasını her zamankinden daha kolay hale getiren kullanıma hazır bir çözüm sunar.
Lottie Files
Yeni tasarımınızı hızlandırmak istiyorsanız, hisse senedi Lottie animasyonları harika bir seçenektir. Mevcut bir hisse senedi Lottie animasyonunu arayabilir ve gerekirse markanıza uyacak şekilde özelleştirebilirsiniz.
Lottie Files , çok sayıda ücretsiz ve ücretli Lottie animasyonu bulabileceğiniz bir hisse senedi sitesidir. Site ayrıca indirmeden önce animasyonun renklerini düzenleyebileceğiniz bir düzenleme aracı da sunuyor. Bir animasyonda çok sayıda rengi değiştirmeniz gerekiyorsa, yetenekli bir animatör veya tasarımcı, bu değişiklikleri daha verimli yapmak ve animasyonu dışa aktarmak için Adobe After Effects’i de kullanabilir.
Bir sitede çok sayıda animasyon uygulamak istiyorsanız veya çok spesifik bir site estetiğiniz varsa, doğru stilde birden fazla stok seçeneği bulmak zor olabilir. Bu durumda, sitenize uyan ve önceden seçmiş olduğunuz hisse senedi seçenekleriyle eşleşen daha fazla animasyon oluşturmak için bir animatör tutmayı düşünebilirsiniz.
Herhangi bir türde stok animasyonu veya grafiği ile, stok animasyonları için lisanslama gereksinimlerini göz önünde bulundurun ve gerekirse animasyonu orijinal tasarımcıya katkıda bulunduğunuzdan emin olun.
WordPress’te Lottie Animasyonları Ekleme
Bir WordPress web sitesine Lottie animasyonları eklemek için oldukça sorunsuz bir işlemdir. Animasyon kodunu siteye eklemek için özel bir HTML widget’ı kullanabilir veya animasyonu eklemek için bir WordPress eklentisi kullanabilirsiniz.
Özel HTML Widget’ı
Yetenekli bir WordPress geliştiricisi, Lottie animasyonlarını siteye eklemek için küçük bir JavaScript kitaplığı ve özel bir HTML widget’ı kullanabilir. lottie.min.js komut dosyasını, animasyon .json dosyası ve tüm görüntü varlıklarıyla birlikte tema klasörüne yükleyerek başlayacaksınız. Ardından, .json animasyon dosyasını istenen kapsayıcı div’e yükleyen Lottie komut dosyasını başlatmak için pencere aracına eklenecek küçük bir JS parçacığı vardır.
Bu basitleştirilmiş yaklaşım, ek WordPress eklentileri ile sitenin yükünü azaltmaktan kaçındığı için çoğu WordPress sitesi için uygun olabilir. Lottie animasyonlarını eklerken, animasyonun döngü yapıp yapmayacağını, kaç kez döndüğünü ve sayfadaki animasyonlu öğeyi neyin tetikleyebileceğini de kontrol edebilirsiniz.
Bir geliştiricinin yardımı olmadan Lottie animasyonları eklemek için eklentilerin çoğu Elementor sayfa oluşturucu gerektirir, bu nedenle Elementor dışında bir tema veya sayfa oluşturucu eklentisi kullanıyorsanız özel HTML yaklaşımı daha iyi çalışma eğilimindedir.
Eklenti olmadan siteye öğeler eklemek, web sitesi hızı ve performansı için daha iyidir, çünkü daha fazla eklenti eklemek siteyi ağırlaştıracaktır.
WordPress Eklenti Seçenekleri
Bunu özel şekilde yapmak için bir geliştirici kullanmak istemiyorsanız, sitenize lottie widget’ları eklemek için başka bir seçenek de bir WordPress eklentisi kullanmaktır.
Elementor Pro – Lottie Widget
Elementor, WordPress için sürükle ve bırak özelliklerine sahip bir sayfa oluşturucudur ve Elementor Pro lisansı, Lottie widget’ını içerir . Bu widget ile kodsuz Lottie animasyonları ekleyebilir ve animasyonun boyutlarını ve davranışını özelleştirebilirsiniz. Bu eklenti, Lottie Files hisse senedi web sitesine kolayca bağlanır, böylece doğrudan siteden stok animasyon seçeneklerini kolayca seçebilir veya kendi kreasyonlarınızı yükleyebilirsiniz.
Gutenberg – Addon
Sitenizde Gutenberg editörünü kullanıyorsanız, Gutenberg için Ultimate Addon eklentisi , bir eklenti yardımıyla Lottie animasyonları eklemek için iyi bir seçim olabilir. Gutenberg editörü, WordPress 5.0 sürümünden bu yana WordPress çekirdeğinin bir parçası olmuştur, ancak en popüler olanı değildir. Birçok site hala klasik düzenleyiciyi veya Site Origin, Elementor veya Beaver Builder gibi diğer sayfa oluşturucuları kullanıyor.
Bununla birlikte, uygulanabilir bir seçenek. Gutenberg için Ultimate Eklentileri, iyi gözden geçirilmiş bir eklentidir ve Lottie animasyonları ekleme seçeneği ve animasyon hızı ve tetikleyici gibi gelişmiş seçenekleri kontrol etme seçeneği de dahil olmak üzere birçok harika özellik sunar.
Ek WordPress Eklentileri
Lottie animasyonlarını eklemek ve özelleştirmek için WordPress dizininde ek eklentiler bulunmaktadır . Elementor için Premium Eklentiler ve Elementor için Elementskit Eklentisi gibi bazı eklentilerin sitenizin oluşturulmasını ve Elementor’u kullanmasını gerektirdiğini unutmayın. Divi teması veya Gutenberg blokları gibi diğer WordPress temaları ve oluşturucuları için tasarlanmış eklentiler de vardır.
Animasyon Alma Zamanı
Lottie animasyonlarına, WordPress sitesi olan herkes son derece erişilebilir. İster özelleştirilmiş animasyonlar ister stok animasyonlar, kahraman animasyonları veya kayan animasyonlar isteyin, kaynaklar parmaklarınızın ucunda.
Animasyonlarınızın nasıl görünmesini istediğiniz ve ne yapmalarını istediğiniz konusunda yaratıcı olursunuz ve Lottie animasyonlarının olanaklarını keşfetmeye başladığınızda, bunların web sitenizin kalitesine ne kadar katkıda bulunabileceğini anlamaya başlayacaksınız. .
