Divi 5'in Lottie Modülü hakkında bilmeniz gereken her şey

Divi 5'in Lottie modülü, sayfalarınıza dinamik, hafif animasyonlar getirerek sayfalarınızı daha ilgi çekici ve etkileşimli hale getirir. Doğru görseller, dikkat çekmenin ve ziyaretçileri meşgul etmenin anahtarıdır. Lottie modülü ile Divi 5, performans dostu profesyonel görünümlü animasyonlar eklemenizi sağlar.

Bu yazıda, özellikleri, kurulum süreci, özelleştirme seçenekleri ve kullanmanın yolları da dahil olmak üzere Lottie modülü hakkında bilmeniz gereken her şeyi açıklayacağız. Girelim!

Lottie dosyaları nedir?

Lottie animasyonları, ölçeklenebilir vektörler olarak ortaya çıkan hafif, json tabanlı grafiklerdir. Video veya GIF boyutlarında ağır dosya olmadan ölçeklenebilir görseller sunarlar. Performansı esneklikle birleştirme yeteneği sayesinde, Lottie popülerlik kazandı ve modern web tasarımı için popüler hale getirdi. Geleneksel animasyonlardan farklı olarak, Lottie dosyaları vektör tabanlı JSON verilerini kullanır, tüm cihazlarda ve ekran boyutlarında net görseller ve düzgün oynatma sağlar.

YouTube kanalımıza abone olun

Divi 5'te, Lottie modülü bu animasyonları görsel oluşturucuya sorunsuz bir şekilde entegre ederek kullanıcıların birkaç tıklamada divi web sitelerine dinamik, modern dokunuşlar eklemelerini sağlar. Bir CTA'yı vurgulamak veya bir kahraman bölümüne yetenek eklemek olsun, Lottie modülü, karmaşık kodlama olmadan animasyonları zahmetsiz hale getirir.

Lottie modülü ile Divi 5, web tasarımlarınıza nasıl hareket getirdiğinizi dönüştürür, bu da onları büyüleyici ve verimli hale getirir.

Anahtar Özellikler

Divi 5'teki Lottie modülü, dinamik, optimize edilmiş animasyonları kolaylaştıran özelliklerle dolu çok yönlü bir araçtır. Hız, yön, tetikleyiciler ve daha fazlasını değiştirmenize izin veren animasyon davranışı üzerinde kontrol sunar. Bazı temel özelliklerine bir göz atalım.

Kullanım kolaylığı

Divi 5'teki Lottie Modülü, basitlik göz önünde bulundurularak tasarlanmıştır, bu da onu her beceri seviyesindeki kullanıcılar için başlangıç ​​dostu ve erişilebilir hale getirir. Divi web sitenize profesyonel, göz alıcı animasyonlar eklemek için bir kodlama uzmanı olmanıza gerek yoktur.

Çevrimiçi olarak mevcut olan kaynak sayısı sayesinde animasyon kaynakları kolaydır. Lottiefiles ve Lordicon gibi platformlar, ince yükleme simgelerinden canlı grafiklere kadar geniş ücretsiz ve premium lottie animasyonları kütüphaneleri sunar.

Benzersiz bir dokunuş arayanlar için, BodyMovin eklentisiyle Adobe After Effects gibi araçları kullanarak özel animasyonlar oluşturabilirsiniz. Bu eklenti, animasyonları Lottie modülüyle uyumlu JSON dosyaları olarak dışa aktarır. İster önceden yapılmış ister özel animasyonlar seçseniz de, işlem basittir.

Özelleştirme Seçenekleri

Divi 5'teki Lottie modülü, Lottie dosyasının çeşitli yönleri üzerinde kontrol sağlayan özelleştirme seçenekleri sunar. Etkileşimli deneyimler için, element görünümüne girdiğinde, havada uçar, tıklama veya kaydırma gibi animasyonu ne zaman etkinleştireceğini seçmek için tetikleme animasyonunu kullanın. Lottie dosyanızda sürekli harekete izin verecek, animasyon hızını ayarlayabilir, yönü (ileri veya geri) seçebilir ve oyun modu alanında normal veya sıçrama arasında seçim yapabilirsiniz.

JSON animasyonlarını yükleme

Divi 5'e lottie animasyonları eklemek, Lottie dosyaları için standart format olan JSON dosyalarını yüklemeyi gerektirir. Ancak WordPress, medya kitaplığındaki JSON yüklemelerini doğal olarak desteklemez, bu nedenle bunları yükleyebildiğinizden emin olmak için ek adımlar atmanız gerekir.

İlk seçenek bir alt tema oluşturmak ve çocuğunuzun functions.php dosyasına bir PHP snippet eklemektir. Bu yöntem hafiftir ve animasyon dosyalarınızın güvenli bir şekilde işlenmesini sağlar. Alternatif olarak, herhangi bir koda dokunmadan JSON yüklemelerine izin vermek için dosya yükleme türleri gibi bir eklenti kullanabilirsiniz, bu da bir takma ve oyna çözümünü tercih eden kullanıcılar için idealdir. Her iki yöntemi de uygulamak için adım adım bir kılavuz için, JSON yüklemeleri için Divi 5 web sitenizi ayarlamak için size yol açan destek makalemize göz atın.

Divi 5'te Lottie Modülü Nasıl Kullanılır

Divi 5'e bir Lottie animasyonu eklemek basittir. Lottiefiles veya Lordicon gibi bir kaynaktan bir Lottie animasyonu oluşturun veya indirin. Sayfanıza eklemek için Visual Builder'daki Lottie modülünü bulun ve tıklayın.

JSON dosyasını yükleyin veya WordPress Medya Galerisinde bulun.

Tetik animasyonunu seçin. Animasyon için Yük, Görüntüle, Hakking, Tıklama, Tıklama veya Kaydırma için Animasyon için ayarlayabilirsiniz.

Lottie animasyonunuzun etkileşimli bir öğe olmasını istiyorsanız, tetikleyiciyi canlandırmak için modülün kaydırmasını kullanın.

Bu tetikleyiciyi kullanmak, dinamik ve ilgi çekici kullanıcı deneyimleri oluşturmak için harika bir yol sunar. Sayfa yüklendiğinde animasyonu kullanmak yerine, animasyonun ilerlemesini doğrudan kullanıcının kaydırma davranışına bağlar. Kullanıcı sayfayı aşağı kaydırdıkça, animasyon çerçeveye göre ilerler. Bu, animasyonu deneyimi daha dinamik hissettiren etkileşimli bir unsur haline getirir.

Animasyonun sonsuz bir şekilde döngü yapmak istiyorsanız, döngü animasyon geçişini etkinleştirin. Ayrıca animasyon hızını ayarlayabilir, yönü kontrol edebilir ( ileri veya geri ) ve oyun modu için normal veya sıçrama seçebilirsiniz.

Tasarım sekmesinde boyutlandırma, hizalama, yükseklik, aralık ve daha fazlasını kontrol edebilirsiniz.

Divi 5 içindeki Lottie dosyalarınızın renklerini değiştiremeseniz de, çoğu Lottie web sitesi, indirmeden önce belirli renkleri ve inme genişliklerini seçmenize izin verir.

Gördüğünüz gibi, Divi 5 web sitenize bir Lottie dosyası eklemek saniyeler sürer ve performans konusunda endişelenmeden web sayfalarınıza biraz yetenek ekler.

Lottie modülünü kullanarak pratik örnekler

Divi 5'teki Lottie modülü, dinamik animasyonlara sahip web sitelerine yetenek ekleyerek çok çeşitli uygulamalar sunar. İletişim sayfalarını geliştirmekten göz alıcı kahraman bölümlerine kadar esnekliği her türlü tasarıma uygundur.

Kesintisiz entegrasyon ve özelleştirme seçenekleriyle Divi kullanıcıları, tüm web sitelerinde ilgi çekici, performans dostu deneyimler oluşturabilir.

İletişim Sayfaları

Lottie animasyonları eklemek, iletişim sayfalarınızı daha ilgi çekici hale getirebilir. Örneğin, sitenizi yavaşlatmadan dönüşümleri artıran etkileşimli ve davetkar bir deneyim oluşturmak için lottie modüllerini çalışma saatleri, telefon numaraları ve diğer iletişim bilgilerinin yanına yerleştirin.

404 sayfa

Oynak Lottie animasyonları ile sinir bozucu 404 hatalarını unutulmaz anlara dönüştürün. Kısa bir mesajla eşleştirilmiş 404 sayfanıza bir eğirme pusulası veya animasyonlu arama simgesi ekleyin.

Hareketi sürekli tutmak için döngü animasyon ayarını kullanın ve anında dikkat çekmek için yükte tetikleyin. Bu, 404 sayfanın bir çıkmaz ve daha çok yaratıcı bir temas noktası gibi hissetmesini sağlar.

Öne çıkan ürünler

Satılık ürünleri vurgulamak için en sevdiğiniz Woo ürünlerini veya kategorilerini Lottie animasyonlarıyla sergileyin. Örneğin, vurgulamak için öne çıkan bir ürünün yanına bir satış rozeti lottie animasyonu yerleştirin.

İlk olarak, animasyonu yükte tetikleyecek şekilde ayarlayın. Ardından, kullanıcılar göz atarken, gözlerini ürünlere çekerken ve görsel çekiciliği artırırken etkinleştirilir.

Hizmetler Bölümleri

Hizmetler bölümünüzü, tekliflerinizi görsel olarak temsil eden Lottie animasyonlarıyla hayata geçirin. Örneğin, pazarlama ajansınız için döngü animasyonlarını kullanın, hızı tonu eşleştirecek şekilde ayarlayın.

Ayrıca, kullanıcılar keşfederken animasyonları etkinleştirecek şekilde görünüm tetikleyicisini ayarlayarak dinamik, profesyonel bir sunum sağlayın.

Kahraman Bölümleri

Kahraman bölümlerinizi web sitenizin tonunu belirleyen cesur lottie animasyonları ile unutulmaz hale getirin. İlk olarak, Divi'nin Lottie modülünü kullanarak pürüzsüz bir arka plan animasyonu ekleyin. Ardından, Divi'nin konum ayarlarıyla satır ve modüllerin arkasına yerleştirin.

Örneğin, akan, modern bir animasyon veya ince parçacık etkisi, sitenize çok az çaba ile derinlik katabilir. Hemen etki için yükleme tetikleyicisini kullanın ve büyüleyici bir etki için oyun modunu sıçrayacak şekilde ayarlayın.

Dosyaları İndirin

Ücretsiz indir

Divi bültenine katılın, size Ultimate Divi açılış sayfası düzen paketinin bir kopyasının yanı sıra tonlarca şaşırtıcı ve ücretsiz divi kaynakları, ipuçları ve püf noktalarının bir kopyasını e -postayla göndereceğiz. Takip et ve hiçbir zaman bir divi ustası olacaksınız. Zaten abone olduysanız, aşağıdaki e -posta adresinizi yazın ve Düzen Paketine erişmek için İndir'i tıklayın.

İNDİRMEK

Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ Haftalık Divi Düzen Paketlerine erişin!

Çözüm

Divi 5'te Lottie modülü, web sitelerine hafif, dinamik animasyonlar eklemeyi basitleştirir. Visual Builder'a sorunsuz bir şekilde entegre edilmiş, minimum çaba ile profesyonel animasyonlar sağlar. Esnek kontroller, kapsamlı özelleştirme ve ücretsiz Lottie dosya platformları, sitenizi geliştirmeyi kolaylaştırır.

Lottie modülünü denemeye hazır mısınız? Düşüncelerinizi veya kreasyonlarınızı yorumlarda veya sosyal medyada paylaşın.