{"id":35067,"date":"2024-04-02T13:37:38","date_gmt":"2024-04-02T06:37:38","guid":{"rendered":"\/tutorial\/?p=35067"},"modified":"2025-12-18T23:29:39","modified_gmt":"2025-12-18T16:29:39","slug":"cara-edit-website","status":"publish","type":"post","link":"\/id\/tutorial\/cara-edit-website","title":{"rendered":"Cara Edit Website dengan Mudah dari Konten hingga Desainnya"},"content":{"rendered":"<p>Agar bisa memaksimalkan potensi keuntungan dari website, Anda perlu mengupdatenya secara rutin. Langkah ini juga membantu menjaga reputasi online Anda, serta menaikkan peringkat website di mesin pencari. Salah satu caranya adalah dengan mengedit website agar tetap up-to date.<\/p><p>Nah, di artikel ini, kami akan menunjukkan cara edit website menggunakan <a href=\"\/id\/website-builder\">Website Builder Hostinger<\/a>. Kami akan membahas berbagai aspek pengeditan website, mulai dari mengedit teks, menjadikan website mobile-friendly, hingga pengeditan tingkat lanjut dan menggunakan coding.<\/p><p>Scroll ke bawah untuk mulai membaca artikelnya yuk!<\/p><h2 class=\"wp-block-heading\" id=\"h-kenapa-website-perlu-diedit\">Kenapa Website Perlu Diedit?<\/h2><p>Mengedit website merupakan langkah penting agar website Anda tetap relevan dengan tren desain dan konten terbaru. Dalam hal ini, developer maupun pemilik website perlu melakukan beberapa hal, seperti mengupdate konten website hingga memperbaiki desain webnya secara keseluruhan.<\/p><p>Namun, prosesnya tidak hanya meliputi teks atau visual website saja. Anda juga perlu mengoptimalkan tag HTML, menambahkan elemen multimedia, serta memastikan homepage website tetap menarik dan informatif dengan <a href=\"\/id\/tutorial\/contoh-copywriting\">copywriting dan CTA yang efektif<\/a>.<\/p><p>Nah, ketika mengedit website, pertimbangkan bagaimana perubahan tersebut akan ditampilkan di berbagai perangkat serta optimasinya untuk mesin pencari. Anda bisa memanfaatkan developer tool bawaan browser dalam hal ini.<\/p><p>Tool ini membantu Anda melakukan update dan perubahan yang tepat pada website, terutama saat menangani source code yang sudah ada. Anda bisa mengecek detail elemen website, memodifikasi kode HTML, atau mengubah kode JavaScript secara langsung. <\/p><p>Belum memahami cara melakukannya dengan coding? Tenang, Anda bisa menggunakan Website Builder Hostinger untuk mengedit website. Platform ini memiliki editor drag-and-drop yang membantu Anda mengedit dan melakukan maintenance website, lalu memublikasikan hasilnya dengan mudah.<\/p><p>Website Builder Hostinger juga cocok untuk hal-hal seputar mengupdate halaman web, seperti menyesuaikan konten, menambahkan halaman baru, atau bahkan mendesain ulang website secara keseluruhan.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/id\/website-builder\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/05\/ID-Website-Builder_in-text-banner-1.png\/public\" alt=\"\" class=\"wp-image-36185\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/05\/ID-Website-Builder_in-text-banner-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/05\/ID-Website-Builder_in-text-banner-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/05\/ID-Website-Builder_in-text-banner-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/05\/ID-Website-Builder_in-text-banner-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-cara-edit-website-dengan-mudah\">Cara Edit Website dengan Mudah<\/h2><p>Di bagian ini, kami akan menjelaskan cara mengedit website menggunakan Website Builder Hostinger. Langkah-langkahnya sangat mudah, bahkan meskipun Anda masih pemula yang belum berpengalaman di bidang desain website. Yuk, langsung mulai tutorialnya!<\/p><h3 class=\"wp-block-heading\" id=\"h-1-akses-website-builder-hostinger\">1. Akses Website Builder Hostinger<\/h3><p>Untuk mulai mengedit website di Website Builder Hostinger, langkah pertama yang harus dilakukan adalah mengakses tool ini:<\/p><ol class=\"wp-block-list\">\n<li>Login ke <a href=\"\/id\/tutorial\/hpanel-tutorial\">hPanel<\/a>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"430\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/halaman-login-hpanel.png\/public\" alt=\"halaman login hpanel\" class=\"wp-image-21851\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/halaman-login-hpanel.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/halaman-login-hpanel.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/halaman-login-hpanel.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/halaman-login-hpanel.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Buka opsi <strong>Website<\/strong> dari menu, lalu pilih website yang ingin Anda edit dengan mengklik <strong>Edit website<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f82ff7acab7\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1136\" height=\"303\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-edit-website-di-hpanel.png\/public\" alt=\"memilih edit website di hpanel\" class=\"wp-image-35074\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-edit-website-di-hpanel.png\/w=1136,fit=scale-down 1136w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-edit-website-di-hpanel.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-edit-website-di-hpanel.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-edit-website-di-hpanel.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-edit-website-di-hpanel.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1136px) 100vw, 1136px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Website builder akan terbuka dalam mode edit dan menampilkan halaman web Anda saat ini. Setelah itu, Anda bisa mulai membuat perubahan.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"667\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/halaman-pengeditan-hostinger-website-builder-untuk-mulai-edit-website.png\/public\" alt=\"halaman pengeditan hostinger website builder untuk mulai edit website\" class=\"wp-image-35075\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/halaman-pengeditan-hostinger-website-builder-untuk-mulai-edit-website.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/halaman-pengeditan-hostinger-website-builder-untuk-mulai-edit-website.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/halaman-pengeditan-hostinger-website-builder-untuk-mulai-edit-website.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/halaman-pengeditan-hostinger-website-builder-untuk-mulai-edit-website.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Kalau belum memiliki website, ikuti langkah-langkah berikut ini untuk membuatnya:<\/p><ol class=\"wp-block-list\">\n<li>Pilih Website Builder Hostinger atau paket <a href=\"\/id\/web-hosting\">managed web hosting<\/a>.<\/li>\n\n\n\n<li>Login ke hPanel.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"430\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/halaman-login-hpanel.png\/public\" alt=\"halaman login hpanel\" class=\"wp-image-21851\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/halaman-login-hpanel.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/halaman-login-hpanel.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/halaman-login-hpanel.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/halaman-login-hpanel.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Buka bagian <strong>Website<\/strong>, lalu pilih <strong>Tambah website<\/strong>. Pilih Website Builder Hostinger sebagai platform Anda.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"565\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/hpanel-tambah-website-builder.png\/public\" alt=\"tampilan opsi website di hpanel dengan tombol tambah website builder hostinger yang dipilih\" class=\"wp-image-39919\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/hpanel-tambah-website-builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/hpanel-tambah-website-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/hpanel-tambah-website-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/hpanel-tambah-website-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-2-mulai-edit-konten-website\">2. Mulai Edit Konten Website<\/h3><p>Ketika menyesuaikan konten halaman web, biasanya Anda perlu mengedit teks, mengganti gambar, dan menyesuaikan elemen multimedia lainnya.<\/p><p><strong>Cara Mengedit Teks di Website<\/strong><\/p><p>Pengeditan teks yang efektif menjadikan konten website lebih menarik dan relevan dengan audiens. Anda perlu mengecek dan memperbaiki kesalahan ketik, mengupdate copywriting halaman, dan memastikan semua teks di website Anda mudah dibaca.<\/p><p>Ikuti langkah berikut untuk mengedit teks di Website Builder Hostinger:<\/p><ol class=\"wp-block-list\">\n<li>Scroll halaman web dan temukan teks yang ingin Anda edit. Klik area teks untuk memilihnya.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"941\" height=\"520\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-bagian-teks-yang-akan-diedit-di-hostinger-website-builder.png\/public\" alt=\"memilih bagian teks yang akan diedit di hostinger website builder\" class=\"wp-image-35078\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-bagian-teks-yang-akan-diedit-di-hostinger-website-builder.png\/w=941,fit=scale-down 941w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-bagian-teks-yang-akan-diedit-di-hostinger-website-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-bagian-teks-yang-akan-diedit-di-hostinger-website-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-bagian-teks-yang-akan-diedit-di-hostinger-website-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 941px) 100vw, 941px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Klik <strong>Edit teks <\/strong>untuk membuka editor teks.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"989\" height=\"543\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-edit-teks-di-hostinger-website-builder.png\/public\" alt=\"menu edit teks di hostinger website builder\" class=\"wp-image-35079\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-edit-teks-di-hostinger-website-builder.png\/w=989,fit=scale-down 989w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-edit-teks-di-hostinger-website-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-edit-teks-di-hostinger-website-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-edit-teks-di-hostinger-website-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 989px) 100vw, 989px\" \/><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Ganti teks sesuai keinginan Anda. Tenang, perubahan Anda akan disimpan secara otomatis.<\/li>\n<\/ol><p><strong>Mengedit Gambar di Website<\/strong><\/p><p>Mengganti gambar yang sudah tidak relevan merupakan cara efektif untuk menyempurnakan tampilan dan nuansa website Anda agar visualnya lebih menarik.<\/p><p>Untuk mulai mengedit gambar dengan Website Builder Hostinger, ikuti langkah-langkah berikut:<\/p><ol class=\"wp-block-list\">\n<li>Pilih gambar yang ingin Anda edit atau ganti.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"797\" height=\"492\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-menu-edit-gambar-di-hostinger-website-builder.png\/public\" alt=\"memilih menu edit gambar di hostinger website builder\" class=\"wp-image-35080\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-menu-edit-gambar-di-hostinger-website-builder.png\/w=797,fit=scale-down 797w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-menu-edit-gambar-di-hostinger-website-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-menu-edit-gambar-di-hostinger-website-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-menu-edit-gambar-di-hostinger-website-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 797px) 100vw, 797px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Klik <strong>Edit gambar<\/strong> untuk membuka <strong>Pengaturan gambar<\/strong>. Di sini, Anda bisa mengganti gambar, mengedit alt text, serta mengatur bentuk dan gaya gambar.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"705\" height=\"1180\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/pengaturan-gambar-builder.png\/public\" alt=\"tampilan menu pengaturan gambar di hostinger website builder\" class=\"wp-image-39920\" style=\"width:352px;height:auto\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/pengaturan-gambar-builder.png\/w=705,fit=scale-down 705w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/pengaturan-gambar-builder.png\/w=179,fit=scale-down 179w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/pengaturan-gambar-builder.png\/w=612,fit=scale-down 612w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/pengaturan-gambar-builder.png\/w=90,fit=scale-down 90w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Anda juga bisa memotong, menduplikasi, dan menyalin gambar melalui toolbar.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"837\" height=\"482\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-pengeditan-gambar-dasar-di-hostinger-website-builder.png\/public\" alt=\"menu pengeditan gambar dasar di hostinger website builder\" class=\"wp-image-35082\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-pengeditan-gambar-dasar-di-hostinger-website-builder.png\/w=837,fit=scale-down 837w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-pengeditan-gambar-dasar-di-hostinger-website-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-pengeditan-gambar-dasar-di-hostinger-website-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-pengeditan-gambar-dasar-di-hostinger-website-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 837px) 100vw, 837px\" \/><\/figure><\/div><p>Atau, pilih <strong>Buat gambar<\/strong> untuk <a href=\"\/id\/tutorial\/cara-membuat-gambar-ai\">membuat gambar menggunakan AI<\/a>. Cukup deskripsikan visual yang Anda inginkan dalam beberapa kata untuk memulai prosesnya.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"364\" height=\"712\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/fitur-ai-image-generator-di-website-builder-hostinger.png\/public\" alt=\"\" class=\"wp-image-35083\" style=\"object-fit:cover\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/fitur-ai-image-generator-di-website-builder-hostinger.png\/w=364,fit=scale-down 364w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/fitur-ai-image-generator-di-website-builder-hostinger.png\/w=153,fit=scale-down 153w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/fitur-ai-image-generator-di-website-builder-hostinger.png\/w=77,fit=scale-down 77w\" sizes=\"(max-width: 364px) 100vw, 364px\" \/><\/figure><\/div><p>Setelah itu, Anda masih perlu mengoptimasi gambar untuk <a href=\"\/id\/tutorial\/cara-optimasi-website\">memaksimalkan SEO website<\/a> serta memastikan gambar bisa dipahami oleh mesin pencari dan aplikasi pembaca layar bagi pengunjung yang menggunakannya.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Tips Berguna<\/h4>\n                    <p>Yuk, pelajari lebih lanjut tentang <a href=\"\/id\/tutorial\/cara-membuat-website-seo-friendly\">cara membuat website yang SEO-friendly dan <\/a><a href=\"\/id\/tutorial\/cara-optimasi-website\">cara optimasi website<\/a> dari segala aspek, mulai dari UX hingga SEO!<\/p>\n                <\/div>\n\n\n\n<\/p><p><strong>Elemen Multimedia<\/strong><\/p><p>Dengan menambahkan elemen multimedia seperti video atau peta, Anda bisa meningkatkan interaktivitas website dan memberikan pengalaman pengguna yang lebih menarik.<\/p><p>Berikut cara mengedit konten multimedia di halaman web Anda:<\/p><ol class=\"wp-block-list\">\n<li>Pilih elemen yang ingin Anda edit. Dalam contoh ini, kami akan mengedit video.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"580\" height=\"397\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/elemen-video-di-website-builder-hostinger.png\/public\" alt=\"elemen video di website builder hostinger\" class=\"wp-image-35084\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/elemen-video-di-website-builder-hostinger.png\/w=580,fit=scale-down 580w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/elemen-video-di-website-builder-hostinger.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/elemen-video-di-website-builder-hostinger.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Klik <strong>Edit video<\/strong> untuk membuka <strong>Pengaturan video<\/strong>. Anda bisa menambahkan animasi, mengulang atau memutar video secara otomatis, serta menampilkan atau menyembunyikan kontrol video.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"355\" height=\"745\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-pengaturan-video-di-hostinger-website-builder-e1712033127650.png\/public\" alt=\"menu pengaturan video di hostinger website builder\" class=\"wp-image-35085\"><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Anda juga bisa menggunakan toolbar untuk mengedit posisi video:<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"661\" height=\"467\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/toolbar-video-di-editor-builder.png\/public\" alt=\"toolbar video di editor builder\" class=\"wp-image-35086\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/toolbar-video-di-editor-builder.png\/w=661,fit=scale-down 661w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/toolbar-video-di-editor-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/toolbar-video-di-editor-builder.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 661px) 100vw, 661px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-3-sesuaikan-desain-website\">3. Sesuaikan Desain Website<\/h3><p>Desain website sangat memengaruhi pandangan pengunjung terhadap brand Anda. Oleh karena itu, penting untuk membuat website yang fungsional dan menarik secara estetika. Pastikan Anda menerapkan tips desain web yang efektif untuk mendapatkan hasil terbaik.<\/p><p><strong>Menambahkan Elemen Halaman Web Baru<\/strong><\/p><p>Elemen halaman seperti formulir kontak, tombol, dan feed media sosial bisa menambahkan lebih banyak fungsi pada halaman web.<\/p><p>Untuk menambahkan elemen pada website Anda, ikuti langkah-langkah berikut ini:<\/p><ol class=\"wp-block-list\">\n<li>Buka menu <strong>Tambahkan elemen<\/strong> dari navigation bar sebelah kiri.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"726\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-tambahkan-elemen-di-builder.png\/public\" alt=\"menu tambahkan elemen di builder\" class=\"wp-image-35087\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-tambahkan-elemen-di-builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-tambahkan-elemen-di-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-tambahkan-elemen-di-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-tambahkan-elemen-di-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Seret dan letakkan elemen yang Anda pilih ke posisi yang diinginkan pada halaman web. Untuk contoh ini, kami akan memilih <strong>Formulir kontak<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1108\" height=\"721\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menambahkan-formulir-kontak-di-builder.png\/public\" alt=\"menambahkan formulir kontak di builder\" class=\"wp-image-35088\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menambahkan-formulir-kontak-di-builder.png\/w=1108,fit=scale-down 1108w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menambahkan-formulir-kontak-di-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menambahkan-formulir-kontak-di-builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menambahkan-formulir-kontak-di-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menambahkan-formulir-kontak-di-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1108px) 100vw, 1108px\" \/><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Klik elemen yang baru ditambahkan tersebut untuk menyesuaikan isi atau desainnya.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"578\" height=\"572\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-pengeditan-formulir-kontak-di-builder.png\/public\" alt=\"menu pengeditan formulir kontak di builder\" class=\"wp-image-35089\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-pengeditan-formulir-kontak-di-builder.png\/w=578,fit=scale-down 578w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-pengeditan-formulir-kontak-di-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-pengeditan-formulir-kontak-di-builder.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 578px) 100vw, 578px\" \/><\/figure><\/div><p><strong>Menyesuaikan Warna dan Font<\/strong><\/p><p>Dalam desain web, warna dan font akan menjadi ciri khas website Anda yang membuat pengunjung lebih mudah mengingatnya. Warna bisa membangkitkan emosi dan menyampaikan pesan tertentu, jadi pilihlah palet warna yang mencerminkan brand Anda.<\/p><p>Di sisi lain, font yang tepat akan memudahkan pengunjung membaca konten website Anda serta mengakses semua bagiannya dengan lancar.<\/p><p>Edit warna dan font website di Website Builder Hostinger seperti langkah-langkah di bawah ini:<\/p><ol class=\"wp-block-list\">\n<li>Buka menu <strong>Style website<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"860\" height=\"619\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-menu-style-website-di-builder.png\/public\" alt=\"memilih menu style website di builder\" class=\"wp-image-35090\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-menu-style-website-di-builder.png\/w=860,fit=scale-down 860w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-menu-style-website-di-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-menu-style-website-di-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-menu-style-website-di-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 860px) 100vw, 860px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Pada tab <strong>Warna<\/strong>, Anda bisa melihat berapa kali setiap warna digunakan di seluruh website. Tentukan skema warna Anda serta atur warna primer dan sekunder di sini.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"359\" height=\"445\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-warna-di-builder.png\/public\" alt=\"menu warna di builder\" class=\"wp-image-35091\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-warna-di-builder.png\/w=359,fit=scale-down 359w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-warna-di-builder.png\/w=242,fit=scale-down 242w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-warna-di-builder.png\/w=121,fit=scale-down 121w\" sizes=\"(max-width: 359px) 100vw, 359px\" \/><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Gunakan tab <strong>Font<\/strong> untuk mengatur gaya teks website. Pilih grup font yang tersedia, atau klik <strong>Kustomisasi font<\/strong> untuk memilih font heading dan paragraf yang Anda sukai.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"359\" height=\"685\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-teks-website-di-builder.png\/public\" alt=\"menu teks website di builder\" class=\"wp-image-35092\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-teks-website-di-builder.png\/w=359,fit=scale-down 359w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-teks-website-di-builder.png\/w=157,fit=scale-down 157w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-teks-website-di-builder.png\/w=79,fit=scale-down 79w\" sizes=\"(max-width: 359px) 100vw, 359px\" \/><\/figure><\/div><p>Anda juga bisa menyesuaikan tombol dan gaya animasi di menu ini.<\/p><p><strong>Menyesuaikan Tata Letak Halaman Web<\/strong><\/p><p>Tata letak yang diatur dengan baik akan memudahkan pengunjung menelusuri website Anda dan menemukan informasi yang mereka butuhkan. Bagian halaman seperti galeri, slideshow, testimoni, atau headline bisa membantu Anda membuat desain sendiri dari template siap pakai.<\/p><p>Ikuti langkah-langkah berikut untuk menambahkan bagian baru di halaman Website Builder Hostinger:<\/p><ol class=\"wp-block-list\">\n<li>Arahkan kursor di antara dua bagian, lalu klik tombol <strong>Tambahkan bagian<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"475\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-tambahkan-bagian-di-builder.png\/public\" alt=\"tampilan untuk menambahkan bagian di website builder hostinger\" class=\"wp-image-35093\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-tambahkan-bagian-di-builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-tambahkan-bagian-di-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-tambahkan-bagian-di-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-tambahkan-bagian-di-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Pilih template bagian yang Anda inginkan, seperti galeri, formulir kontak, atau footer. Anda juga bisa menambahkan bagian kosong.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f82ff7cd676\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"969\" height=\"740\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-tambahkan-bagian-di-builder.png\/public\" alt=\"menu tambahkan bagian di builder\" class=\"wp-image-35094\" style=\"width:658px;height:auto\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-tambahkan-bagian-di-builder.png\/w=969,fit=scale-down 969w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-tambahkan-bagian-di-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-tambahkan-bagian-di-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-tambahkan-bagian-di-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 969px) 100vw, 969px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Saat menyesuaikan bagian ini, pastikan tata letak website juga dioptimalkan untuk perangkat seluler. Ikuti langkah-langkah berikut untuk melihat tampilan perubahan tata letak di layar ponsel:<\/p><ol class=\"wp-block-list\">\n<li>Temukan tombol perangkat seluler di navigation bar bagian atas.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1278\" height=\"124\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-tampilan-perangkat-seluler-di-builder.png\/public\" alt=\"tombol tampilan perangkat seluler di builder\" class=\"wp-image-35095\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-tampilan-perangkat-seluler-di-builder.png\/w=1278,fit=scale-down 1278w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-tampilan-perangkat-seluler-di-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-tampilan-perangkat-seluler-di-builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-tampilan-perangkat-seluler-di-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-tampilan-perangkat-seluler-di-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1278px) 100vw, 1278px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Ubah tampilan ke editor seluler dengan mengklik ikon HP.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"409\" height=\"662\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tampilan-ponsel-builder.png\/public\" alt=\"tampilan ponsel builder\" class=\"wp-image-35096\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tampilan-ponsel-builder.png\/w=409,fit=scale-down 409w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tampilan-ponsel-builder.png\/w=185,fit=scale-down 185w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tampilan-ponsel-builder.png\/w=93,fit=scale-down 93w\" sizes=\"(max-width: 409px) 100vw, 409px\" \/><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Pindahkan bagian dengan tombol panah bila perlu, dan pertimbangkan untuk menyembunyikan elemen berukuran besar agar terlihat lebih baik di perangkat seluler.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"1049\" height=\"1188\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-panah-gambar-di-builder.png\/public\" alt=\"tampilan memindahkan elemen dengan tombol panah di builder\" class=\"wp-image-39922\" style=\"width:460px;height:auto\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-panah-gambar-di-builder.png\/w=1049,fit=scale-down 1049w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-panah-gambar-di-builder.png\/w=265,fit=scale-down 265w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-panah-gambar-di-builder.png\/w=904,fit=scale-down 904w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-panah-gambar-di-builder.png\/w=132,fit=scale-down 132w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/tombol-panah-gambar-di-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1049px) 100vw, 1049px\" \/><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Anda juga bisa menggunakan tool <strong>Atur otomatis layout<\/strong> guna meminta bantuan AI untuk menyesuaikan tata letak mobile secara otomatis.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"725\" height=\"407\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/fitur-atur-otomatis-layout-di-website-builder.png\/public\" alt=\"fitur atur otomatis layout di website builder\" class=\"wp-image-35098\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/fitur-atur-otomatis-layout-di-website-builder.png\/w=725,fit=scale-down 725w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/fitur-atur-otomatis-layout-di-website-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/fitur-atur-otomatis-layout-di-website-builder.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-4-edit-website-menggunakan-coding\">4. Edit Website Menggunakan Coding<\/h3><p>Anda juga bisa mengedit website menggunakan kode kustom untuk menambahkan sentuhan personal dan fungsi tingkat lanjut. Di bagian ini, kami akan membahas dua metode untuk melakukannya.<\/p><p><strong>Akses Developer Tool untuk Kustomisasi Tingkat Lanjut<\/strong><\/p><ol class=\"wp-block-list\">\n<li>Buka website Anda di browser. Kami akan menggunakan Google Chrome dalam contoh ini.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"561\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/preview-website.png\/public\" alt=\"preview website\" class=\"wp-image-35102\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/preview-website.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/preview-website.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/preview-website.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/preview-website.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Klik kanan halaman web, kemudian pilih <strong>Inspeksi<\/strong> (Inspect). Chrome DevTools akan terbuka.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"838\" height=\"422\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-inspeksi-di-google-chrome.png\/public\" alt=\"memilih inspeksi di google chrome\" class=\"wp-image-35103\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-inspeksi-di-google-chrome.png\/w=838,fit=scale-down 838w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-inspeksi-di-google-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-inspeksi-di-google-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-inspeksi-di-google-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 838px) 100vw, 838px\" \/><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Gunakan tool pemilih untuk memilih elemen yang ingin Anda modifikasi.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"521\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/chrome-dev-tools-untuk-mengedit-website.png\/public\" alt=\"chrome dev tools untuk mengedit website\" class=\"wp-image-35104\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/chrome-dev-tools-untuk-mengedit-website.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/chrome-dev-tools-untuk-mengedit-website.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/chrome-dev-tools-untuk-mengedit-website.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/chrome-dev-tools-untuk-mengedit-website.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p><strong>Sesuaikan dengan CSS<\/strong><\/p><p>Dengan <a href=\"\/id\/tutorial\/apa-itu-css\">CSS (Cascading Style Sheets)<\/a>, Anda bisa mengubah hampir semua aspek elemen website. Ubah gaya CSS yang ada untuk menyesuaikan tampilan dan perilaku berbagai komponen, seperti penempatan, ukuran, warna, transparansi, dan jenis font.<\/p><p>\n\n\n<div><p class=\"important\"><strong>Penting!<\/strong> Perlu diingat bahwa setiap perubahan atau eksperimen CSS menggunakan DevTools hanya bersifat sementara. Untuk mengonlinekan perubahan yang dibuat, Anda harus mengedit CSS di file sumber website atau melalui editor CSS website builder.<\/p><\/div>\n\n\n\n<\/p><p>Gunakan DevTools untuk menguji berbagai perubahan pada halaman seperti berikut:<\/p><ol class=\"wp-block-list\">\n<li>Pilih elemen yang ingin Anda edit.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1141\" height=\"581\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-elemen-yang-akan-diedit-pada-website.png\/public\" alt=\"memilih elemen yang akan diedit pada website\" class=\"wp-image-35106\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-elemen-yang-akan-diedit-pada-website.png\/w=1141,fit=scale-down 1141w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-elemen-yang-akan-diedit-pada-website.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-elemen-yang-akan-diedit-pada-website.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-elemen-yang-akan-diedit-pada-website.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-elemen-yang-akan-diedit-pada-website.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1141px) 100vw, 1141px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Kode CSS elemen akan ditampilkan di bawah tab <strong>Styles<\/strong>.<\/li>\n\n\n\n<li>Bereksperimenlah dengan berbagai atribut yang ada. Contohnya, untuk menyesuaikan warna teks, cari properti <strong>color<\/strong> dan ganti menjadi warna yang Anda inginkan.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"420\" height=\"130\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/element-color-dipilih.png\/public\" alt=\"element color dipilih\" class=\"wp-image-35107\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/element-color-dipilih.png\/w=420,fit=scale-down 420w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/element-color-dipilih.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/element-color-dipilih.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 420px) 100vw, 420px\" \/><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Untuk menerapkan perubahan ini di website, pilih elemen dengan tool selector, lalu klik tombol plus (<strong>+<\/strong>) di tab <strong>Styles<\/strong>. Tindakan ini akan menghasilkan cuplikan kode yang diperlukan.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"332\" height=\"126\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/new-style-rule.png\/public\" alt=\"new style rule\" class=\"wp-image-35108\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/new-style-rule.png\/w=332,fit=scale-down 332w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/new-style-rule.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/new-style-rule.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 332px) 100vw, 332px\" \/><\/figure><\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Tentukan atribut yang ingin Anda ubah, misalnya <strong>color<\/strong> (warna), lalu tetapkan nilai yang diinginkan.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"116\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/h1-warna.png\/public\" alt=\"h1 warna\" class=\"wp-image-35109\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/h1-warna.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/h1-warna.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/h1-warna.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/h1-warna.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol start=\"6\" class=\"wp-block-list\">\n<li>Gabungkan perubahan Anda dalam baris <strong>&lt;style&gt; <\/strong>sederhana, seperti &lt;style&gt;.element {attribute: value !important;} &lt;\/style&gt;.<\/li>\n\n\n\n<li>Selanjutnya, buka tool edit website Website Builder Hostinger dan tambahkan <strong>Embed code<\/strong> ke halaman. Cukup seret dan letakkan elemen dari menu <strong>Tambahkan elemen<\/strong> ke mana saja di halaman.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-sematkan-kode-di-builder.png\/public\" alt=\"tampilan elemen sematkan kode di website builder hostinger\" class=\"wp-image-35110\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-sematkan-kode-di-builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-sematkan-kode-di-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-sematkan-kode-di-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-sematkan-kode-di-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol start=\"8\" class=\"wp-block-list\">\n<li>Klik <strong>Masukkan kode <\/strong>untuk membuka editor kode khusus.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"554\" height=\"482\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/area-untuk-menyematkan-kode-di-builder.png\/public\" alt=\"area untuk menyematkan kode di builder\" class=\"wp-image-35111\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/area-untuk-menyematkan-kode-di-builder.png\/w=554,fit=scale-down 554w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/area-untuk-menyematkan-kode-di-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/area-untuk-menyematkan-kode-di-builder.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 554px) 100vw, 554px\" \/><\/figure><\/div><p>Tempel potongan kode Anda di sini, lalu klik <strong>Sematkan kode<\/strong>. Simpan perubahan dan kunjungi website Anda untuk melihat perubahan secara langsung.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Saran Bacaan<\/h4>\n                    <p>Membutuhkan panduan lebih lanjut? Simak tutorial kami lainnya tentang <a href=\"\/id\/tutorial\/cara-inspect-element\">cara inspect element<\/a> dan mengubah gaya website yuk!<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-5-tambahkan-fitur-lainnya\">5. Tambahkan Fitur Lainnya<\/h3><p>Melengkapi fitur website Anda akan membantu meningkatkan fungsinya dan memberikan lebih banyak manfaat bagi pengunjung.<\/p><p><strong>Integrasi<\/strong><\/p><p>Anda bisa menambahkan tool dan widget pihak ketiga seperti Google Analytics dan WhatsApp pada website dalam beberapa langkah mudah:<\/p><ol class=\"wp-block-list\">\n<li>Di editor website Website Builder Hostinger, pilih ikon tiga titik di sebelah kiri lalu pilih <strong>Integrasi.<\/strong><\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"435\" height=\"625\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-integrasi-di-builder.png\/public\" alt=\"menu integrasi di builder\" class=\"wp-image-35112\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-integrasi-di-builder.png\/w=435,fit=scale-down 435w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-integrasi-di-builder.png\/w=209,fit=scale-down 209w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/menu-integrasi-di-builder.png\/w=104,fit=scale-down 104w\" sizes=\"(max-width: 435px) 100vw, 435px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Temukan integrasi yang ingin Anda tambahkan pada website.<\/li>\n<\/ol><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"622\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/integrasi-yang-tersedia-di-hostinger-website-builder-e1727063265656.png\/public\" alt=\"tampilan website builder hostinger menunjukkan integrasi yang tersedia\" class=\"wp-image-35113\"><\/figure><ol start=\"3\" class=\"wp-block-list\">\n<li>Ikuti petunjuk khusus setiap aplikasi untuk menautkan akun Anda ke website. Misalnya, Anda perlu menambahkan nomor telepon untuk menghubungkan WhatsApp ke website.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"585\" height=\"603\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/integrasi-whatsapp.png\/public\" alt=\"integrasi whatsapp\" class=\"wp-image-35114\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/integrasi-whatsapp.png\/w=585,fit=scale-down 585w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/integrasi-whatsapp.png\/w=291,fit=scale-down 291w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/integrasi-whatsapp.png\/w=146,fit=scale-down 146w\" sizes=\"(max-width: 585px) 100vw, 585px\" \/><\/figure><\/div><p>Kunjungi website panduan kami untuk mendapatkan informasi selengkapnya tentang <a href=\"https:\/\/support.hostinger.com\/id\/articles\/6463270-website-builder-bagaimana-menambahkan-integrasi\" target=\"_blank\" rel=\"noopener\">mengintegrasikan berbagai tool<\/a> ke Website Builder Hostinger.<\/p><p><strong>Widget<\/strong><\/p><p>Anda juga bisa menggunakan elemen <strong>Sematkan kode<\/strong> untuk menambahkan berbagai widget dan tool pihak ketiga:<\/p><ol class=\"wp-block-list\">\n<li>Buka editor website dan seret elemen <strong>Sematkan kode<\/strong> ke halaman web.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-sematkan-kode-di-builder.png\/public\" alt=\"tampilan elemen sematkan kode di website builder hostinger\" class=\"wp-image-35110\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-sematkan-kode-di-builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-sematkan-kode-di-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-sematkan-kode-di-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memilih-sematkan-kode-di-builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Klik <strong>Sematkan kode<\/strong> untuk membuka editor kode.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"554\" height=\"482\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/area-untuk-menyematkan-kode-di-builder.png\/public\" alt=\"area untuk menyematkan kode di builder\" class=\"wp-image-35111\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/area-untuk-menyematkan-kode-di-builder.png\/w=554,fit=scale-down 554w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/area-untuk-menyematkan-kode-di-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/area-untuk-menyematkan-kode-di-builder.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 554px) 100vw, 554px\" \/><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Tempel kode yang Anda inginkan lalu klik <strong>Sematkan kode<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"560\" height=\"488\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memasukkan-kode-kustom-di-builder.png\/public\" alt=\"memasukkan kode kustom di builder\" class=\"wp-image-35115\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memasukkan-kode-kustom-di-builder.png\/w=560,fit=scale-down 560w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memasukkan-kode-kustom-di-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/memasukkan-kode-kustom-di-builder.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 560px) 100vw, 560px\" \/><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Lihat dan uji widget pada halaman web sebelum memperbarui website Anda.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"441\" height=\"508\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/pratinjau-sematkan-kode.png\/public\" alt=\"pratinjau sematkan kode menampilkan playlist spotify\" class=\"wp-image-35116\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/pratinjau-sematkan-kode.png\/w=441,fit=scale-down 441w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/pratinjau-sematkan-kode.png\/w=260,fit=scale-down 260w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/04\/pratinjau-sematkan-kode.png\/w=130,fit=scale-down 130w\" sizes=\"(max-width: 441px) 100vw, 441px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-6-simpan-dan-onlinekan-perubahan\">6. Simpan dan Onlinekan Perubahan<\/h3><p>Setelah menyempurnakan website Anda dengan konten baru, mengubah desainnya, dan menambahkan lebih banyak fitur, saatnya mengonlinekan perubahan tersebut.<\/p><p>Tidak seperti website builder lainnya, Website Builder Hostinger menyimpan perubahan secara otomatis saat Anda mengedit halaman web. Apabila ingin kembali ke versi sebelumnya, Anda bisa menghubungi tim Customer Success kami untuk membantu <a href=\"\/id\/tutorial\/cara-backup-website\">memulihkan backup website<\/a>.<\/p><p>Sebelum mengonlinekan perubahan, sebaiknya Anda meninjaunya lagi. Pastikan setiap elemen baru berfungsi dengan benar. Mintalah masukan dari orang lain untuk menyempurnakan perubahan tersebut.<\/p><p>Setelah itu, saatnya Anda mengonlinekan website yang baru diupdate. Manfaatkan opsi <strong>Pratinjau<\/strong> untuk melihat hasil edit website sebelum menerbitkannya. Jangan lupa untuk mengecek tampilannya di perangkat seluler.<\/p><p>Setelah puas dengan hasilnya, publikasikan perubahan tersebut di website Anda.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Saran Bacaan seputar Web Development<\/h4>\n                    <p><a href=\"\/id\/tutorial\/cara-membuat-website\">Cara Membuat Website dari Nol dengan Mudah<\/a><br>\n<a href=\"\/id\/tutorial\/desain-website\">Cara Mendesain Website yang Efektif<\/a><br>\n<a href=\"\/id\/tutorial\/website-mobile-friendly\">Cara Membuat Website Mobile-Friendly<\/a><br>\n<a href=\"\/id\/tutorial\/biaya-maintenance-website\">Detail Biaya Maintenance Website<\/a><\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-kesimpulan\">Kesimpulan<\/h2><p>Mengedit website secara efisien merupakan langkah penting yang perlu dilakukan secara rutin untuk meningkatkan reputasi online Anda. Nah, Website Builder Hostinger adalah tool yang ideal untuk tugas ini.<\/p><p>Mulai dari mengedit konten hingga mengintegrasikan tool seperti WhatsApp, Anda bisa mengelola setiap aspek website dengan cepat menggunakan website builder kami. Platform ini sangat berguna bagi pemula yang mencari tool intuitif dengan editor drag-and-drop, elemen bawaan, dan AI.<\/p><p>Pastikan juga untuk mengupdate website secara rutin agar website Anda tetap relevan. Dengan demikian, Anda juga bisa menyesuaikan website dengan preferensi audiens, yang akan turut meningkatkan peringkat website Anda di mesin pencari.<\/p><h2 class=\"wp-block-heading\" id=\"h-tanya-jawab-faq-cara-edit-website-dengan-mudah\">Tanya Jawab (FAQ) Cara Edit Website dengan Mudah<\/h2><p>Temukan jawaban atas beberapa pertanyaan umum mengenai cara mengedit website di bawah ini.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-69442bf344152\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Apa Saja Elemen yang Bisa Diedit di Website?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Anda bisa mengedit hampir semua hal, mulai dari teks, gambar, hingga tata letak dan desainnya. Update rutin akan membuat website Anda tetap menarik, memastikan konten selalu relevan dengan audiens, serta membantu menyediakan fungsi yang sesuai standar desain web dan aksesibilitas terbaru.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69442bf344157\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Seberapa Sering Website Perlu Diedit atau Diupdate?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Sebaiknya edit secara rutin agar kontennya tetap menarik dan untuk menjaga peringkatnya di mesin pencari. Tinjau website Anda minimal setiap tiga bulan untuk memastikan keselarasannya dengan tujuan bisnis. Anda juga boleh mengeditnya lebih sering untuk menerapkan masukan dari pengguna dan menyesuaikan tren terkini.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69442bf344158\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Apa Saja Manfaat Menggunakan Website Builder untuk Mengedit Website?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Website builder mempermudah pengeditan website bagi pengguna dengan semua tingkat keahlian. Platform ini juga menyediakan berbagai opsi kustomisasi dan template siap pakai yang menghemat waktu dan upaya untuk maintenance website agar terlihat lebih profesional.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69442bf344159\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Bisakah Menggunakan Developer Tool untuk Mengedit Website Secara Langsung?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Ya. Developer tool browser, seperti yang ada di Google Chrome, bisa digunakan untuk mengedit kode HTML dan CSS halaman web secara langsung. Hal ini berguna bagi web developer yang ingin membuat perubahan cepat pada tata letak atau menguji fitur baru.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69442bf34415a\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Apakah Mungkin Mengedit Fitur SEO Website Seperti Meta Description?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Tentu saja. Website Builder Hostinger menyediakan fitur mudah untuk mengedit aspek-aspek SEO seperti meta title dan description. Penyesuaian ini sangat penting untuk menaikkan peringkat website di mesin pencari, tanpa harus mengedit kode.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Agar bisa memaksimalkan potensi keuntungan dari website, Anda perlu mengupdatenya secara rutin. Langkah ini juga membantu menjaga reputasi online Anda, serta menaikkan peringkat website di mesin pencari. Salah satu caranya adalah dengan mengedit website agar tetap up-to date. Nah, di artikel ini, kami akan menunjukkan cara edit website menggunakan Website Builder Hostinger. Kami akan membahas [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/cara-edit-website\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":35068,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Cara Edit Website agar Konten dan Desainnya tetap Up-to-Date","rank_math_description":"Setelah website online, Anda masih perlu mengedit dan rutin mengupdatenya. Yuk, baca panduan cara edit website dengan mudah di artikel ini!","rank_math_focus_keyword":"cara edit website","footnotes":""},"categories":[4983],"tags":[],"class_list":["post-35067","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-edit-a-website","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-editar-um-site","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-modifier-un-site-internet","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-editar-una-pagina-web","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-edit-website","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/website-bearbeiten","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/come-modificare-un-sito-web","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-edit-a-website","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-edit-a-website","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-edit-a-website","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-editar-una-pagina-web","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-editar-una-pagina-web","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-editar-una-pagina-web","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-editar-um-site","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-edit-a-website","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-edit-a-website","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-edit-a-website","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-edit-a-website","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/35067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=35067"}],"version-history":[{"count":30,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/35067\/revisions"}],"predecessor-version":[{"id":47094,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/35067\/revisions\/47094"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media\/35068"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=35067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=35067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=35067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}