Elementor’a bir piyango ekleyin
Bu makalede Elementor Maker’a Lottie dosyaları eklemeyi tartışacağız. En son halka açık elementleri yenilerken, çok adımlı form ve Lottie animasyonuna erişim sağlandı. Lottie animasyonunun ne olduğunu, potansiyel kullanım senaryosunu ve web sitenize nasıl koyulacağını tartışacağız. Lottie dosyası nedir? “Lottie” veya “Lottie Dosyası” veya “Lottie Animation”, Adobe After Effects kullanarak görüntüleri canlandırmanıza ve orijinali web sitelerinde, hücresel uygulamalarda ve daha fazlasında oluşturmanıza olanak tanıyan bir kütüphanedir. Kendi Lottie animasyonunuzu oluşturmak istiyorsanız, iş akışı oldukça basittir. İlk olarak, Adobe After Effects kullanarak ilk animasyonunuzu oluşturun. Ardından, BodyMovin adlı Adobe After Effect eklentisini kullanarak .json dosyası olarak dışa aktarın. Aşağıdaki görünüm:
Lottie’yi kullanarak bu animasyonlu görüntüyü web sitelerinde, uygulamalarda ve diğer dijital varlıklarda birleştirebilirsiniz. Lottie’nin animasyonu hakkında harika olan şey, öğe görünüm alanına girdiğinde döndürülebilecek veya kullanıcı etkileşimine bağlayabilmenizdir. Örneğin, kullanıcı sayfayı aşağı kaydırdığında Lottie’yi canlandırabilirsiniz. After Effects konusunda yetkin değilseniz veya kendi animasyonunuzu oluşturmak istemiyorsanız, çevrimiçi olarak çevrimiçi olarak binlerce animasyon ve hatta 1-5 $ ‘dan fazla ödeme duvarı vardır. Elementor kısa süre önce orijinal öğeyi, Lottie animasyonuna hızlı ve kolay bir şekilde girmenizi sağlayan üreticiye ekledi.
Lottie dosyasını web sitemde ne zaman kullanacağım? Web sitenizde Lottie Animation’ı kullanmak, animasyonlu öğeleri ve ilginç efektleri birleştirmenin iyi bir yoludur. Animasyonlu bir Lottie’yi sayfa kaydırmaları gibi kullanıcı etkileşimine bağlayabileceğiniz için, olasılıklar sınırsızdır. Potansiyel kullanım vakaları hakkında konuşmak yerine, bazı Lottie’ye bakalım ve Lottie dosyalarını Real World web sitesinde birleştirelim: Mevcut teknolojinin yerini almak için Lottie Animation’ı da kullanabilirsiniz. Hem GIF hem de Lotties aynı hedefi yerine getirir – web sitesinde animasyon sırasını görüntüleyin. Bununla birlikte, GIF Bodymovin JSON’un iki katı büyüklüğündedir ve çeşitli ekran çözünürlüklerine iyi taburcu edilemez. Ayrıca elementleri elle canlandırabilirsiniz (örneğin, CSS animasyonu), ancak lotties aynı hedefi çok daha hızlı karşıladığından verimli zaman kullanımınız değildir.
Lottie dosyasını web sitemde ne zaman kullanacağım? Web sitenizde Lottie Animation’ı kullanmak, animasyonlu öğeleri ve ilginç efektleri birleştirmenin iyi bir yoludur. Animasyonlu bir Lottie’yi sayfa kaydırmaları gibi kullanıcı etkileşimine bağlayabileceğiniz için, olasılıklar sınırsızdır. Potansiyel kullanım vakaları hakkında konuşmak yerine, bazı Lottie’ye bakalım ve Lottie dosyalarını Real World web sitesinde birleştirelim: Mevcut teknolojinin yerini almak için Lottie Animation’ı da kullanabilirsiniz. Hem GIF hem de Lotties aynı hedefi yerine getirir – web sitesinde animasyon sırasını görüntüleyin. Bununla birlikte, GIF Bodymovin JSON’un iki katı büyüklüğündedir ve çeşitli ekran çözünürlüklerine iyi taburcu edilemez. Ayrıca elementleri elle canlandırabilirsiniz (örneğin, CSS animasyonu), ancak lotties aynı hedefi çok daha hızlı karşıladığından verimli zaman kullanımınız değildir.
Bir Elementor kullanarak nasıl bir lottie dosyası ekleyebilirim? Pro Elementor sürüm 2.10 iki yeni öğe ile gönderilir: çoklu adımlı form ve Lottie Animation. Bu, varsayılan öğelerinize veya web sitelerinize Lottie animasyonu ekleme yeteneğinin düzenleyiciye yerleştirildiği anlamına gelir. Anlaması kolay, kullanılmış ve uygulanan bir pakette görünür. Elementor’a Lottie Animation’ın nasıl ekleneceğine bakalım.
Lottie öğesini Elementor tuvalinize sürükleyin. Animasyonlu Lottie Elementor ön ayarıyla görünür. Lottie’yi web sitenize ekleyin oldukça kolaydır. Bir Lottie Level web sitesi eklemenin iki yolu vardır: Kendi JSON dosyanızı yükleyebilirsiniz, bu da Adobe After Effect kullanarak kendi animasyonunuzu oluşturmayı seçerseniz veya harici URL’lerden kolayca içe aktarabilirsiniz. Web sitenizi toplamak için hazır lottie animasyonunu kullanırsanız bu çok yararlıdır. Yapmanız gereken harici bir URL bulmak ve web sitenize koymaktır. Web sitenize lotties eklemek için bu iki yöntemi göreceğiz. Yöntem 1: Kendi medya dosyanızı yükleyin Lottie dosyasının temel formu JSON’dur. Kendi Lottie’nizi (Bodymovin tarafından animporasyon olacak) oluşturursanız, varsayılan dışa aktarma bu formatta. Sadece ihracatı alıp görsel Elementor üreticinize yüklersiniz.
Lottie öğesini Elementor tuvalinize sürükleyin. Animasyonlu Lottie Elementor ön ayarıyla görünür. Lottie’yi web sitenize ekleyin oldukça kolaydır. Bir Lottie Level web sitesi eklemenin iki yolu vardır: Kendi JSON dosyanızı yükleyebilirsiniz, bu da Adobe After Effect kullanarak kendi animasyonunuzu oluşturmayı seçerseniz veya harici URL’lerden kolayca içe aktarabilirsiniz. Web sitenizi toplamak için hazır lottie animasyonunu kullanırsanız bu çok yararlıdır. Yapmanız gereken harici bir URL bulmak ve web sitenize koymaktır. Web sitenize lotties eklemek için bu iki yöntemi göreceğiz. Yöntem 1: Kendi medya dosyanızı yükleyin Lottie dosyasının temel formu JSON’dur. Kendi Lottie’nizi (Bodymovin tarafından animporasyon olacak) oluşturursanız, varsayılan dışa aktarma bu formatta. Sadece ihracatı alıp görsel Elementor üreticinize yüklersiniz.
Bazen bir üçüncü taraf kaynağından bir lottie dosyası satın aldığınızda veya aldığınızda, size JSON indirmesini sağlayacaktır. Yapmanız gereken tek şey onu üreticiye yüklemek ve yapmaya hazırsınız.
Sağ üst köşede, Lottiefiles.com adresinde ücretsiz olarak sunulan bu yeşil dosyada indirme seçeneğini görebilirsiniz. Elementor’a Lottie eklemek kolay! Yöntem 2: Harici bir URL kullanın Çevrimiçi depodan bir lottie alırsanız, doğrudan web sitenize girilecek bir URL vereceklerdir. Bu, JSON dosyalarını sitenize indirme ve yayınlama ihtiyacınızı ve bazen daha kolay ve daha hızlı bir seçenek tasarrufu sağlar. Lottiefiles.com kullanıyorsanız, “Bu animasyonu kullanın” sadece HTML’yi tıklayın ve URL’yi doğrudan Elementor Maker’ınıza kopyalayın. Lottie’niz Elementor web sitesine eklendikten sonra, manipüle edebileceğiniz bir ayar koleksiyonu vardır. Tüm bu ayarlar isteğe bağlıdır, ancak öğelerle oluşturulan web sitenize entegrasyon açısından çok yararlıdır.
Sağ üst köşede, Lottiefiles.com adresinde ücretsiz olarak sunulan bu yeşil dosyada indirme seçeneğini görebilirsiniz. Elementor’a Lottie eklemek kolay! Yöntem 2: Harici bir URL kullanın Çevrimiçi depodan bir lottie alırsanız, doğrudan web sitenize girilecek bir URL vereceklerdir. Bu, JSON dosyalarını sitenize indirme ve yayınlama ihtiyacınızı ve bazen daha kolay ve daha hızlı bir seçenek tasarrufu sağlar. Lottiefiles.com kullanıyorsanız, “Bu animasyonu kullanın” sadece HTML’yi tıklayın ve URL’yi doğrudan Elementor Maker’ınıza kopyalayın. Lottie’niz Elementor web sitesine eklendikten sonra, manipüle edebileceğiniz bir ayar koleksiyonu vardır. Tüm bu ayarlar isteğe bağlıdır, ancak öğelerle oluşturulan web sitenize entegrasyon açısından çok yararlıdır.
Lottie’yi web sitenize girerken değiştirebileceğiniz her ayara bakalım. İlk ayar tetiktir. Bu bir animasyon olduğu için, onu başlamasını tetiklemesi gereken bir şey. Birkaç seçenek arasında seçim yapabilirsiniz.
ViewPort – Bu, Lottie’yi ViewPort’a girdikten hemen sonra canlandıracaktır. Bu, otomatik olarak oynanan varsayılan video davranışı ve GIF
OnClick – Bu, kullanıcı öğeyi tıkladığında Lottie’yi canlandıracaktır.
Yüzerken – kullanıcı fare imlecini öğeye yönlendirdiğinde Lottie’yi canlandıracaktır.
Kaydırma – Bu, kullanıcı sayfanızı eğittiğinde Lottie’yi canlandıracaktır. Kullanıcı sayfayı üste çevirdiğinde, Lottie tersine animasyona girer. Kullanıcıyı web sitenize kullanan hareket efekti eklemeye çalışırsanız bu çok havalıdır.
Bir sonraki ayar, seçtiğiniz tetikleyiciye bağlıdır. ViewPort veya Scroll’u seçtiyseniz görüntülenir. Bu, Lottie’nin ne zaman hayata başlayacağını belirler. Örneğin, üst düzey% 50’ye ayarlarsanız, Lottie animasyonu yalnızca% 50 sayfaya girdiğinde başlatır. Scroll’u seçerseniz, “kaydırmalara göre etki” adı verilen başka bir ayar görünecektir. İki seçenek, görünüm veya tüm sayfalar arasında seçim yapabilirsiniz. ViewPort üzerindeki göreceli etkiyi ayarlarsanız, Lottie’nin animasyonu görünümüne girdikten hemen sonra, kullanıcı sayfayı aşağı kaydırmaya devam ettiği sürece animasyona başlar. Tüm sayfaları seçerseniz, kullanıcı antrenman yaptığında Lottie cansız olacaktır (Lottie’nin görüntülü olup olmadığına bakılmaksızın). Lottie’yi döngüye ayarlamayı ve dönen hızı ayarlamayı seçebilirsiniz. Dönen hız, efekt animasyonundan sonraki başlangıçta ayarlanan hız ile ilişkilidir. Dönen hızı 2’ye ayarlarsanız, Lottie daha sonra etkinin ihracatından iki kat daha hızlı canlandırılacaktır.
Lottie’nin animasyonu başladığı veya bittiği noktalarını seçmek için başlangıç noktasını ve bitiş noktasını kullanabilirsiniz. Grafik oluşturmak için SVG veya tuval arasında seçim yapabilirsiniz ve yavaş yüklemeyi de etkinleştirebilirsiniz (sayfalarınızı daha hızlı yüklemeye yardımcı olabilir). Lottie’nin animasyonunu Elementor Page Maker sekmesinde de ölçebilirsiniz. Sonuç Gördüğünüz gibi, Elementor Maker’a Lottie animasyonu eklemek yeterince kolaydır. Pro Maker’a yeni dahil olan orijinal öğeyi kullanarak, ihtiyacınız olan tek şey onu yüklemek (veya URL eklemek) ve lottie’nizin animasyona gireceğini ayarlamaktır. Lotties’e elemente girme hakkında sorularınız varsa, tereddüt etmeyin. Aşağıdaki yorumlar bölümüne başvurun.
Abone Olun ve Paylaşın
Bu içeriği beğendiyseniz, aylık WordPress haber koleksiyonumuza, web sitesi ilhamına, özel tekliflere ve ilginç makalelere abone olun.
İstediğiniz zaman abone olmayı bırakın. Spam yapmıyoruz ve asla e -postanızı satmayacağız veya paylaşmayacağız.
Kaydırma – Bu, kullanıcı sayfanızı eğittiğinde Lottie’yi canlandıracaktır. Kullanıcı sayfayı üste çevirdiğinde, Lottie tersine animasyona girer. Kullanıcıyı web sitenize kullanan hareket efekti eklemeye çalışırsanız bu çok havalıdır.
Bir sonraki ayar, seçtiğiniz tetikleyiciye bağlıdır. ViewPort veya Scroll’u seçtiyseniz görüntülenir. Bu, Lottie’nin ne zaman hayata başlayacağını belirler. Örneğin, üst düzey% 50’ye ayarlarsanız, Lottie animasyonu yalnızca% 50 sayfaya girdiğinde başlatır. Scroll’u seçerseniz, “kaydırmalara göre etki” adı verilen başka bir ayar görünecektir. İki seçenek, görünüm veya tüm sayfalar arasında seçim yapabilirsiniz. ViewPort üzerindeki göreceli etkiyi ayarlarsanız, Lottie’nin animasyonu görünümüne girdikten hemen sonra, kullanıcı sayfayı aşağı kaydırmaya devam ettiği sürece animasyona başlar. Tüm sayfaları seçerseniz, kullanıcı antrenman yaptığında Lottie cansız olacaktır (Lottie’nin görüntülü olup olmadığına bakılmaksızın). Lottie’yi döngüye ayarlamayı ve dönen hızı ayarlamayı seçebilirsiniz. Dönen hız, efekt animasyonundan sonraki başlangıçta ayarlanan hız ile ilişkilidir. Dönen hızı 2’ye ayarlarsanız, Lottie daha sonra etkinin ihracatından iki kat daha hızlı canlandırılacaktır.
Lottie’nin animasyonu başladığı veya bittiği noktalarını seçmek için başlangıç noktasını ve bitiş noktasını kullanabilirsiniz. Grafik oluşturmak için SVG veya tuval arasında seçim yapabilirsiniz ve yavaş yüklemeyi de etkinleştirebilirsiniz (sayfalarınızı daha hızlı yüklemeye yardımcı olabilir). Lottie’nin animasyonunu Elementor Page Maker sekmesinde de ölçebilirsiniz. Sonuç Gördüğünüz gibi, Elementor Maker’a Lottie animasyonu eklemek yeterince kolaydır. Pro Maker’a yeni dahil olan orijinal öğeyi kullanarak, ihtiyacınız olan tek şey onu yüklemek (veya URL eklemek) ve lottie’nizin animasyona gireceğini ayarlamaktır. Lotties’e elemente girme hakkında sorularınız varsa, tereddüt etmeyin. Aşağıdaki yorumlar bölümüne başvurun.
Abone Olun ve Paylaşın
Bu içeriği beğendiyseniz, aylık WordPress haber koleksiyonumuza, web sitesi ilhamına, özel tekliflere ve ilginç makalelere abone olun.
İstediğiniz zaman abone olmayı bırakın. Spam yapmıyoruz ve asla e -postanızı satmayacağız veya paylaşmayacağız.
