Apa Itu Lottie
LottieFiles adalah website yang berisi kumpulan animasi yang dirancang untuk Lottie. Sedangkan Lottie adalah format file gambar bergerak atau animasi berbasis JSON yang membuat seorang desainer dapat mengirimkan animasi pada platform apa pun dengan mudah, semudah mengirim aset statis. Lottie ini berisi file kecil yang berfungsi di platform apa saja dan dapat meningkatkan atau menurunkan tanpa pixelation. Animasi diekspor yang berupa file JSON melalui ekstensi After Effects open-source yang disebut Bodymovin. Lottie memuat data animasi dalam format JSON, dan membuat animasi secara real time.
Apa Yang Harus Dipersiapkan
Sebelum masuk ke tutorial nya Anda perlu mempersiapkan beberapa hal terlebih dahulu.
Website WordPress
Salah satu yang harus Anda siapkan yaitu sebuah website yang menggunakan CMS WordPress. Jika Anda belum memiliki website WordPress, Anda bisa beli hosting murah di Masterweb gratis domain dan SSL. Anda tinggal buat website hanya dengan 1 klik.
File Lottie
Jika Anda sudah menyiapkan website WordPress nya, Anda juga harus menyiapkan file animasinya dengan format Lottie. Jika Anda tidak tahu cara membuat animasi, jangan khawatir LottieFiles menyediakan banyak sekali kumpulan animasi menarik. Anda masuk ke website LottieFiles, setelah itu Anda klik menu animations dan pilih animasi yang diinginkan. Anda juga bisa menggunakan fitur search pada di bagian menu bar untuk mencari animasi yang spesifik dengan cepat.
Bagaimana Memasang LottieFiles di WordPress
Pada bagian ini kami akan menjelaskan bagaimana cara memasang LottieFiles di WordPress. Pastikan Anda sudah menyiapkan beberapa hal yang perlu disiapkan yang sudah disebutkan diatas.
Login ke Dashboard WordPress
Hal pertama yang harus Anda lakukan yaitu login ke halaman dashboard website WordPress Anda. URL login ke dashboard WordPress biasanya memiliki format seperti www.namawebsite.com/wp-admin. Lalu masukkan nama/username dan passwordnya
Install Plugin
Setelah Anda masuk ke halaman dashboard WordPress tampilannya akan seperti gambar dibawah ini
Agar LottieFiles bisa dipasang di website, Anda harus menginstal plugin terlebih dahulu. Untuk menginstall plugin Anda arahkan kursornya diatas plugins di sebelah kiri dan pilih add new
Kali ini kami akan menggunakan plugin ‘WP Bodymovin’. Setelah itu Anda cari plugin dengan nama ‘WP Bodymovin’. Plugin ini digunakan untuk menampilkan animasi Anda di website. Setelah itu Anda install plugin tersebut
Upload File Lottie
Setelah plugin ‘WP Bodymovin’ sudah di install, langkah selanjutnya yaitu upload file lottie yang sudah Anda siapkan sebelumnya. Anda kembali ke halaman dashboard awal lalu arahkan kursor ke animations disebelah kiri dan pilih add new.
Selanjutnya Anda masukkan judul animations nya lalu masukkan juga file animasi Anda di bagian JSON data file. Setelah selesai Anda klik publish di sebelah kanan dan nanti akan muncul animasinya di bagian preview animasi
Jika animasi Anda ingin bergerak secara terus menerus atau looping, Anda ceklis bagian loop dibawah ini lalu publish lagi. Jangan lupa juga copy shortcode nya untuk nanti dimasukkan ke halaman atau postingan agar animasinya bisa muncul di halaman yang Anda inginkan.
Menampilkan Animasi
Nah jika sudah upload file animasinya maka langkah selanjutnya yaitu bagaimana cara untuk membuat animasi tampil ke halaman yang Anda inginkan? Anda masuk ke halaman yang ingin Anda tambahkan beberapa animasi, lalu gunakan fitur shortcode seperti dibawah ini
Setelah itu isi shortcode nya yang Anda copy sebelumnya saat upload file Lottie lalu klik tombol publish
Tampilan Animasi di Website
