Hostinger Website Builder: Cara Edit Website Versi Mobile

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

Diperbarui 2 minggu 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 seluler di toolbar bagian atas:

Ikon tampilan desktop dan mobile di Hostinger Website Builder

Mengurutkan Elemen

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

Editor situs portofolio, tombol Add Section disorot di tengah atas

Mengubah Ukuran Elemen

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

Editor situs portfolio Jamie Maislinger dengan foto snowboarder di kanan atas terlihat fokus

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:

Editor situs dengan bagian teks "JAMIE MAISLINGER PHOTOGRAPHY" dan foto selancar salju di kanan atas

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

Hostinger Website Builder editor dengan judul besar “Jamie Maislinger Photography” dan foto selancar musim dingin

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:

Hostinger Website Builder: ikon roda gigi Header disorot pada mode mobile.

Di bagian layout, ubah posisi menu:

Hostinger Website Builder: pengaturan Header, opsi Menu position disorot

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:

Hostinger Website Builder: tombol Ubah logo pada header versi mobile

Di tab Logo, ubah posisi logo:

Hostinger Website Builder: pengaturan posisi logo di header untuk tampilan mobile

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