{"id":111,"date":"2023-05-22T13:29:33","date_gmt":"2023-05-22T13:29:33","guid":{"rendered":"https:\/\/blog.hostinger.io\/id\/support\/2023\/05\/22\/6475658-hostinger-website-builder-cara-edit-website-versi-mobile\/"},"modified":"2026-05-09T09:43:00","modified_gmt":"2026-05-09T09:43:00","slug":"6475658-hostinger-website-builder-cara-edit-website-versi-mobile","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/id\/support\/6475658-hostinger-website-builder-cara-edit-website-versi-mobile\/","title":{"rendered":"Hostinger Website Builder: Cara Edit Website Versi Mobile"},"content":{"rendered":"<p class=\"no-margin\">Secara default, <b>website versi mobile akan menampilkan elemen website sesuai urutan di versi desktop. <\/b> Jika tampilan elemen di versi destop diubah, perubahan tersebut tidak akan diterapkan secara otomatis di versi mobile. Anda bisa mengatur tampilan elemen di website versi mobile secara manual. Dengan begitu, tampilan elemen desktop dan mobile akan berbeda.<\/p><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Untuk tampilan terbaik, hindari memindahkan elemen antar bagian, atau periksa kembali kedua versi setelah memindahkan elemen. Setiap perubahan akan memengaruhi versi mobile dan desktop serta bisa merusak layout website Anda. Sebaiknya pindahkan elemen di bagian yang sama.&#128161;<\/p>\n<\/div><h2 id=\"h_dc5b18ab2a\">Menggunakan Mobile Editor<\/h2><p class=\"no-margin\">Klik ikon <b>desktop <\/b>dan <b>seluler <\/b>di toolbar bagian atas:<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/d82d96de-ba8c-44eb-9b11-96645b20f4ed.jpg\" data-media-id=\"1289\" alt=\"Ikon tampilan desktop dan mobile di Hostinger Website Builder\"><\/div><h2 id=\"h_1b15a77a38\">Mengurutkan Elemen<\/h2><p class=\"no-margin\">Untuk mengatur elemen, klik versi mobile dan geser elemen sesuai keinginan:<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2025\/08\/sortelement.gif\" data-media-id=\"2992\" alt=\"Editor situs portofolio, tombol Add Section disorot di tengah atas\"><\/div><h2 id=\"h_88d0edaba6\">Mengubah Ukuran Elemen<\/h2><p class=\"no-margin\">Masuk ke versi mobile, klik gambar, lalu tarik garis tepi gambar untuk mengatur ukuran elemen:<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2025\/08\/resizeelement.gif\" data-media-id=\"2989\" alt=\"Editor situs portfolio Jamie Maislinger dengan foto snowboarder di kanan atas terlihat fokus\"><\/div><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Artikel terkait: <b><a class=\"intercom-content-link\" href=\"https:\/\/support.hostinger.com\/en\/articles\/6491230-website-builder-how-to-resize-elements-and-sections\" target=\"_blank\" rel=\"noopener\">Website builder: cara mengubah ukuran elemen dan bagian website<\/a><\/b><\/p>\n<\/div><h2 id=\"h_ef15e0d69c\">Mengubah Ukuran Teks<\/h2><p class=\"no-margin\">Ada dua cara mengubah ukuran teks:<\/p><ul>\n<li>\n<p class=\"no-margin\">Global (secara menyeluruh): style yang dipilih <b>memengaruhi semua teks <\/b>di seluruh tampilan website versi mobile (mis., semua teks yang ditulis dengan Heading 1)<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Lokal (per elemen): <b>hanya memengaruhi elemen teks yang dipilih<\/b><\/p>\n<\/li>\n<\/ul><p class=\"no-margin\">Untuk mengubah semua style teks di versi mobile, klik versi mobile, pilih <b><a class=\"intercom-content-link\" href=\"https:\/\/support.hostinger.com\/en\/articles\/6463286-website-builder-how-to-change-text-style\" target=\"_blank\" rel=\"noopener\">menu Style website<\/a>, <\/b>lalu pilih style teks yang diinginkan<b>:<\/b><\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2025\/08\/resizetext.gif\" data-media-id=\"2990\" alt='Editor situs dengan bagian teks \"JAMIE MAISLINGER PHOTOGRAPHY\" dan foto selancar salju di kanan atas'><\/div><p class=\"no-margin\">Untuk mengubah ukuran teks, masuk ke versi mobile, klik elemen teks yang diinginkan, lalu ubah ukuran font:<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/1d9e4954-6167-4f9a-a4db-a8cb556095d3.gif\" alt=\"Hostinger Website Builder editor dengan judul besar &ldquo;Jamie Maislinger Photography&rdquo; dan foto selancar musim dingin\" data-media-id=\"1291\"><\/div><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Berikut ini ukuran teks untuk desktop dan mobile:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\"><b>Ukuran font<\/b>; mis., desktop: 20 PX, seluler: 18 PX<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Text alignment<\/b>; mis., desktop: kiri, seluler: tengah<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Tinggi garis<\/b>; mis., desktop: 2, seluler: 1,5<\/p>\n<\/li>\n<\/ul>\n<\/div><p class=\"no-margin\">Setiap perubahan yang Anda buat, seperti jenis font (tebal, miring, garis bawah, dll.) akan ditampilkan di versi mobile dan desktop. Begitu pun jika Anda mengubah seluruh style teks, sebagai contoh, Anda menggunakan Heading 2 di versi seluler dan Heading 1 di versi dekstop maka teks elemen di desktop akan secara otomatis diubah ke Heading 2.<\/p><p class=\"no-margin\">Anda bisa <b>menduplikasi <\/b>elemen atau bagian, dan <b>membuat satu versi terlihat di desktop dan versi lainnya terlihat di versi mobile<\/b> Dengan cara ini, Anda bisa lebih leluasa menata konten di desktop dan mobile secara terpisah karena beberapa pengaturan (misalnya, style teks) akan ditampilkan di semua versi website. Pelajari lebih lanjut: <b><a class=\"intercom-content-link\" href=\"https:\/\/support.hostinger.com\/en\/articles\/6721428-website-builder-how-to-hide-elements-and-sections\" target=\"_blank\" rel=\"noopener\">Cara menyembunyikan elemen dan bagian<\/a>.<\/b><\/p><h2 id=\"h_55f00503e0\">Mengubah Posisi Menu<\/h2><p class=\"no-margin\">Untuk mengubah posisi menu, masuk ke versi mobile, klik bagian header, lalu buka <b>pengaturan<\/b>:<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/19af0802-0d5a-40d9-8096-a3eb10e337ea.jpg\" data-media-id=\"1292\" alt=\"Hostinger Website Builder: ikon roda gigi Header disorot pada mode mobile.\"><\/div><p class=\"no-margin\">Di bagian<b> layout, <\/b>ubah posisi menu:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/6c03b85e-2138-4168-857d-833738c9cbc1.jpg\" alt=\"Hostinger Website Builder: pengaturan Header, opsi Menu position disorot\" data-media-id=\"1293\"><\/div><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Jika Anda tidak bisa melihat bagian header, kemungkinan besar semua <b><a class=\"intercom-content-link\" href=\"https:\/\/support.hostinger.com\/en\/articles\/6456821-website-builder-how-to-hide-a-page-from-the-website-s-navigation-menu\" target=\"_blank\" rel=\"noopener\">halaman website Anda tersembunyi dari menu navigasi<\/a>&#128161;<\/b><\/p>\n<\/div><h2 id=\"h_9ceccd4e37\">Mengubah Posisi Logo<\/h2><p class=\"no-margin\">Untuk mengubah posisi logo, masuk ke versi mobile, klik bagian <b>header<\/b>, lalu pilih <b>Ubah logo<\/b>:<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/764ee98e-15d9-4b0d-bd39-69644d73c4eb.jpg\" data-media-id=\"1294\" alt=\"Hostinger Website Builder: tombol Ubah logo pada header versi mobile\"><\/div><p class=\"no-margin\">Di tab <b>Logo, <\/b>ubah posisi logo:<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/05\/de1d33ed-9094-4b82-b5ad-008bed436fd4.jpg\" alt=\"Hostinger Website Builder: pengaturan posisi logo di header untuk tampilan mobile\" data-media-id=\"1295\"><\/div><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Jika Anda tidak dapat melihat bagian header, kemungkinan besar semua <b><a class=\"intercom-content-link\" href=\"https:\/\/support.hostinger.com\/en\/articles\/6456821-website-builder-how-to-hide-a-page-from-the-website-s-navigation-menu\" target=\"_blank\" rel=\"noopener\">halaman website Anda tersembunyi dari menu navigasi<\/a>&#128161;<\/b><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Edit website versi mobile dan desktop secara terpisah untuk tampilan website yang optimal<\/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":[256],"tags":[],"class_list":["post-111","post","type-post","status-publish","format-standard","hentry","category-desain"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6475658-hostinger-website-builder-how-to-edit-the-mobile-version-of-a-website\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6475658-hostinger-creador-de-sitios-web-como-editar-la-version-movil-de-un-sitio-web\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6475658-createur-de-sites-web-comment-modifier-la-version-mobile-d-un-site-web-chez-hostinger\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/6475658-hostinger-website-builder-cara-edit-website-versi-mobile\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6475658-hostinger-svetainiu-kurimo-irankis-kaip-redaguoti-mobiliaja-svetaines-versija\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6475658-hostinger-criador-de-sites-como-editar-a-versao-movel-do-seu-site\/","default":0},{"locale":"uk-UA","link":"https:\/\/www.hostinger.com\/ua\/support\/6475658-hostinger----\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/posts\/111","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=111"}],"version-history":[{"count":2,"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/posts\/111\/revisions"}],"predecessor-version":[{"id":2993,"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/posts\/111\/revisions\/2993"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/media?parent=111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/categories?post=111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/support\/wp-json\/wp\/v2\/tags?post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}