Di artikel ini, Anda akan belajar cara:
-
Menambahkan animasi native
-
Menyematkan elemen animasi dari pihak ketiga
Menambahkan native animation
Ada dua cara menambahkan animasi native:
-
Secara global (di seluruh website): pilih satu animasi untuk digunakan pada semua elemen di seluruh website
-
Secara lokal (per elemen): pilih animasi yang berbeda untuk elemen website yang berbeda
CATATAN: Kode embed elemen tidak bisa digunakan untuk animasi native
Menambahkan animasi secara global
Dari website builder, buka panel Style website di sebelah kiri. Buka tab Animasi, lalu pilih gaya animasi yang diinginkan (fade, slide, atau scale):
Animasi yang sudah dipilih akan digunakan pada semua elemen dan bagian website. Anda bisa menonaktifkan animasi untuk elemen tertentu di pengaturannya masing-masing. Sebagai contoh, berikut ini cara menonaktifkan animasi untuk elemen teks:
Setelah mengaktifkan atau menonaktifkan animasi, jangan lupa klik update website agar perubahan bisa dilihat oleh pengunjung. Untuk melihat pratinjau animasi, gunakan mode preview atau buka versi live website.
Menambahkan animasi ke elemen tertentu
Dari website builder, klik elemen yang ingin ditambahkan animasinya, lalu pilih Edit atau Ubah untuk membuka pengaturannya. Buka pengaturan Animasi dan klik jenis animasi yang diinginkan.
Pengaturan elemen teks:
Pengaturan elemen gambar:
Pengaturan elemen tombol:
Ingat, selalu klik update website agar perubahan tersimpan. Untuk melihat pratinjaunya, klik mode preview atau buka versi live website.
Menyematkan elemen animasi dari pihak ketiga
Anda bisa menyematkan animasi gratis ke website dari tool pihak ketiga. Contoh di bawah ini menggunakan animasi dari Lordicon.
1. Login ke Lordicon, lalu pilih animasi yang diinginkan. Edit terlebih dahulu jika perlu:
2. Klik HTML, lalu salin kodenya:
3. Buka website builder, lalu tambahkan kode embed elemen ke bagian website yang diinginkan.
4. Tempel kode animasi ke elemen embed. Animasi kini akan muncul di halaman website Anda:
Anda juga bisa mengubah ukuran elemen kode jika perlu.
5. Terakhir, update website agar perubahan tersimpan.
Untuk melihat pratinjaunya, klik mode preview atau buka versi live website.