{"id":123,"date":"2023-05-31T08:52:58","date_gmt":"2023-05-31T08:52:58","guid":{"rendered":"https:\/\/blog.hostinger.io\/id\/support\/2023\/05\/31\/6463358-hostinger-website-builder-cara-menambahkan-animasi\/"},"modified":"2025-08-26T19:57:51","modified_gmt":"2025-08-26T19:57:51","slug":"6463358-hostinger-website-builder-cara-menambahkan-animasi","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/id\/support\/6463358-hostinger-website-builder-cara-menambahkan-animasi\/","title":{"rendered":"Hostinger Website Builder: Cara Menambahkan Animasi"},"content":{"rendered":"<p class=\"no-margin\">Di artikel ini, Anda akan belajar cara:<\/p><ul>\n<li>\n<p class=\"no-margin\">Menambahkan animasi native<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Menyematkan elemen animasi dari pihak ketiga<\/p>\n<\/li>\n<\/ul><h2 id=\"h_619df739e5\">Menambahkan native animation<\/h2><p class=\"no-margin\">Ada dua cara menambahkan animasi native:<\/p><ul>\n<li>\n<p class=\"no-margin\"><b>Secara global (di seluruh website)<\/b>: pilih satu animasi untuk digunakan pada semua elemen di seluruh website<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Secara lokal (per elemen)<\/b>: pilih animasi yang berbeda untuk elemen website yang berbeda<\/p>\n<\/li>\n<\/ul><p class=\"no-margin\"><b>CATATAN<\/b>: Kode embed elemen tidak bisa digunakan untuk animasi native<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_5c370b8f3f\">Menambahkan animasi secara global<\/h2><p class=\"no-margin\">Dari website builder, buka panel <b>Style website<\/b> di sebelah kiri. Buka tab <b>Animasi<\/b>, lalu pilih gaya animasi yang diinginkan (fade, slide, atau scale):<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/7b81d1ff-9fe5-4915-9df6-b19090d1d21f.jpg\" alt=\"Global animation settings\"><\/div><p class=\"no-margin\">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:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/36b6372f-bbad-4313-b804-9a992393c29b.jpg\" alt=\"Text animation settings\"><\/div><p class=\"no-margin\">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.<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_4c1116b055\">Menambahkan animasi ke elemen tertentu<\/h2><p class=\"no-margin\">Dari website builder, klik elemen yang ingin ditambahkan animasinya, lalu pilih <b>Edit <\/b>atau <b>Ubah <\/b>untuk membuka pengaturannya. Buka pengaturan <b>Animasi <\/b>dan klik jenis animasi yang diinginkan. <\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Pengaturan elemen teks:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/dbd6bfcb-9aed-4d05-99a6-dfd876a82db5.jpg\" alt=\"Button animation settings\"><\/div><p class=\"no-margin\">Pengaturan elemen gambar:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/2c6b8a49-1987-4f62-938c-fd7b35ab7067.jpg\" alt=\"Image animation settings\"><\/div><p class=\"no-margin\">Pengaturan elemen tombol:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/7074f669-8b52-4f03-9d10-7c9e6e65927b.jpg\" alt=\"Button animation settings\"><\/div><p class=\"no-margin\">Ingat, selalu klik update website agar perubahan tersimpan. Untuk melihat pratinjaunya, klik mode preview atau buka versi live website.<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_08d01588e0\">Menyematkan elemen animasi dari pihak ketiga<\/h2><p class=\"no-margin\">Anda bisa menyematkan animasi gratis ke website dari tool pihak ketiga. Contoh di bawah ini menggunakan animasi dari <b><a href=\"https:\/\/lordicon.com\/icons\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Lordicon<\/a><\/b>.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">1. Login ke Lordicon, lalu pilih animasi yang diinginkan. Edit terlebih dahulu jika perlu:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/6d41c478-778b-460b-881c-6d0a8722d9e0.jpg\" alt=\"The library of animations at Lordicon\"><\/div><p class=\"no-margin\">2. Klik <b>HTML<\/b>, lalu salin kodenya:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/18962a65-52f6-44cb-a007-23b55f50e704.jpg\" alt=\"Copying the HTML code of the animation\"><\/div><p class=\"no-margin\">3. Buka website builder, lalu tambahkan kode embed elemen ke bagian website yang diinginkan.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">4. Tempel kode animasi ke elemen embed. Animasi kini akan muncul di halaman website Anda:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/f3216316-2649-4b44-8a75-23b698c7759d.jpg\" alt=\"Pasting the HTML code of the animation at Hostinger Website Builder\"><\/div><p class=\"no-margin\">Anda juga bisa mengubah ukuran elemen kode jika perlu.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">5. Terakhir, update website agar perubahan tersimpan.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Untuk melihat pratinjaunya, klik mode preview atau buka versi live website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cara menambahkan animasi ke website di Hostinger Website Builder<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[259],"tags":[],"class_list":["post-123","post","type-post","status-publish","format-standard","hentry","category-integrasi"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6463358-hostinger-website-builder-how-to-add-animations\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6463358-hostinger-creador-de-sitios-web-como-anadir-animaciones\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6463358-hostinger-createur-de-site-web-comment-ajouter-des-animations\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/6463358-hostinger-website-builder-cara-menambahkan-animasi\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6463358-hostinger-svetainiu-kurimo-irankis-kaip-prideti-animaciju\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6463358-hostinger-criador-de-sites-como-adicionar-animacoes\/","default":0},{"locale":"uk-UA","link":"https:\/\/www.hostinger.com\/ua\/support\/6463358-----\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/posts\/123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/comments?post=123"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/posts\/123\/revisions"}],"predecessor-version":[{"id":1221,"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/posts\/123\/revisions\/1221"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/media?parent=123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/categories?post=123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/tags?post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}