Lewati ke konten utama
Semua KoleksiHostinger
Website Builder: Cara Edit Website Versi Mobile
Website Builder: Cara Edit Website Versi Mobile

Edit website versi mobile dan desktop secara terpisah untuk tampilan website yang optimal

Teresia Triutami avatar
Ditulis oleh Teresia Triutami
Diperbarui lebih dari setahun yang lalu

Secara default, website versi mobile akan menampilkan elemen website sesuai urutan di versi desktop. 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.

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.💡

Menggunakan Mobile Editor

Klik ikon desktop dan mobile di toolbar bagian atas:

Mengurutkan Elemen

Untuk mengatur elemen, klik versi mobile dan geser elemen sesuai keinginan:

Mengubah Ukuran Elemen

Masuk ke versi mobile, klik gambar, lalu tarik garis tepi gambar untuk mengatur ukuran elemen:

Mengubah Ukuran Teks

Ada dua cara mengubah ukuran teks:

  • Global (secara menyeluruh): style yang dipilih memengaruhi semua teks di seluruh tampilan website versi mobile (mis., semua teks yang ditulis dengan Heading 1)

  • Lokal (per elemen): hanya memengaruhi elemen teks yang dipilih

Untuk mengubah semua style teks di versi mobile, klik versi mobile, pilih menu Style website, lalu pilih style teks yang diinginkan:

Untuk mengubah ukuran teks, masuk ke versi mobile, klik elemen teks yang diinginkan, lalu ubah ukuran font:

Changing text size locally in Hostinger Website Builder

Berikut ini ukuran teks untuk desktop dan mobile:

  • Ukuran font; mis., desktop: 20 PX, seluler: 18 PX

  • Text alignment; mis., desktop: kiri, seluler: tengah

  • Tinggi garis; mis., desktop: 2, seluler: 1,5

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.

Anda bisa menduplikasi elemen atau bagian, dan membuat satu versi terlihat di desktop dan versi lainnya terlihat di versi mobile. 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: Cara menyembunyikan elemen dan bagian.

Mengubah Posisi Menu

Untuk mengubah posisi menu, masuk ke versi mobile, klik bagian header, lalu buka pengaturan:

Di bagian layout, ubah posisi menu:

Changing the website's logo position in Hostinger Website Builder

Jika Anda tidak bisa melihat bagian header, kemungkinan besar semua halaman website Anda tersembunyi dari menu navigasi💡

Mengubah Posisi Logo

Untuk mengubah posisi logo, masuk ke versi mobile, klik bagian header, lalu pilih Ubah logo:

Di tab Logo, ubah posisi logo:

Changing the website's menu position in Hostinger Website Builder

Jika Anda tidak dapat melihat bagian header, kemungkinan besar semua halaman website Anda tersembunyi dari menu navigasi💡

Apakah pertanyaan Anda terjawab?