WordPress'te Lottie Animasyonları Nasıl Eklenir (4 Basit Adım)

Lottie animasyonlarını WordPress'te kullanmak, sayfalarınızı süslemek için harika bir yol olabilir. Genellikle hafif ve özelleştirilebilirdirler ve bu nedenle kullanıcı deneyiminize (UX) zarar vermeden ilgi çekici içerik oluşturmanıza yardımcı olabilirler. Ancak, onları sitenize eklemek için stressiz bir yol arıyor olabilirsiniz.

Neyse ki, süreç düşündüğünüzden daha kolay. Otter Blocks gibi bir eklenti kullanarak Lottie animasyonlarınızı birkaç tıklamayla ekleyebilir ve özelleştirebilirsiniz. Ayrıca, doğru zamanda oynamaları için görünürlük koşullarını da ayarlayabileceksiniz.

Lottie animasyonlarına giriş

Lottie, web animasyonları için açık kaynaklı bir dosya biçimidir. Markanız için özel animasyonlar oluşturmanıza ve bunları web sitenizde kullanmanıza olanak tanır:

Tabii ki, her zaman GIF'leri tercih edebilirsiniz, ancak bu dosyalar sitenizi ağırlaştırabilir. Lottie animasyonları GIF'lerden çok daha küçüktür. Bu nedenle, kullanıcı deneyiminizi korurken ve hızlı yükleme süreleri sağlarken sitenizi daha ilgi çekici hale getirmenize yardımcı olabilirler.

Ek olarak, Lottie animasyonları birçok özelleştirme seçeneğiyle birlikte gelir. Kitaplığın kendisi kapsamlıdır ve binlerce öğeye, karaktere ve resme erişim sağlar. Ancak, renkleri değiştirebilir, ekran ayarlarını değiştirebilir ve görünürlük koşulları ekleyebilirsiniz.

Özel animasyonlar, ziyaretçilerinizi etkilemenize yardımcı olabilir. Ayrıca, sitenizin taze ve benzersiz görünmesini sağlayabilirler.

Lottie animasyonları WordPress'e nasıl eklenir (4 adımda)

Artık Lottie Animations hakkında biraz daha bilgi sahibi olduğunuza göre, onları WordPress web sitenize nasıl ekleyeceğinize bakalım:

1. Adım: Su Samuru Bloklarını kurun ve etkinleştirin

Lottie animasyonlarını WordPress'e eklemenin birçok yolu vardır. Örneğin, HTML ve JavaScript kullanabilirsiniz. Ancak, bu yöntem oldukça karmaşık olabilir.

Alternatif olarak, tüm sayfa oluşturucularla uyumlu olmasa da Lottie animasyon eklentisini kullanabilirsiniz. Artı, pek çok stilistik seçenek sunmuyor.

Lottie Animations'ı sitenize eklemenin en kolay yolu, Otter Blocks gibi bir eklenti kullanmaktır:

Bu eklenti, Lottie animasyonları için bir blok da dahil olmak üzere sitenize yeni içerik blokları ve şablonlar ekler. Ayrıca Blok Düzenleyicinin işlevselliğini özel CSS, animasyonlar, görünürlük koşulları ve daha fazlasıyla genişletir. Bu nedenle, sayfalarınızı daha verimli tasarlamanıza yardımcı olur ve sayfa oluşturuculara olan ihtiyacı azaltır.

Otter Blocks Pro'ya yükseltirseniz, özel WooCommerce blokları ve ek biçimsel ayarlar gibi gelişmiş özelliklere erişim elde edersiniz. Ancak, Lottie animasyonları özelliğini kullanmak için Pro sürümüne ihtiyacınız yoktur.

Ücretsiz sürümü kullanmak istiyorsanız, WordPress kontrol panelinizde Eklentiler > Yeni Ekle'ye gidin ve "Otter Blocks"u arayın:

Ardından, Yükle > Etkinleştir'e tıklayın. Artık Blok Düzenleyicide bir dizi yeni blok görmelisiniz.

2. Adım: Lottie kitaplığından bir animasyon seçin

Artık web sitenizde Otter Blocks'u kurduğunuza göre, bir animasyon seçmek için Lottie kitaplığına gidebilirsiniz. Tasarımlara erişmek için ücretsiz bir hesap oluşturmanız gerekecek.

Profilinizi oluşturduktan sonra, Keşfet'e gidin ve Ücretsiz Kullanıma Hazır Animasyonlar'ı seçin:

Burada, web sitelerinde, uygulamalarda ve sosyal medyada kullanılabilecek bir Lottie öğeleri kitaplığına göz atabilirsiniz:

Kullanmak istediğiniz bir animasyon bulduğunuzda tasarıma tıklayın. Animasyonun görünümünde bazı değişiklikler yapabileceğiniz bir açılır pencere görünecektir:

Örneğin, animasyon hızını ayarlayabilir ve arka plan rengini değiştirebilirsiniz. Katman Renklerini Düzenle'ye tıklarsanız, Lottie Editör'e yönlendirilirsiniz:

Burada, tasarımın herhangi bir bölümünün rengini özelleştirebilirsiniz. Öğenin değiştirmek istediğiniz bir bölümüne tıklayın, Tüm renkler'e gidin ve yeni bir ton uygulamak için renk seçiciyi kullanın:

Beğenmediğiniz bir değişiklik yaparsanız, ekranın sol üst köşesindeki Geri Al okuna tıklayın.

3. Adım: Lottie animasyon URL'sini Su Samuru Bloğunuza yapıştırın veya Lottie dosyasını yükleyin

Tasarımınızdan memnun olduğunuzda, onu WordPress'e eklemek için iki seçeneğiniz vardır:

1. LottieFiles sunucusundaki sürümü sitenize eklemek için Lottie Animasyon URL'sini kopyalayabilirsiniz. Bunu, tasarımın hemen altında, animasyon açılır pencerenizde bulacaksınız.
2. Bitmiş LottieFile dosyasını sağ üst köşedeki İndir düğmesine tıklayarak ve dotLottie formatını seçerek bilgisayarınıza indirebilirsiniz. Bu, dosyayı sunucunuzda barındırmanıza izin verecektir.

Ardından, WordPress sitenize dönün ve sayfayı açın veya animasyonunuzu eklemek istediğiniz yere gönderin.

Yeni bir blok eklemek için tıklayın ve “Lottie Animations:” için arama yapın:

Bloğu sayfanıza ekleyin. Ardından, şu seçeneklerden birini seçin:

• URL'den ekle – LottieFiles sunucularındaki Lottie dosyasının bağlantısını girmek istiyorsanız bunu kullanın. Tek yapmanız gereken, LottieFiles web sitesinden kopyaladığınız Lottie Animation URL bağlantısını yapıştırmak.
• Yükle – gerçek dotLottie dosyasını LottieFiles'tan indirdiyseniz bunu kullanın. Daha sonra bu dosyayı WordPress sitenize yükleyebilirsiniz.

Ardından, Enter'a basın ve animasyon sayfada görünecektir:

Artık değişikliklerinizi kaydedebilir ve son adıma geçebilirsiniz.

4. Adım: Animasyonunuzu Otter Blocks ile özelleştirin

Artık Lottie animasyonlarınızı WordPress'e eklediğinize göre, tasarımı ve düzeni özelleştirmeye hazırsınız. Engelleme ayarlarında, bir dizi görüntüleme seçeneği göreceksiniz.

TETİKLEYİCİ altında, otomatik oynatma , kaydırma , üzerine gelme veya tıklama arasında seçim yapabilirsiniz. Animasyon, sayfada şu işlemlerden biri tamamlanana kadar oynatılmaz:

Ayrıca, döngüde oynatmak için animasyonu değiştirme seçeneğiniz de vardır. Ayrıca kaydırıcıyı kullanarak animasyonunuzun hızını ayarlayabilir, yönü tersine çevirebilir ve tasarımın genişliğini değiştirebilirsiniz.

Arka plan rengini değiştirmek istiyorsanız, Arka Plan sekmesine tıklayın. Burada, varsayılan Düz seçeneklerden birini seçebilir, renk seçiciyi kullanabilir veya degrade bir arka plan seçebilirsiniz:

Görünürlük Koşulları'na giderseniz, animasyonunuzu yalnızca belirli durumlarda görünecek şekilde yapılandırabilirsiniz:

Örneğin, bloğun yalnızca oturum açmış kullanıcılar tarafından görülebilmesini veya belirli bir tarihte görüntülenmesini isteyebilirsiniz. Bunu yapmak için Kural Grubu Ekle'ye tıklayın. Ardından, ayarları açmak için oku seçin:

KOŞUL altında, görünürlük ayarlarınızı yapılandırmak için açılır menüyü kullanın. Birden fazla koşul ekleyebilir ve ek kural grupları oluşturabilirsiniz.

WordPress'te Lottie animasyonlarını kullanmaya başlayın

Özetlemek gerekirse, WordPress'te Lottie animasyonları eklemek için dört adım:

Yerel WordPress editörünü iyileştirmenin daha da fazla yolu için, en iyi WordPress blok eklentileri koleksiyonumuza göz atabilirsiniz.

Lottie Animations'ı WordPress'e eklemekle ilgili herhangi bir sorunuz var mı? Aşağıdaki yorumlar bölümünde bize bildirin!