Mengedit versi perangkat seluler

Situs WordPress menggunakan desain responsif. Artinya, tidak ada versi seluler tersendiri yang perlu diedit. Dalam panduan ini, Anda akan belajar cara mengatur tampilan konten di perangkat seluler menggunakan pengaturan blok dan CSS.

Blok Navigasi menyediakan pengaturan untuk tombol menu perangkat seluler (dikenal sebagai ikon “hamburger”). Untuk menyesuaikan menu di perangkat seluler:

1. Buka Tampilan → Editor dari dasbor situs.
2. Pilih templat atau bagian templat yang berisi menu navigasi.
3. Buka Tampilan Daftar dan pilih blok Navigasi.
4. Pada bilah sisi pengaturan blok, klik ikon pengaturan (ikon roda gigi).

5. Di bagian Tampilan:
   • Nyalakan atau matikan “Tampilkan tombol ikon” untuk menggunakan ikon hamburger atau menampilkan teks “Menu”.
   • Pilih gaya ikon (dua atau tiga baris) dan pilih kapan ikon hamburger muncul dengan pengaturan Menu Overlay .

Baca selengkapnya tentang mengedit gaya situs.

Sejumlah blok tata letak memungkinkan Anda menentukan apakah konten akan ditumpuk secara vertikal pada layar perangkat seluler. Secara default, WordPress secara otomatis menumpuk konten yang bersebelahan agar lebih mudah dibaca di layar kecil.

Untuk mengatur perilaku penumpukan, ikuti langkah-langkah berikut:

1. Buka Tampilan → Editor dari dasbor situs.
2. Sunting halaman atau templat yang berisi blok yang ingin disesuaikan.
3. Buka Tampilan Daftar dan pilih blok.
4. Di pengaturan blok, aktifkan atau nonaktifkan “Tumpuk di perangkat seluler“.

Blok dengan pengaturan “Tumpuk di perangkat seluler”:

• Kolom
• Media & Teks
• Pos Instagram Terbaru

Tombol dan menu akan lebih mudah dibaca di perangkat seluler jika tersusun dalam beberapa baris, daripada dipaksakan berjejal dalam satu baris. Secara default, pengaturan untuk menata diri menjadi beberapa baris dimatikan.

Untuk mengaktifkan penataan ini, ikuti langkah-langkah berikut:

1. Buka Tampilan → Editor dari dasbor situs.
2. Sunting halaman atau templat yang berisi blok yang ingin disesuaikan.
3. Buka Tampilan Daftar dan pilih blok.
4. Di pengaturan blok, aktifkan “Izinkan penataan diri menjadi beberapa baris“.

Blok dengan pengaturan “Izinkan penataan diri menjadi beberapa baris”:

• Tombol
• Tombol Berbagi
• Navigasi
• Ikon Media Sosial
• Komentar
• Baris dan Tumpukan

Teks dalam ukuran piksel (px) tetap terkunci pada satu ukuran. Teks dalam ukuran em atau rem akan menyesuaikan diri berdasarkan pengaturan dan ukuran layar pengunjung, sehingga situs Anda mudah diakses dan dibaca di beragam perangkat.

Untuk mengubah ukuran teks dari piksel menjadi satuan relatif, ikuti langkah-langkah berikut:

1. Klik blok berisi teks yang ingin diubah ukurannya.
2. Di pengaturan blok, cari bagian Tipografi.
3. Di bawah Ukuran font, klik ikon ukuran khusus (dua baris horizontal dengan titik).
4. Klik satuan px untuk mengubahnya menjadi em atau rem.
5. Masukkan nilai dalam angka sesuai kebutuhan.

Memilih antara em dan rem:

• em — Ukuran teks akan menyesuaikan diri relatif terhadap kontainernya (cocok untuk keterangan, label, atau teks di dalam blok tertentu)
• rem — Ukuran teks tetap sama di seluruh bagian situs (cocok untuk teks isi, judul, dan tombol)

Anda juga dapat menyesuaikan ukuran font di seluruh bagian situs secara massal daripada menyesuaikan di blok satu per satu.

Bagian panduan ini berlaku untuk situs yang menggunakan paket WordPress.com Premium, Bisnis, dan Commerce kami, serta paket Pro lawas. Untuk situs yang menggunakan paket Gratis atau Personal, upgrade paket Anda untuk mengakses fitur ini.

Anda dapat menyembunyikan blok tertentu pada desktop atau perangkat seluler menggunakan kelas CSS. Untuk melakukannya, ikuti langkah-langkah berikut:

1. Edit halaman, pos, atau templat berisi blok yang ingin disembunyikan.
2. Pilih blok dengan mengkliknya atau memilihnya dari Tampilan Daftar.
3. Di pengaturan blok, klik Lanjutan.
4. Di kotak “Kelas CSS tambahan“, masukkan hide-desktop atau hide-mobile:

5. Buka pengaturan CSS khusus situs:
   • Tema blok: Tampilan → Editor → Gaya → ⋮ → CSS Tambahan
   • Tema klasik: Tampilan → Sesuaikan → CSS Tambahan
6. Tempel kode berikut dan klik Simpan:

/* hide elements on mobile*/
@media (max-width: 768px) {
 .hide-mobile { display: none !important; }
}
/* hide elements on desktop*/
@media (min-width: 769px) {
 .hide-desktop { display: none !important; }
}

Tambahkan kode CSS ke situs Anda satu kali saja. Setelah itu, Anda dapat menambahkan kelas hide-mobile atau hide-desktop ke blok apa pun, dan CSS akan otomatis menyembunyikannya di perangkat yang ditentukan.