Semua yang Perlu Anda Ketahui Tentang Modul Lottie Divi 5

Modul Lottie Divi 5 membawa animasi yang dinamis dan ringan ke halaman Anda, membuat halaman Anda lebih menarik dan interaktif. Visual yang tepat adalah kunci untuk menarik perhatian dan membuat pengunjung tetap terlibat. Dengan modul Lottie, Divi 5 memungkinkan Anda untuk menambahkan animasi yang tampak profesional yang juga ramah kinerja.

Dalam posting ini, kami akan menjelaskan semua yang perlu Anda ketahui tentang modul Lottie, termasuk fitur -fiturnya, proses pengaturan, opsi kustomisasi, dan cara untuk menggunakannya. Ayo masuk!

Apa itu file lottie?

Lottie Animations adalah grafik berbasis JSON yang ringan yang dirender sebagai vektor yang dapat diskalakan. Mereka memberikan visual yang dapat diskalakan tanpa ukuran file video atau GIF yang besar. Berkat kemampuannya untuk menggabungkan kinerja dengan fleksibilitas, Lottie telah mendapatkan popularitas, menjadikannya populer untuk desain web modern. Tidak seperti animasi tradisional, file Lottie menggunakan data JSON berbasis vektor, memastikan visual yang renyah dan pemutaran halus di semua perangkat dan ukuran layar.

Berlangganan saluran YouTube kami

Dalam Divi 5, modul Lottie dengan mulus mengintegrasikan animasi -animasi ini ke dalam pembangun visual, yang memungkinkan pengguna untuk menambahkan sentuhan modern yang dinamis ke situs web divi mereka dalam beberapa klik. Apakah menyoroti CTA atau menambahkan bakat ke bagian pahlawan, modul Lottie membuat menggabungkan animasi tanpa pengkodean yang kompleks dengan mudah.

Dengan modul Lottie, Divi 5 mengubah cara Anda membawa gerakan ke desain web Anda, membuatnya menawan dan efisien.

Fitur utama

Modul Lottie di Divi 5 adalah alat serbaguna yang dikemas dengan kemampuan yang membuat animasi yang dinamis dan dioptimalkan menjadi mudah. Ini menawarkan kontrol atas perilaku animasi, memungkinkan Anda untuk mengubah kecepatan, arah, pemicu, dan banyak lagi. Mari kita lihat beberapa fitur utamanya.

Kemudahan penggunaan

Modul Lottie di Divi 5 dirancang dengan mempertimbangkan kesederhanaan, membuatnya ramah-pemula dan dapat diakses oleh pengguna semua tingkat keterampilan. Anda tidak perlu menjadi ahli pengkodean untuk menambahkan animasi profesional yang menarik ke situs web Divi Anda.

Berkat jumlah sumber daya yang tersedia secara online, sumber animasi itu mudah. Platform seperti Lottiefiles dan Lordicon menawarkan perpustakaan luas animasi Lottie gratis dan premium, mulai dari ikon pemuatan halus hingga grafik yang semarak.

Bagi mereka yang mencari sentuhan yang unik, Anda dapat membuat animasi khusus menggunakan alat seperti Adobe After Effects dengan plugin BodyMovin. Plugin ini mengekspor animasi sebagai file JSON yang kompatibel dengan modul Lottie. Apakah Anda memilih animasi pra-buatan atau kustom, prosesnya langsung.

Opsi Kustomisasi

Modul Lottie di Divi 5 menawarkan opsi kustomisasi, memberi Anda kendali atas beberapa aspek file Lottie. Untuk pengalaman interaktif, gunakan animasi pemicu untuk memilih kapan mengaktifkan animasi, seperti pada beban, ketika elemen memasuki viewport, hover, klik, atau gulir. Anda dapat mengaktifkan animasi loop untuk memungkinkan gerakan terus menerus pada file Lottie Anda, menyesuaikan kecepatan animasi , pilih arah (maju atau mundur), dan pilih antara normal atau bouncing di bidang Mode Play .

Mengunggah animasi JSON

Menambahkan animasi Lottie ke Divi 5 membutuhkan pengunggahan file JSON, format standar untuk file Lottie. Namun, WordPress tidak mendukung unggahan JSON di perpustakaan media, jadi Anda harus mengambil langkah -langkah tambahan untuk memastikan Anda dapat mengunggahnya.

Opsi pertama adalah membuat tema anak dan menambahkan cuplikan PHP ke file functions.php tema anak Anda. Metode ini ringan dan memastikan penanganan file animasi Anda yang aman. Atau, Anda dapat menggunakan jenis unggahan file seperti plugin untuk memungkinkan unggahan JSON tanpa menyentuh kode apa pun, menjadikannya ideal untuk pengguna yang lebih suka solusi plug-and-play. Untuk panduan langkah demi langkah untuk mengimplementasikan kedua metode, periksa artikel dukungan kami, yang menuntun Anda melalui proses untuk mengatur situs web Divi 5 Anda untuk unggahan JSON.

Cara menggunakan modul lottie di divi 5

Menambahkan animasi lottie di Divi 5 langsung. Buat atau unduh animasi lottie dari sumber seperti Lottiefiles atau Lordicon. Temukan dan klik modul Lottie di pembangun visual untuk menambahkannya ke halaman Anda.

Unggah file JSON atau temukan di Galeri Media WordPress Anda.

Pilih animasi pemicu . Anda dapat mengaturnya ke Animate on Load, View, Arway, klik, atau gulir ke Animate.

Jika Anda ingin animasi Lottie Anda memiliki elemen interaktif, gunakan gulungan modul untuk menghidupkan pemicu.

Menggunakan pemicu ini menawarkan cara yang bagus untuk menciptakan pengalaman pengguna yang dinamis dan menarik. Alih -alih menggunakan animasi saat halaman dimuat, gulir ke ikatan animasi kemajuan animasi langsung ke perilaku pengguliran pengguna. Saat pengguna menggulir halaman, animasi berkembang bingkai demi bingkai. Ini membuat animasi menjadi elemen interaktif yang membuat pengalaman terasa lebih dinamis.

Jika Anda ingin animasi tersebut berulang tanpa henti, aktifkan sakelar animasi loop . Anda juga dapat mengatur kecepatan animasi , mengontrol arah ( maju atau mundur ), dan memilih mode normal atau bouncing untuk bermain .

Di tab Desain , Anda dapat mengontrol ukuran, penyelarasan, tinggi, jarak, dan banyak lagi.

Meskipun Anda tidak dapat mengubah warna file Lottie Anda dalam Divi 5, sebagian besar situs web Lottie memungkinkan Anda untuk memilih warna tertentu dan lebar stroke sebelum Anda mengunduhnya.

Seperti yang Anda lihat, menambahkan file Lottie ke situs web Divi 5 Anda membutuhkan waktu beberapa detik dan menambahkan sedikit bakat ke halaman web Anda tanpa khawatir tentang kinerja.

Contoh Praktis Menggunakan Modul Lottie

Modul Lottie di Divi 5 menawarkan berbagai aplikasi, menambahkan bakat ke situs web dengan animasi dinamis. Dari meningkatkan halaman kontak hingga bagian pahlawan yang menarik, fleksibilitasnya sesuai dengan semua jenis desain.

Dengan opsi integrasi dan penyesuaian yang mulus, pengguna Divi dapat membuat pengalaman yang menarik dan ramah kinerja di seluruh situs web mereka.

Hubungi Halaman

Menambahkan animasi Lottie dapat membuat halaman kontak Anda lebih menarik. Misalnya, tempatkan modul lottie looping di sebelah jam kerja, nomor telepon, dan informasi kontak lainnya untuk membuat pengalaman interaktif dan mengundang yang meningkatkan konversi tanpa memperlambat situs Anda.

404 halaman

Mengubah 404 kesalahan menjadi momen yang tak terlupakan dengan animasi lottie yang menyenangkan. Tambahkan kompas pemintalan atau ikon pencarian animasi ke halaman 404 Anda, dipasangkan dengan pesan singkat.

Gunakan pengaturan animasi loop untuk menjaga gerakan terus menerus, dan memicu beban untuk langsung menarik perhatian. Ini membuat halaman 404 terasa kurang seperti jalan buntu dan lebih seperti titik kontak yang kreatif.

Produk unggulan

Pamerkan produk atau kategori WOO favorit Anda dengan animasi Lottie untuk menyoroti produk yang dijual. Misalnya, tempatkan animasi lencana penjualan di sebelah produk unggulan untuk menyorotnya.

Pertama, atur animasi untuk memicu beban. Kemudian, itu diaktifkan saat pengguna menelusuri, menarik mata mereka ke produk dan meningkatkan daya tarik visual.

Bagian Layanan

Bawa bagian layanan Anda seumur hidup dengan animasi Lottie yang secara visual mewakili penawaran Anda. Misalnya, gunakan animasi looping untuk agen pemasaran Anda, menyesuaikan kecepatan agar sesuai dengan nada.

Selain itu, atur pemicu tampilan untuk mengaktifkan animasi saat pengguna mengeksplorasi, memastikan presentasi profesional yang dinamis.

Bagian pahlawan

Jadikan bagian pahlawan Anda tak terlupakan dengan animasi Lottie yang berani yang mengatur nada untuk situs web Anda. Pertama, tambahkan animasi latar belakang yang halus menggunakan modul Lottie Divi. Kemudian, letakkan di belakang baris dan modul dengan pengaturan posisi Divi.

Misalnya, animasi yang mengalir, animasi modern atau efek partikel halus dapat menambah kedalaman ke situs Anda dengan sedikit usaha. Gunakan pemicu on-load untuk dampak langsung dan sesuaikan mode bermain untuk memantul untuk efek yang menawan.

Unduh file

Unduh secara gratis

Bergabunglah dengan The Divi Newsletter dan kami akan mengirimi Anda email salinan paket tata letak halaman pendaratan Ultimate Divi, ditambah banyak sumber daya divi yang luar biasa dan gratis, tips, dan trik. Ikuti bersama dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

Unduh

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan mendapatkan akses ke paket tata letak divi mingguan gratis!

Kesimpulan

Dalam Divi 5, modul Lottie menyederhanakan menambahkan animasi dinamis yang ringan ke situs web. Diintegrasikan dengan mulus ke dalam pembangun visual, ini memungkinkan animasi profesional dengan upaya minimal. Kontrol fleksibel, kustomisasi yang luas, dan platform file lottie gratis membuat peningkatan situs Anda mudah.

Siap mencoba modul lottie? Bagikan pemikiran atau kreasi Anda di komentar atau di media sosial.