Modern online izleyiciler, seçim yapmakta zorlanırlar. Bir web sitesi oluşturmak her zamankinden daha kolay ve WordPress ile hemen hemen herkes istediği hemen hemen her şeyi inşa edebilir ve bunun çoğunu hiçbir para ödemeden, yalnızca kişisel yetenek, beceri ve tasarım becerisine yatırım yaparak yapabilir. Marka otoritenizi içerik pazarlaması yoluyla oluşturmak iyi ve güzel. Fakat iyi içerik her şey değildir. Yeni ziyaretçiler çekmek istiyorsanız bazen göz alıcı bir özelliğe ihtiyacınız vardır. İşte sizinle tam olarak bunun hakkında konuşmak için buradayız: Lottie animasyonları ve WordPress.
Lottie WordPress animasyonlarının ne olduğunu, nasıl oluşturulabileceğini, erişilebileceğini ve kullanılabileceğini ve WordPress web sitenizin kullanıcı deneyimini ve izlenimini nasıl etkileyebileceğini kısaca tartışacağız. İşte hakkında konuşacağımız şey:
-
Lottie Animasyonları Nedir?
-
Lottie Animasyonları Nasıl Oluşturulur
-
Stok Lottie Animasyonları
-
Bir WordPress Eklentisi Kullanarak Lottie Animasyonları Nasıl Eklenir?
Lottie Animasyonları Nedir?
Lottie animasyonları, animasyon varlıklarından oluşan bir kitaplık olan LottieFiles’a ait animasyonlardır. Windows, iOS ve Android ile eşit derecede iyi çalışır, ücretsiz ve açık kaynaklıdır. Teknik açıdan kısacası animasyonlar, Adobe After Effects animasyon verilerinin JSON dosyaları olarak işlenmesiyle üretilir. Lottie animasyonları basit olabilir. Fakat iyi tarafı, boyutlarının küçük olması ve kitaplığın kendisinin kolayca animasyonlu düğmelere, başlıklara veya basit arka plan öğelerine dönüştürülebilen öğeler içermesidir.
Bu durum statik varlıklarınızın bir kısmını veya tamamını (görsel karmaşaya karşı tavsiye etmemize rağmen) dinamik olanlarla, depolama alanı ve yükleme süreleri açısından neredeyse hiçbir masraf olmadan değiştirebileceğiniz anlamına gelir. Temel olarak bir .json fiyatına (ölçeklenebilir!) bir .gif veya .mp4 alırsınız.
Lottie Animasyonları Nasıl Oluşturulur
Daha önce de belirttiğimiz gibi Lottie animasyonları Adobe After Effects kullanılarak yapılmaktadır. Benzer animasyonlar başka yazılımlar kullanılarak da oluşturulabilir. Fakat Adobe After Effects endüstri standardıdır.
Lottie animasyonlarıyla, genellikle bir geliştiricinin yaptığı gibi, bir animasyonu web formatına dönüştürmeniz gerekmez. Statik grafik öğelerinizden animasyonlar oluşturmak ve bunları uygun Adobe After Effects uzantısını kullanarak .json dosyaları olarak dışa aktarmak için Adobe After Effects kullanımı konusunda eğitim almış bir tasarımcıya ihtiyacınız vardır.
Fakat sıfırdan bir şey yapmanıza gerek yoktur: Lottie Files web sitesindeki hazır animasyonları aşağıdaki bölümde anlatıldığı gibi kullanabilirsiniz.
Stok Lottie Animasyonları
Tam olarak ne istediğinizi istiyorsanız, bu size pahalıya patlayacaktır. Özel işler her zaman pahalıdır. Tasarım estetiği ve nöropazarlamanın en ileri noktaları hakkında harika içgörülere sahip olabilirsiniz. Fakat web siteniz için animasyonlar tasarlarken bu bilgiyi uygulamaya ayıracak bütçeniz yok. Bu durum web sitenizin statik varlıklara mahkum olduğu anlamına gelmez: web sitenizi daha zengin hale getirmek için Lottie Files’ın hem ücretsiz hem de ücretli stok animasyon kitaplığını kullanabilirsiniz.
Web sitesinin kendisi ayrıca, bir tasarımcıya erişiminiz olmadan Lottie animasyonlarını düzenlemeniz için araçlar sunar. Tasarımcılar ayrıca kendi animasyonlarını satışa sunabilirken, web geliştiricileri ve tasarımcılar bağımsız olarak üretilmiş animasyonları satın alabilir veya gerektiğinde animatör kiralayabilir.
Bir WordPress Eklentisi Kullanarak Lottie Animasyonları Nasıl Eklenir?
Özel bir HTML parçacığı kullanarak WordPress’e Lottie animasyonları eklemenin yolları vardır. Fakat bunu yapmanın daha kolay yolları da vardır. Örneğin Elementor kullanıyorsanız (ve neden olmasın); özellikle Elementor Pro’da, arka uçta animasyonları kolaylıkla tanıtmanıza izin veren bir Lottie widget’ınız zaten var.
Gutenberg kullanıcısıysanız Spectra’yı kullanabilirsiniz. Eskiden Ultimate Addons For Elementor olarak bilinen eklenti, kolayca animasyon ekleyebileceğiniz bir Lottie animasyon bloğu da sunar. Aynı işlevselliğe sahip başka eklentiler de var. Fakat bu gösteri için yapacağımız şey bu.
Gutenberg’in kurulu ve aktif olması gerekir. Gutenberg’i devre dışı bırakmadıysanız, bu varsayılan olarak kullanılabilir olmalıdır. Hatta bir Lottie hesabınızın olması gerekir. Lottie hesapları ücretsizdir ve kaydolmak kolaydır. Tek ihtiyacınız olan çalışan bir e-posta adresi. Daha sonra Spectra’yı kurun ve etkinleştirin.
Bir sayfa oluşturup ona bir başlık vererek başlayacağız. Daha sonra bir blok eklemek için artı işaretine tıklayın ve Lottie bloğunu seçin.
Bu bloğu doldurmanın birkaç yolu vardır. Bir .json dosyası yükleyebilir, Medya Kitaplığınızdan bir tane seçebilir veya URL’den Ekleyebilirsiniz.
Kayıtlı bir Lottie kullanıcısıysanız, bir .json dosyasını kolayca indirebilirsiniz. Kütüphanede bir animasyon bulun (bu sevimli küçük mavi ahtapot için gittik) ve İndir düğmesine tıklayın ve açılır menüden Lottie JSON seçeneğini seçin.
Herhangi bir nedenle WordPress web sitenize dosya eklememeyi tercih ederseniz, aşağıdaki menüden animasyon URL’sini alabilirsiniz. Burada ayrıca Animasyon Hızını artırma, Arka Plan Rengini değiştirme veya kaldırma, oEmbed veya iFrame kodu alma, Katman Renklerini Düzenleme ve daha fazlası için seçeneklere erişebilirsiniz.
Geliştiricilerin Etkileşim Kılavuzuna da erişebilirsiniz. Fakat bu seçeneği ileri düzey kullanıcılara tavsiye ediyoruz. Animasyonunuzu etkileşimli bir öğeye dönüştürdüğünüz yer burasıdır; burası onu bir düğme haline getirdiğiniz, oynattığınız veya şartlı olarak döngüye aldığınız yerdir. Deneyimli bir geliştiriciyseniz, yukarıda tartışıldığı gibi özel bir HTML widget’ı oluşturmayı da deneyebilirsiniz.
Ahtapot animasyonumuzu indirdik ve Upload butonuna basarak yükleyeceğiz. Sabit sürücünüzdeki konumunu bulun ve dosyayı yükleyin.
Son olarak ahtapot artık test sitemizin hain sularında yüzüyor.
Konu Özeti
Gördüğünüz gibi, web sitenize animasyon eklemek hızlı ve kolaydır (veya olabilir) ve size tek bir kuruşa mal olması gerekmez. Animasyonlar oluşturmak ve onları etkileşimli hale getirmek, tamamen farklı bir su ısıtıcısıdır – veya ahtapotlar. Yine de, web sitenizi biraz daha renkli ve biraz daha dikkat çekici hale getirmenin bir yolunu arıyorsanız, bunu sadece birkaç fare tıklamasıyla ve size hiçbir ek ücret ödemeden yapabilirsiniz. Parmaklarınızın ucunda basit ama yüksek kaliteli animasyonlardan oluşan eksiksiz bir kitaplık var. Tek yapmanız gereken bir eklenti yüklemek ve suları test etmeye başlayabilirsiniz.