Lewati ke konten utama
Semua KoleksiWebsite BuilderIntegrasi
Website Builder: Cara Menambahkan Animasi
Website Builder: Cara Menambahkan Animasi

Cara menambahkan animasi ke website di Hostinger Website Builder

Diperbarui lebih dari setahun yang lalu

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):

Global animation settings

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:

Text animation settings

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:

Button animation settings

Pengaturan elemen gambar:

Image animation settings

Pengaturan elemen tombol:

Button animation settings

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:

The library of animations at Lordicon

2. Klik HTML, lalu salin kodenya:

Copying the HTML code of the animation

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:

Pasting the HTML code of the animation at Hostinger Website Builder

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.

Apakah pertanyaan Anda terjawab?