Animasi Lottie di Elementor untuk WordPress

Ingin menyegarkan situs web Anda dengan grafik bergerak yang hidup? Dengan animasi Lottie, Anda dapat meningkatkan daya tarik visual situs WordPress Anda dan memberikan pengalaman menarik kepada pengunjung Anda. Dalam panduan ini, Anda akan belajar bagaimana menggunakan Lottie di Elementor untuk dengan mudah menyisipkan animasi yang mengesankan.

Temuan Utama

• Lottie memungkinkan penggunaan grafik bergerak di Elementor.
• Animasi dapat diunduh sebagai file JSON atau diintegrasikan secara eksternal.
• Antarmuka pengguna Elementor menawarkan opsi sederhana untuk menyesuaikan pengaturan animasi.

Panduan Langkah demi Langkah

Langkah 1: Menambahkan Elemen Lottie

Pertama, Anda harus menambahkan elemen Lottie di Elementor. Masuk ke editor Elementor halaman Anda. Cari elemen "Lottie" di bilah sisi dan seret ke posisi yang diinginkan di halaman Anda. Anda akan menemukan Lottie relatif jauh ke bawah dalam versi Pro dari Elementor.

Langkah 2: Mengunduh Animasi dari LottieFiles

Untuk menemukan animasi yang sesuai, Anda dapat mengunjungi platform LottieFiles. Di sini, Anda dapat mendaftar secara gratis dan menjelajahi berbagai animasi. Masukkan apa yang Anda cari dalam kotak pencarian - sebagai contoh, saya mencari "Apple".

Langkah 3: Memilih Animasi yang Diinginkan

Saat Anda menemukan animasi yang Anda sukai, klik pada pratinjau. Anda akan memiliki kesempatan untuk mengunduh animasi dalam format JSON atau GIF. Pilih opsi yang paling cocok untuk Anda - jika Anda ingin menggunakan animasi di Elementor, unduh sebagai file JSON.

Langkah 4: Mengunggah Animasi

Sekarang kembali ke Elementor. Anda dapat mengunggah file JSON yang diunduh langsung melalui kolom pengunggahan dalam elemen Lottie. Pastikan Anda mengaktifkan file tersebut terlebih dahulu, karena file JSON tidak akan ditampilkan di Elementor tanpa aktivasi.

Langkah 5: Menghasilkan URL Eksternal

Jika unduhan tidak berfungsi, Anda juga dapat menggunakan langsung URL animasi. Tempelkan URL ke dalam kolom yang sesuai. Elementor akan secara otomatis mengambil dan menampilkan animasi tersebut.

Langkah 6: Menyesuaikan Pengaturan Animasi

Sekarang Anda dapat menyesuaikan pengaturan untuk animasi. Anda memiliki opsi untuk menentukan kecepatan pemutaran serta warna latar belakang. Pastikan Anda mengaktifkan fungsi loop, agar animasi terus berulang secara kontinu.

Langkah 7: Mengatur Pemicu Interaktif

Pilih pemicu untuk animasi dengan menetapkan apakah animasi harus dimulai dengan mengklik atau saat hover. Di Pengaturan, Anda dapat mengatur interaksi yang diinginkan - ini memberikan Anda kendali atas pengalaman pengguna.

Langkah 8: Melakukan Penyesuaian Lebih Lanjut

Anda dapat mengedit pengaturan frekuensi animasi serta menentukan titik mulai dan akhir animasi untuk mencapai efek yang diinginkan. Penyesuaian ini memastikan bahwa animasi disesuaikan dengan kebutuhan Anda dengan tepat.

Langkah 9: Menyesuaikan Gaya dan Desain

Animasi Lottie juga menawarkan opsi penyesuaian untuk gaya dan desain. Di sini Anda dapat menetapkan tinggi, lebar, dan opacity animasi. Selain itu, Anda dapat menambahkan filter CSS dan menentukan waktu transisi untuk memastikan tampilan yang profesional.

Langkah 10: Uji dan simpan animasi

Setelah kamu membuat pengaturan yang diinginkan, simpan perubahan yang telah kamu lakukan. Periksa animasi pada pratinjau editor Elementor untuk memastikan bahwa semuanya berfungsi seperti yang diinginkan. Hasilnya seharusnya menjadi animasi yang menarik, menunjukkan efek responsif saat dihover atau diklik.

Ringkasan

Menyisipkan animasi Lottie ke dalam Elementor mudah dan memungkinkan kamu untuk memberikan desain web yang dinamis dan modern. Dengan langkah-langkah yang dijelaskan, kamu dapat menyesuaikan animasi, meningkatkan pengalaman pengguna, dan berkreasi dengan konten kamu.