WordPress’e Lottie Animation Nasıl Eklenir
Bugün animasyon web tasarımında kökleşiyor ve birçok web sitesi öğesine iyi bir katkı gibi görünüyor. Web sitelerine daha fazla hayat getirir ve insanların dikkati genellikle animasyonu takip eder, bu da kullanımının ana nedenidir. Ancak, web sitenize çok ağır animasyonlarla zarar vermeyin ve web sitenizin yükleme süresini büyük ölçüde artırmayın! 2017 yılında tanıtılan Lottie dosyasının JSON formatının doğası, video veya GIF gibi diğer dosya formatlarından önemli ölçüde daha küçük oldukları anlamına gelir ve Lottie, Lottie dosyasının herhangi bir boyuta artırılabileceği veya indirilebileceği anlamına gelen animasyonlu bir vektördür ve Dosya, kaliteyi düşürmeden pikselizasyon olmadan olağanüstü küçük kalır!
Lottiefiles’da 1500’den fazla animasyon alabilirsiniz veya eklenti üzerinden Figma, Adobe After Effects veya Adobe XD kullanarak kendiniz yapabilirsiniz. Web sitenizi oluşturmak için WordPress kullanmak zor bir şey değildir, WordPress bugün bir web sitesi veya blog oluşturmak için dünyanın en popüler yoludur ve internetteki tüm web sitelerinin neredeyse yarısını destekler. WordPress, temel olarak, programlama hakkında hiçbir şey bilmeye gerek kalmadan içerik gibi web sitenizin önemli yönlerini yönetmeyi kolaylaştıran bir araç olan bir içerik yönetim sistemidir. Ve web sitenizi kolaylaştırmanın ve Page Maker eklentisini kullanarak WordPress’te daha fazla ayar yapmanın daha fazla yolu vardır.
Kullandığınız düzenleyiciye bağlı olarak WordPress’e Lottie Animation eklemenin birkaç yolu vardır. Elementor Elementor’a Lottie Animation nasıl eklenir WordPress için bir eklenti üreticisi sayfasıdır. Sayfa üreticisi, HTML veya CSS ile uğraşmak zorunda kalmadan şaşırtıcı web sayfaları oluşturmanıza olanak tanır. Elementors gibi sayfalar üreticileri – her şeyin sürüklediği ve bıraktığı görsel bir editörle birlikte gelir. Başlangıçta 2016 yılında başlatılan Elementor, genç sayfalardan biriydi. Geç başlamasına rağmen, Elementor yazma sırasında WordPress.org adresinde 5.000.000’den fazla aktif kurulum toplar ve bu, Elementor’u bir nedenden dolayı en popüler sayfa üreticisi yapar. Elementor kullanarak web sitenize Lottie animasyonu eklemek için, Önce Lottie Dosyaları ve Elementor Pro sürümüne sahip olun, böylece yalnızca Pro Elementor sürüm 2.10.0 veya daha yüksek olan Lottie Widget’ı kullanabilirsiniz. İlk olarak, parçayı Lottie Widget’ı yerleştirmeye hazırlayın ve Lottie Widget’ı Elementor Editor’un tuval alanına sürükleyin.
Ardından sol panelden kaynağı seçin, medya dosyasını seçin ve Yükle düğmesini tıklayın
Animasyon kullanıcı imleci tarafından yönlendirildiğinde animasyonu tetikler animasyon
Scroll, sayfa açıldığında animasyonu tetikler
Animasyonlu döngüler ayarlamak, oluşturucu seçenekleri seçmek, animasyon genişliği ve animasyona hareket efektleri vermek gibi daha fazla özelleştirme seçenekleri için Elementor’a Lottie Animation’ın nasıl ekleneceğine dair önceki makalemizi okuyabilirsiniz.
Divi Divi’de Lottie Animasyonu Nasıl Eklenir En popüler WordPress temasıdır, ancak Divi bir temadan daha fazlasıdır, bu, tek bir kod satırına dokunmadan güzel bir web sitesi tasarlamayı mümkün kılan bir web sitesi yapmak için bir çerçevedir. Varsayılan görsel düzenleyici ile bu, daha önce kullandığınız WordPress teması gibi değildir. Divi ve ekstra ile sınırlı olmayan herhangi bir WordPress temasında Divi’yi kullanmak için Divi, burada Divi Builder eklentisinin nasıl kurulacağı konusunda bağımsız bir eklenti olarak kullanılabilir bir sayfa üreticisine sahiptir. Divi Builder’da Lottie Animation’ı kullanmak için Divi Supreme eklentisini WordPress sitenize yüklemeniz ve önce etkinleştirmeniz gerekir. WordPress.org adresinden ücretsiz bir eklenti alabilirsiniz.
Daha sonra Divi Builder’ın editörüne, bölümdeki satıra en yüksek lottie modülünü ekleyin.
Modülü ekledikten sonra bir panel görünecektir, URL’yi verilen alana yapıştırır veya içine indirilen Lottie dosyasını yükleyebilirsiniz.
Animasyon hazır olduktan sonra, döngüleri etkinleştirme/devre dışı bırakma, gecikme hızını, yönü, animasyon hızını ve görünümünü değiştirme gibi animasyonlu davranışları değiştirebilirsiniz. Divi’ye Lottie Animation’ın nasıl ekleneceğine dair daha ayrıntılı talimatlar için önceki makalemize başvurabilirsiniz. Brizy’de Lottie Animation nasıl eklenir, Elementors ve Divi gibi popüler sayfalara, nispeten brizy gibi popüler sayfalara, basitlik, hafif editörler ve sezgisel ve gevşek ve gevşek arayüzler kombine yapmak, brizy yapmak web sitesi sayfalarınızı oluşturmak için iyi bir seçimdir. . Önceki Elementor kullanıyorsanız, o zaman buna alışmak için pek çok zorlukla karşılaşmayacaksınız, çünkü arayüz, editöre element eklemek için soldaki sol panelle elemente çok benziyor, elementin aksine, Elemanı ayarlamak için sol paneli kullanır, fırça özelleştirmesinde tıklandığında öğenin kendisinde bulunur. Brizy’ye Lottie Animation eklemek için Brizy Pro’yu kullanmalısınız çünkü Brizy’deki Lottie Element sadece Pro sürümünde mevcuttur. Brizy Pro’yu kullandıysanız, Brzy Editor Panelinde Lottie Elements bulabilir ve tuval alanına sürükleyebilirsiniz.
Varsayılan animasyon var olduktan sonra, varsayılan bağlantıyı değiştirebilir veya değiştirmek için bir lottie dosyası yükleyebilirsiniz, öğe ayar çubuğunu açmak için animasyonu tıklayarak, ardından Lottie simgesini tıklayıp URL’yi üç- Lottie bağlantısına yapıştırabilirsiniz. Barındırılan parti animasyonu veya dosyayı yüklemek için + tıklayın.Animasyonunuz hazır olduktan sonra, animasyonlu davranışı istediğiniz gibi ayarlayabilirsiniz.Brizy’de Lottie Animation’ın nasıl ekleneceğine dair daha ayrıntılı talimatlar için önceki makalemizi okuyabilirsiniz.Gutenberg Gutenberg’de Lottie Animation Nasıl Eklenir Gutenberg, WordPress 5’te tanıtılan yeni bir blok tabanlı editördür. Bu, klasik WordPress editörünün yerini alır ve bu oluşturulan içerik yönteminde önemli bir değişikliktir.Gutenberg ile birkaç tür medya ekleyebilir ve blokları kullanarak düzenleyicideki düzeni yönetebilirsiniz. Guttenberg, sayfa üreticisi gibi muhteşem sayfalar oluşturabilirken, Gutenberg animasyonda çok geride. Şimdiye kadar, animasyon eklemek için orijinal özelliği yok ve Gutenberg’in Lottie animasyonu eklemek için orijinal bloğu yok, ancak Lottie animasyonu eklemek için HTML bloğunu kullanabilirsiniz. Bu, animasyonlu davranışı kontrol etmek için bir ayar seçeneği sunmaz, böylece Lottie animasyonunuz Lottiefiles’da yaptığınız ayarlara göre davranır. Animasyonun boyutunu bile ayarlayamazsınız. Blok için HTML kodu almak için Lottiefiles web sitesini ziyaret edebilir ve hayvanlardan birini seçebilirsiniz. Görünen pencerede, bölümdeki HTML simgesini tıklayın Bu animasyonu kullanın. Animasyon, hız, yön ve oyun modunun boyutunu ayarlayabilirsiniz. Ayrıca arka plan renkleri gibi şeyleri ayarlayabilir, animasyonlu kontrolleri etkinleştirebilir/devre dışı bırakabilir, otomatik oyunu etkinleştirebilir/devre dışı bırakabilir ve döngüleri etkinleştirebilir/devre dışı bırakabilirsiniz. Ardından oluşturulan koda kaydırın ve elde edilen kodu kopyalayın. Kopyaladığınız kodu yerleştirmek için HTML bloğunu Gutenberg editörüne ekleyelim.
