Cara Menggunakan Animasi Lottie di WordPress

Memasukkan animasi ke dalam situs WordPress Anda adalah cara yang bagus untuk menghidupkan halaman web yang lelah dan membuat pengunjung Anda tetap terlibat sepanjang waktu mereka di situs Anda. Cara mudah dan efisien untuk melakukannya adalah dengan menggunakan animasi lottie: animasi ringan berkualitas tinggi.

Animasi lottie semakin populer karena berbagai alasan, dan jika Anda siap untuk ikut-ikutan dan merapikan situs web Anda, itu mungkin cocok untuk Anda.

Ada beberapa cara berbeda untuk membuat animasi ini dan menambahkannya dengan lancar ke situs WordPress Anda.

Apa itu Animasi Lottie?

Lottie adalah perpustakaan untuk Android, iOS, Web, dan Windows yang membuat animasi After Effects dan memungkinkan data animasi diekspor sebagai file JSON sebagai lawan dari jenis file gambar biasa. Singkatnya, mereka dapat dengan mudah mengganti aset statis dengan sesuatu yang menyenangkan dan menarik.

Solusi open-source ini pertama kali diperkenalkan oleh tim di AirBnB, tetapi dengan cepat mendapatkan popularitas dengan desainer dan animator di pasar yang berbeda. Salah satu keuntungan besar menggunakan animasi lottie di situs WordPress Anda adalah ukuran filenya sangat kecil dibandingkan dengan animasi GIF atau file mp4. Selain itu, format animasi yang fleksibel memungkinkan browser untuk menangani rendering.

Banyaknya kemungkinan untuk menggunakan animasi lottie adalah salah satu alasan mereka begitu populer. Anda dapat menggunakan animasi lottie sebagai header animasi, tombol, elemen grafis yang menarik, dan banyak lagi. Anda juga dapat menyetel animasi untuk dipicu saat pengunjung menggulir, mengarahkan, atau mengklik halaman web. Fleksibilitas dan implementasi yang mudah untuk situs web B2C dan B2B menjadikannya cara yang mengubah permainan untuk meningkatkan kualitas dan tampilan keseluruhan desain web Anda.

Membuat Animasi Lottie

Saat mempertimbangkan apakah akan menambahkan animasi lottie ke situs Anda, pertama-tama Anda harus memutuskan apakah akan melakukan pendekatan stok atau kustom. Masing-masing memiliki pro dan kontra, jadi sebaiknya pertimbangkan kedua opsi sebelum memutuskan.

Dengan semua jenis animasi, lebih sedikit selalu lebih. Saat memasukkan elemen animasi ke dalam desain ulang situs web, pertimbangkan peran apa yang disajikan animasi dalam perjalanan pelanggan.

Animasi Lottie Kustom

Jika Anda mencari animasi lottie khusus untuk situs web Anda, Anda harus bekerja dengan animator atau desainer yang berspesialisasi dalam Adobe After Effects dan terbiasa dengan jenis animasi ini.

Banyak animasi lottie menggunakan gaya ilustrasi, jadi Anda harus memutuskan apakah ini cocok dengan merek dan gaya situs web sebelum melanjutkannya. Setelah Anda memutuskan elemen grafis dan efek animasi, animator perlu membuat animasi khusus di Adobe After Effects dan mengekspornya sebagai animasi lottie, menggunakan ekstensi After Effects. Ini akan membuat animasi berkualitas tinggi yang dapat dengan mudah diterapkan ke situs Anda.

Salah satu alasan mengapa animasi lottie berkualitas tinggi adalah karena proses pembuatannya menghilangkan kebutuhan pengembang atau insinyur untuk membuat ulang animasi perancang dalam format web. Ini menawarkan solusi siap pakai yang membuat penerapan animasi lebih mudah dari sebelumnya.

Animasi Saham Lottie

Animasi lottie saham adalah pilihan yang bagus jika Anda ingin mempercepat desain baru Anda. Anda dapat mencari animasi lottie stok yang ada dan jika perlu, sesuaikan agar sesuai dengan merek Anda.

Lottie Files adalah situs web stok tempat Anda dapat menemukan banyak animasi lottie gratis dan berbayar. Situs ini juga menawarkan alat pengeditan tempat Anda dapat mengedit warna animasi sebelum mengunduh. Jika Anda perlu mengubah banyak warna dalam animasi, animator atau desainer yang terampil juga dapat menggunakan Adobe After Effects untuk membuat perubahan tersebut lebih efisien dan mengekspor animasi.

Jika Anda ingin menerapkan banyak animasi di sebuah situs, atau jika Anda memiliki estetika situs yang sangat spesifik, mungkin sulit untuk menemukan beberapa opsi saham dengan gaya yang tepat. Dalam hal ini, Anda dapat mempertimbangkan untuk menyewa seorang animator untuk membuat lebih banyak animasi yang sesuai dengan situs Anda dan sesuai dengan opsi stok yang telah Anda pilih.

Dengan semua jenis animasi atau grafik stok, ingatlah persyaratan lisensi untuk animasi stok dan pastikan untuk menyumbangkan animasi ke desainer asli jika diperlukan.

Menambahkan Animasi Lottie di WordPress

Ini adalah proses yang cukup mulus untuk menambahkan animasi lottie ke situs web WordPress. Anda dapat menggunakan widget HTML khusus untuk menambahkan kode animasi ke situs, atau menggunakan plugin WordPress untuk menambahkan animasi.

Widget HTML Khusus

Pengembang WordPress yang terampil dapat menggunakan perpustakaan JavaScript kecil dan widget HTML khusus untuk menambahkan animasi lottie ke situs. Anda akan mulai dengan mengunggah skrip lottie.min.js bersama dengan file .json animasi dan aset gambar apa pun ke folder tema. Kemudian ada potongan kecil JS untuk ditambahkan ke widget untuk memulai skrip Lottie, yang memuat file animasi .json ke div penampung yang diinginkan.

Pendekatan yang disederhanakan ini bisa sangat cocok untuk sebagian besar situs WordPress karena menghindari membebani situs dengan plugin WordPress tambahan. Saat menambahkan animasi lottie, Anda juga dapat mengontrol apakah animasi berputar, berapa kali berulang, dan apa yang dapat memicu elemen animasi pada halaman.

Sebagian besar plugin untuk menambahkan animasi lottie tanpa bantuan pengembang memerlukan pembuat halaman Elementor, sehingga pendekatan HTML khusus cenderung bekerja lebih baik jika Anda menggunakan plugin pembuat tema atau halaman selain Elementor.

Menambahkan elemen ke situs tanpa plugin juga lebih baik untuk kecepatan dan kinerja situs web karena menambahkan lebih banyak plugin akan membebani situs.

Opsi Plugin WordPress

Jika Anda tidak ingin menggunakan pengembang untuk melakukannya dengan cara khusus, opsi lain untuk menambahkan widget lottie ke situs Anda adalah dengan menggunakan plugin WordPress.

Elementor Pro – Widget Lottie

Elementor adalah pembuat halaman untuk WordPress dengan fitur seret dan lepas, dan lisensi Elementor Pro menyertakan widget Lottie. Dengan widget ini, Anda dapat menambahkan animasi lottie tanpa kode dan menyesuaikan dimensi dan perilaku animasi. Plugin ini dengan mudah terhubung dengan situs web stok Lottie Files, sehingga Anda dapat dengan mudah memilih opsi animasi stok langsung dari situs atau mengunggah kreasi Anda sendiri.

Blok Gutenberg – Tambahan Utama

Jika Anda menggunakan editor Gutenberg di situs Anda, plugin Ultimate Addon untuk Gutenberg bisa menjadi pilihan yang baik untuk menambahkan animasi lottie dengan bantuan plugin. Editor Gutenberg telah menjadi bagian dari inti WordPress sejak rilis WordPress 5.0, namun itu bukan yang paling populer. Banyak situs masih menggunakan editor klasik atau pembuat halaman lain seperti Site Origin, Elementor, atau Beaver Builder, untuk beberapa nama.

Meskipun demikian, ini adalah pilihan yang layak. The Ultimate Addons for Gutenberg adalah plugin yang ditinjau dengan baik dan menawarkan banyak fitur hebat, termasuk opsi untuk menambahkan animasi lottie dan mengontrol opsi lanjutan, seperti kecepatan dan pemicu animasi.

Plugin WordPress Tambahan

Ada plugin tambahan yang tersedia di direktori WordPress untuk menambahkan dan menyesuaikan animasi lottie. Ingatlah bahwa beberapa plugin mengharuskan situs Anda dibuat dan menggunakan Elementor, seperti Premium Addons untuk Elementor dan Elementskit Addon untuk Elementor. Ada juga plugin yang ditujukan untuk tema dan pembuat WordPress lainnya, seperti tema Divi atau blok Gutenberg.

Saatnya Beranimasi

Animasi lottie sangat mudah diakses oleh siapa saja yang memiliki situs WordPress. Apakah Anda ingin animasi yang disesuaikan atau animasi stok, animasi pahlawan atau yang bergulir, sumber daya ada di ujung jari Anda.

Anda menjadi kreatif dalam bagaimana Anda ingin animasi Anda terlihat dan apa yang Anda ingin mereka lakukan, dan ketika Anda mulai menjelajahi kemungkinan animasi lottie, Anda akan mulai menyadari betapa mereka dapat menambah kualitas situs web Anda. .