Cara Menambahkan Animasi Lottie di WordPress (4 Langkah Sederhana)

Menggunakan animasi Lottie di WordPress bisa menjadi cara yang bagus untuk merapikan halaman Anda. Mereka biasanya ringan dan dapat disesuaikan, sehingga dapat membantu Anda membuat konten yang menarik tanpa merusak pengalaman pengguna (UX) Anda. Namun, Anda mungkin mencari cara bebas stres untuk menambahkannya ke situs Anda.

Untungnya, prosesnya lebih mudah dari yang Anda kira. Dengan menggunakan plugin seperti Otter Blocks, Anda dapat menambah dan menyesuaikan animasi Lottie Anda hanya dengan beberapa klik. Anda juga dapat mengatur kondisi visibilitas agar mereka bermain pada waktu yang tepat.

Pengantar animasi Lottie

Lottie adalah format file sumber terbuka untuk animasi web. Ini memungkinkan Anda membuat animasi khusus untuk merek Anda dan menggunakannya di situs web Anda:

Tentu saja, Anda selalu dapat memilih GIF, tetapi file ini dapat membebani situs Anda. Animasi Lottie jauh lebih kecil daripada GIF. Oleh karena itu, mereka dapat membantu Anda membuat situs Anda lebih menarik sambil mempertahankan UX Anda dan memberikan waktu pemuatan yang cepat.

Selain itu, animasi Lottie hadir dengan banyak opsi penyesuaian. Perpustakaan itu sendiri sangat luas, menyediakan akses ke ribuan elemen, karakter, dan ilustrasi. Namun, Anda juga dapat menukar warna, mengubah pengaturan tampilan, dan menambahkan kondisi visibilitas.

Animasi khusus dapat membantu Anda mengesankan pengunjung Anda. Plus, mereka dapat membuat situs Anda terlihat segar dan unik.

Bagaimana cara menambahkan animasi Lottie ke WordPress (dalam 4 langkah)

Sekarang setelah Anda mengetahui lebih banyak tentang Lottie Animations, mari kita lihat cara menambahkannya ke situs web WordPress Anda:

Langkah 1: Instal dan aktifkan Otter Blocks

Ada banyak cara untuk menambahkan animasi Lottie di WordPress. Misalnya, Anda dapat menggunakan HTML dan JavaScript. Namun, metode ini bisa sangat rumit.

Sebagai alternatif, Anda dapat menggunakan plugin animasi Lottie, meskipun ini mungkin tidak kompatibel dengan semua pembuat halaman. Plus, itu tidak menawarkan banyak pilihan gaya.

Cara termudah untuk menambahkan Animasi Lottie ke situs Anda adalah dengan plugin seperti Otter Blocks:

Plugin ini menambahkan blok dan template konten baru ke situs Anda, termasuk blok untuk animasi Lottie. Itu juga memperluas fungsionalitas Editor Blok dengan CSS khusus, animasi, kondisi visibilitas, dan banyak lagi. Oleh karena itu, ini membantu Anda mendesain halaman Anda dengan lebih efisien dan mengurangi kebutuhan pembuat halaman.

Jika Anda meningkatkan ke Otter Blocks Pro, Anda akan mendapatkan akses ke fitur lanjutan seperti blok WooCommerce khusus dan pengaturan gaya tambahan. Namun, Anda tidak memerlukan versi Pro untuk menggunakan fitur animasi Lottie.

Jika Anda ingin menggunakan versi gratis, buka Plugins > Add New di dasbor WordPress Anda dan cari “Otter Blocks:”

Kemudian, klik Instal > Aktifkan . Anda sekarang akan melihat pilihan blok baru di Editor Blok.

Langkah 2: Pilih animasi dari perpustakaan Lottie

Sekarang setelah Anda menyiapkan Otter Blocks di situs web Anda, Anda dapat menuju ke perpustakaan Lottie untuk memilih animasi. Untuk mengakses desain, Anda harus membuat akun gratis.

Setelah Anda membuat profil, buka Discover dan pilih Free Ready-to-use Animations :

Di sini, Anda dapat menelusuri pustaka elemen Lottie yang dapat digunakan di situs web, aplikasi, dan media sosial:

Saat Anda menemukan animasi yang ingin Anda gunakan, klik desainnya. Munculan akan muncul di mana Anda dapat membuat beberapa perubahan pada tampilan animasi:

Misalnya, Anda dapat menyesuaikan kecepatan animasi dan mengubah warna latar belakang. Jika Anda mengklik Edit Warna Lapisan , Anda akan dibawa ke Editor Lottie:

Di sini, Anda dapat menyesuaikan warna bagian mana pun dari desain. Cukup klik bagian elemen yang ingin Anda ubah, buka Semua warna dan gunakan pemilih warna untuk menerapkan nada baru:

Jika Anda melakukan perubahan yang tidak Anda sukai, klik panah Batalkan di kiri atas layar.

Langkah 3: Rekatkan URL animasi Lottie ke Blok Otter Anda atau unggah file Lottie

Setelah puas dengan desain Anda, Anda memiliki dua opsi untuk menambahkannya ke WordPress:

1. Anda dapat menyalin URL Animasi Lottie untuk menambahkan versi dari server LottieFiles ke situs Anda. Anda akan menemukan ini di pop-up animasi Anda, tepat di bawah desain.
2. Anda dapat mengunduh LottieFile yang telah selesai ke komputer Anda dengan mengeklik tombol Unduh di pojok kanan atas dan memilih format dotLottie . Ini akan membiarkan Anda meng-host file di server Anda.

Kemudian, kembali ke situs WordPress Anda dan buka halaman atau postingan tempat Anda ingin menyisipkan animasi.

Klik untuk menambahkan blok baru dan cari "Lottie Animations:"

Tambahkan blok ke halaman Anda. Lalu, pilih salah satu opsi berikut:

• Sisipkan dari URL – gunakan ini jika Anda ingin memasukkan tautan ke file Lottie di server LottieFiles. Yang perlu Anda lakukan hanyalah menempelkan tautan URL Animasi Lottie yang Anda salin dari situs web LottieFiles.
• Unggah – gunakan ini jika Anda mengunduh file dotLottie yang sebenarnya dari LottieFiles. Anda kemudian dapat mengunggah file itu ke situs WordPress Anda.

Selanjutnya, tekan Enter dan animasi akan muncul di halaman:

Anda sekarang dapat menyimpan perubahan Anda dan melanjutkan ke langkah terakhir.

Langkah 4: Sesuaikan animasi Anda dengan Otter Blocks

Sekarang setelah Anda menambahkan animasi Lottie di WordPress, Anda siap menyesuaikan desain dan tata letaknya. Di pengaturan Blokir, Anda akan melihat pilihan opsi tampilan.

Di bawah TRIGGER , Anda dapat memilih antara putar otomatis , gulir , arahkan kursor , atau klik . Animasi tidak akan diputar hingga salah satu dari tindakan berikut diselesaikan di halaman:

Anda juga memiliki opsi untuk mengaktifkan animasi agar diputar secara berulang. Selain itu, Anda dapat menyesuaikan kecepatan animasi menggunakan penggeser, membalikkan arah, dan mengubah lebar desain.

Jika Anda ingin mengubah warna latar belakang, klik tab Latar Belakang . Di sini, Anda dapat memilih salah satu opsi Solid default, menggunakan pemilih warna, atau memilih latar belakang gradien:

Jika Anda menuju ke Visibility Conditions , Anda akan dapat mengonfigurasi animasi Anda agar hanya muncul dalam keadaan tertentu:

Misalnya, Anda mungkin ingin blok hanya dapat dilihat oleh pengguna yang masuk, atau ditampilkan pada tanggal tertentu. Untuk melakukan ini, klik Tambahkan Grup Aturan . Kemudian, pilih panah untuk membuka pengaturan:

Di bawah CONDITION , gunakan menu tarik-turun untuk mengonfigurasi setelan visibilitas Anda. Anda dapat menambahkan lebih dari satu ketentuan dan membuat grup aturan tambahan.

Mulailah dengan animasi Lottie di WordPress

Untuk rekap, berikut adalah empat langkah untuk menambahkan animasi Lottie di WordPress:

Untuk lebih banyak cara meningkatkan editor WordPress asli, Anda dapat melihat koleksi lengkap plugin blok WordPress terbaik kami.

Apakah Anda memiliki pertanyaan tentang menambahkan Animasi Lottie di WordPress? Beri tahu kami di bagian komentar di bawah!