Lottie WordPress Tutorial: Lottie’yi WordPress’te kullanmak için en iyi eklenti
WordPress sitenize Lottie Animation eklemenin kolay yollarını mı arıyorsunuz? Ya da Lottie’nin ne olduğu ve neden umursamalısınız hakkında kafası karıştı? Lottie Animation’a aşina mısınız yoksa terimin ne anlama geldiğini bilmiyor musunuz, bu yazı size yardımcı olacaktır. İlk olarak, Lottie’nin animasyonunun ne olduğunu ve WordPress siteniz için nasıl yararlı bir araç olabileceğini açıklayarak başlayacağım. Ardından, iki farklı yöntem kullanarak sitenizde WordPress Lottie animasyonunu nasıl ayarlayacağınızı adım adım göstereceğim. Lottie Animation’a alışkınsanız ve yalnızca öğretici için burada, doğrudan öğretici bölümüne gitmek için bu bağlantıya da tıklayabilirsiniz.
Lottie animasyonu nedir? Kısacası, Lottie, WordPress sitenize (veya diğer web sitelerinize) harika animasyonlar eklemenizi çok kolaylaştırır. Bu, Airbnb’deki insanlar tarafından geliştirilen ve Bodymovin ile JSON olarak ihraç edilen etkilerin animasyonunu çözmenizi sağlayan bir kütüphanedir. Ardından, orijinali web sitenizde (veya hücresel uygulamalarda) oluşturabilirsiniz. Dürüst olmak gerekirse, Lottie hakkında birçok konuşma başımı geçti çünkü bir mühendis/tasarımcı değildim. Bilmeniz gereken tek şey, Lottie’nin WordPress’e animasyon eklemeyi kolaylaştırmasıdır.
Biçimin kendisi hakkında daha fazla bilgi edinmek istiyorsanız, Airbnb tanıtım yayınını görebilirsiniz. Lottie Animation örnekleri Lottie animasyonunun ne olduğunu ve nasıl yararlı olabileceğini bulmanın en iyi yolu onu tek başına deneyimlemektir. Bunu yapmak için Lottiefiles web sitesine ve PEEK’e gidebilirsiniz.
Aşağıda bağlı makaleler
Çeşitli kullanım ve niş vakaları için birçok farklı animasyona göz atabilirsiniz. Bu animasyonun birçoğu kullanmak ücretsizdir. Ancak, Creative Commons – Atıf Lisansı altında lisanslanmıştır, yani ücretsiz kullanabilirsiniz, ancak web sitenize atıf sağlamanız gerekir. Lottie animasyon nasıl çalışır? Daha önce de belirttiğim gibi, Lottie’nin animasyonu JSON’u formatı olarak kullanıyor. Temel olarak, bu, GIF veya “sıradan” animasyonlu görüntüler gibi çalışmadıkları anlamına gelir. Bunun yerine, şuna benzeyen büyük bir kod dosyası:
Evet, rastgele görünen bu büyük JSON kodu koleksiyonu, sitenizin önünde harika bir animasyona dönüşen şeydir. Ancak, Lottie’nin animasyonu bu biçimi kullandığından, sadece gidip Sitenize GIF gibi ekleyemezsiniz. Bu yazının geri kalanı bir rol oynuyor … WordPress’te Lottie Animation’ı nasıl kullanılır çünkü bu bir WordPress öğreticisi olduğu için, nereye gittiğini tahmin edebilirsiniz …
WordPress’e Lottie Animation eklemenin en kolay yolu – Wait – Lottie WordPress animasyon eklentisidir. Bu öğreticide, çalışmayı tamamlamak için iki ayrı eklentinin nasıl kullanılacağını göstereceğim:
WP Bodymovin – Bu ücretsiz eklenti, Lottie animasyonu eklemenizi ve ardından kısa bir kod kullanarak sitenizde herhangi bir yerine sabitlemenizi sağlar.
Elementors – Pro Elementors özel bir lottie widget içerir ve ücretsiz uzantılar da bulabilirsiniz.
Ama buna ulaşmadan önce, önce kullanmak istediğiniz Lottie animasyonunu bulmalısınız ve json …
1. Animasyonu seçin ve başlamak için JSON dosyasını bulun, kullanılacak animasyonlar bulmanız gerekir.
Bunu yapmanın en kolay yolu, daha önce bahsettiğim Lottiefiles web sitesini kullanmaktır. Bu sitedeki birçok animasyon ücretsizdir ve uygun Lottie JSON formatını kullanmıştır, bu da içeriğinize girmenin çok kolay olduğu anlamına gelir. Ücretsiz animasyondaki lisansın atıf vermenizi gerektirdiğini unutmayın. BodyMovin eklentisini kullanarak dışa aktarabileceğiniz animasyonlu efektler sağlayan birçok kaynak da bulabilirsiniz. Bununla birlikte, bu, özellikle etkilere alışık değilseniz, ekstra karmaşıklık ekler. Bu yaklaşımı bulmak için iyi bir yer Envato unsurlarıdır.
Ancak, Lottiefiles’ı kullanmaya devam edeceğim çünkü şimdiye kadar en kolay seçenek. Tüm ücretsiz animasyonları bulmak için animasyon bölgesine gidin. Ne sevdiğinizi bulduktan sonra açmak için tıklayın. Bu WordPress çarkı tarafından yönlendirilen araba animasyonunu seçtim – neden var olduğundan emin değilim, ama şunları mutluyum:
Ardından, .json dosyasını bilgisayarınıza indirmek için JSON İndir düğmesine tıklayın (dosyayı indirmek için bir hesap kaydetmelisiniz, ancak ücretsizdir). 2. WordPress’e Lottie Animation ekleyin Animasyonunuz için bir JSON dosyası olduğunda, animasyonunuzu WordPress’te görüntülemeye hazırsınız.
Bir kez daha size burada iki seçenek verdim:
WP Bodymovin – Animasyonları kısa kodlar kullanarak herhangi bir yere yerleştirmenizi sağlar.
Elementor – Herhangi bir Elementor tasarımına animasyon eklemenizi sağlar.
WPPPress.org adresinden ücretsiz WP BodyMovin eklentisini başlatmak, yüklemek ve etkinleştirmek için WP Bodymovin. Ardından, Animasyonları Aç → Yeni ekleyin ve aşağıdaki adımları izleyin: Hatırlamanıza yardımcı olacak bir başlık verin.
JSON veri dosyası seçmenlerini kullanarak json dosyalarını yükleyin.
Dosyaları yüklemek ve önizleme oluşturmak için Yayınla’yı tıklayın.
Aşağıda bağlı makaleler
Şimdi önizlemeyi doğrudan animasyonunuzdan göreceksiniz.
Bunun altında, animasyonlu yüzdenizi seçin – SVG olarak bırakmanızı öneririm. Ardından, daha fazla yapılandırmak için bir kısa kod jeneratörü kullanın. Örneğin, animasyonunuzu tekrar tekrar yapmak için döngü animasyon kutusunu kontrol edeceksiniz. Ayrıca, performansı artırmak için görünüm alanı dışındayken yavaş yükleme ekleyebilir ve animasyonu durdurabilirsiniz.
Bir seçim yaptıktan sonra kısa kodu kopyalayın. Ardından, kısa kodu yalnızca animasyonunuzun görünmesini istediğiniz yere eklemeniz gerekir:
Ve sonra sitenizde göreceksiniz:
İşte burada! Daha fazla animasyon eklemek için işlemi tekrarlayın. Elements Bir Elementor Pro’nuz varsa, Elementor tasarımınızda kullanabileceğiniz kendi Lottie Animation Widget’ı içermiştir. Bir Elementor Pro’nuz yoksa, WordPress.org’da size ücretsiz bir lottie widget’ı veren ücretsiz bir eklenti Elementor da bulabilirsiniz. Örneğin, ücretsiz animentor eklentileri. Elementor Pro’yu kullanıyor ve tavsiye ediyoruz, bu yüzden bu öğretici için kullanacağım. Başlamak için, tek yaptığınız Lottie Widget’ı animasyonunuzun görünmesini istediğiniz yere sürüklemektir. Ardından, JSON dosyalarını doğrudan widget ayarlarına yükleyebilirsiniz (Elementor, bunu yapmak için JSON’un yüklemesini etkinleştirmenin gerekli olduğu konusunda sizi uyarır – WordPress varsayılan olarak devre dışı bırakır): Ve bu sadece! Lottie animasyonunuzu tasarımınızda göreceksiniz. Nasıl çalıştığını kontrol etmek için tetikleyicileri, tekrarları, oynatma hızlarını, yavaş yükleme ve diğerlerini kontrol etmek için widget’taki ayarları genişletebilirsiniz:
