WordPress'te Lottie Animasyonu nasıl eklenir

Bugün animasyon, web tasarımında kök saldı ve birçok web sitesi öğesine harika bir katkı gibi görünüyor. Web sitesine daha fazla hayat getiriyor ve insanların dikkati genellikle kullanımlarının ana nedeni olan animasyonları takip ediyor.

Yine de çok ağır animasyonlarla web sitenizi mahvetmeyin ve web sitenizin yüklenme süresini büyük ölçüde artırın!

2017'de tanıtılan Lottie dosyalarının JSON biçimli doğası, video veya GIF gibi diğer dosya biçimlerinden önemli ölçüde daha küçük oldukları anlamına gelir ve Lottie vektör animasyonu, Lottie dosyalarının herhangi bir boyuta büyütülebileceği veya küçültülebileceği anlamına gelir ve dosya inanılmaz derecede kalır kaliteden ödün vermeden pikselleşme olmadan küçük!

LottieFiles'ta 1500'ün üzerinde animasyon elde edebilir veya eklentiler aracılığıyla Figma, Adobe After Effects veya Adobe XD kullanarak kendiniz oluşturabilirsiniz.

Web sitenizi oluşturmak için WordPress'i kullanmak zahmetsizdir, WordPress şu anda bir web sitesi veya blog oluşturmanın dünyanın en popüler yoludur ve internetteki tüm web sitelerinin neredeyse yarısını destekler. WordPress, temel olarak, web sitenizin içerik gibi önemli yönlerini programlama hakkında hiçbir şey bilmenize gerek kalmadan yönetmeyi kolaylaştıran bir araç olan bir içerik yönetim sistemidir. Ayrıca, bir sayfa oluşturucu eklentisi kullanarak web sitenizi kolayca oluşturmanın ve WordPress'te daha fazla özelleştirme sağlamanın daha fazla yolu vardır.

Kullandığınız düzenleyiciye bağlı olarak WordPress'te Lottie animasyonu eklemenin birkaç yolu vardır.

Elementor'da Lottie Animasyonu Nasıl Eklenir

Elementor, WordPress için bir sayfa oluşturucu eklentisidir. Bir sayfa oluşturucu, HTML veya CSS ile uğraşmak zorunda kalmadan çarpıcı bir web sayfası oluşturmanıza olanak tanır. Elementor gibi sayfa oluşturucu — her şeyin sürüklenip bırakıldığı bir görsel düzenleyiciyle birlikte gelir. İlk olarak 2016'da piyasaya sürülen Elementor, daha genç sayfa oluşturuculardan biridir. Geç başlamasına rağmen, Elementor, yazı yazarken WordPress.org'da 5.000.000'den fazla aktif yüklemeyi hızlı bir şekilde rafa kaldırdı ve bu, Elementor'u bir nedenden dolayı en popüler sayfa oluşturucu haline getirdi.

Elementor kullanarak web sitenize Lottie animasyonu eklemek için önce Lottie dosyalarına ve Elementor Pro sürümüne sahip olmanız gerekir, böylece yalnızca Elementor Pro sürüm 2.10.0 veya üzeri sürümlerde bulunan Lottie Widget'ını kullanabilirsiniz.

İlk olarak, Lottie Widget'ını yerleştirmek için bir bölüm hazırlayın ve Lottie widget'ını Elementor düzenleyicisinden tuval alanına sürükleyin.

Ardından sol panelden Kaynak'ı seçin, Medya Dosyası'nı seçin ve yükle düğmesine tıklayın . LottieFiles'tan indirdiğiniz bir Lottie dosyasını kullanmak için – istediğiniz hizalamayı seçin, ayrıca Bağlantı seçeneğinde animasyona bir bağlantı verebilirsiniz.

Üçüncü taraf bir kaynaktan bir Lottie dosyası kullanmak istiyorsanız — Kaynağı Harici URL olarak değiştirin ve bağlantıyı aşağıda verilen alana yerleştirin.

Animasyon davranışını kontrol etmek için, Ayarlar bloğunu açın, adından da anlaşılacağı gibi, ilk seçenek Tetik seçeneğidir, çünkü animasyonun ne zaman oynamaya başlayacağını kontrol edin.

Seçebileceğiniz 4 tetikleyici vardır:

1. Görünüm alanı, animasyonu cihaz ekranınızın görünür alanına göre tetikler
2. Tıklandığında, tıklandığında animasyonu tetikler
3. Hover'da , animasyon kullanıcı imlecinin üzerine geldiğinde animasyonu tetikler
4. Kaydırma , sayfa kaydırıldığında animasyonu tetikler

Animasyonun döngüsünü ayarlamak, oluşturucu seçeneğini, animasyonun genişliğini seçmek ve animasyona hareket efekti vermek gibi daha fazla özelleştirme seçeneği için Elementor'da Lottie animasyonunun nasıl ekleneceğine dair önceki makalemizi okuyabilirsiniz.

Divi'de Lottie Animasyonu Nasıl Eklenir

Divi en popüler WordPress temasıdır, ancak Divi sadece bir temadan daha fazlasıdır, tek bir kod satırına dokunmadan güzel web siteleri tasarlamayı mümkün kılan bir web sitesi oluşturma çerçevesidir. Yerleşik bir görsel düzenleyici ile daha önce kullandığınız hiçbir WordPress temasına benzemez.

Divi'yi yalnızca Divi ve Extra ile sınırlı olmayan herhangi bir WordPress temasında kullanmak için, Divi ayrıca bağımsız bir eklenti olarak kullanılabilen sayfa oluşturucuya sahiptir, burada Divi Builder eklentisinin nasıl kurulacağı anlatılmaktadır.

Lottie Animation'ı Divi Builder'da kullanmak için, WordPress sitenize Divi Supreme eklentisini yüklemeniz ve önce etkinleştirmeniz gerekir. Eklentiyi WordPress.org'dan ücretsiz olarak edinebilirsiniz.

Daha sonra Divi Builder editöründe, Supreme Lottie Modülünü bir bölümün içindeki satıra ekleyin.

Modülü ekledikten sonra karşınıza bir panel çıkacak, verilen alana URL'yi yapıştırın veya indirdiğiniz Lottie dosyasını buraya yükleyebilirsiniz.

Animasyon hazır olduğunda, döngüyü etkinleştirme/devre dışı bırakma, gecikme hızı, yön, animasyon hızı ve görünüm penceresi gibi animasyon davranışını değiştirebilirsiniz.

Divi'de Lottie animasyonu nasıl eklenir hakkında daha detaylı bilgi için bir önceki yazımıza göz atabilirsiniz.

Brizy'de Lottie Animasyonu Nasıl Eklenir

Elementor ve Divi gibi popüler sayfa oluşturuculara katılan Brizy, basitliği, hafif düzenleyicisi ve sezgisel sürükle ve bırak arayüzü ile nispeten yenidir ve Brizy'yi web sitenizin sayfalarını oluşturmak için iyi bir seçim yapar.

Elementor'u daha önce kullandıysanız, buna alışmakta fazla zorluk çekmezsiniz, çünkü arayüz, özelleştirmek için sol paneli kullanan Elementor'un aksine, düzenleyiciye bir öğe eklemek için soldaki panel soldaki Elementor'a oldukça benzerdir. Brizy özelleştirmesinde öğeler, tıklandığında öğenin kendisindedir.

Brizy'de Lottie animasyonu eklemek için Brizy Pro'yu kullanmanız gerekir çünkü Brizy'deki Lottie öğesi yalnızca Pro sürümünde mevcuttur. Halihazırda Brizy Pro kullanıyorsanız, Brizy düzenleyici panelinde Lottie öğesini arayabilir ve tuval alanına sürükleyebilirsiniz.

Varsayılan animasyon yerleştirildikten sonra, öğe ayarları çubuğunu açmak için animasyona tıklayarak varsayılan bağlantıyı değiştirebilir veya Lottie Dosyasını değiştirmek için yükleyebilirsiniz, ardından Lottie simgesine tıklayın ve URL'yi üçüncü için Lottie Link'e yapıştırın. parti tarafından barındırılan animasyonu veya Lottie Dosyasını yüklemek için + düğmesini tıklayın. Animasyonunuz hazır olduktan sonra animasyon davranışını istediğiniz gibi ayarlayabilirsiniz.

Brizy'de Lottie animasyonunun nasıl ekleneceğine dair daha detaylı talimatlar için bir önceki yazımızı okuyabilirsiniz.

Gutenberg'e Lottie animasyonu nasıl eklenir

Gutenberg, WordPress 5'te tanıtılan yeni bir blok tabanlı düzenleyicidir. Klasik WordPress düzenleyicisinin yerini alır ve içeriğin oluşturulma biçiminde önemli bir değişikliktir. Gutenberg ile birden çok medya türü ekleyebilir ve blokları kullanarak düzenleyici içinde düzeni düzenleyebilirsiniz.

Guttenberg, sayfa oluşturucuların yaptığı gibi çarpıcı sayfalar oluşturabilse de, animasyon söz konusu olduğunda Gutenberg çok geride. Şimdiye kadar, animasyon eklemek için yerel bir özelliği yoktur ve Gutenberg'in Lottie animasyonu eklemek için yerel bir bloğu yoktur, ancak bir Lottie animasyonu eklemek için HTML bloğunu kullanabilirsiniz. Lottie animasyonunuzun LottieFiles üzerinde yaptığınız ayarlara göre hareket etmesi için animasyon davranışını kontrol etmek için herhangi bir ayar seçeneği sunmaz. Animasyon boyutunu bile ayarlayamıyorsunuz.

Blok için HTML kodunu almak için LottieFiles web sitesini ziyaret edebilir ve animasyonlardan birini seçebilirsiniz. Açılan pencerede Bu animasyonu şurada kullan bölümündeki HTML simgesine tıklayın. Animasyon boyutunu, hızını, yönünü ve oynatma modunu ayarlayabilirsiniz. Ayrıca arka plan rengi, animasyon kontrollerini etkinleştirme/devre dışı bırakma, otomatik oynatmayı etkinleştirme/devre dışı bırakma ve döngüyü etkinleştirme/devre dışı bırakma gibi şeyleri de ayarlayabilirsiniz. Ardından OLUŞTURULAN KOD bölümüne gidin ve oluşturulan kodu kopyalayın. Kopyaladığınız kodu yerleştirmek için Gutenberg editörüne HTML bloğu ekleyelim.

Animasyonun davranışı üzerinde biraz kontrol sahibi olmak için üçüncü taraf bir Gutenberg bloğu kullanabilirsiniz, yükleyebileceğiniz eklentilerden biri Lottie Animation bloğu da dahil olmak üzere bir dizi Gutenberg bloğu sunan Otter eklentisidir. Eklentiyi WordPress eklenti dizininden edinebilirsiniz.

Alt çizgi

Web sitenize animasyon vermek, insanların dikkatini çekmek ve daha canlı hale getirmek için iyi bir yol olsa da, web siteniz için doğru animasyon formatını seçmek çok önemlidir, bu nedenle web sitenizi çok ağır yüklemez ve bunun yerine insanları uzaklaştırır. Lottie animasyonu, hafif bir animasyon sunar ve herhangi bir boyuta büyütülebilir veya küçültülebilir ve dosya da inanılmaz derecede küçük kalır.