Cara Nonaktifkan Overflow di WordPress (Hapus Scroll Horizontal)

Apakah Anda ingin menonaktifkan luapan di situs web WordPress Anda?

Bilah gulir horizontal muncul saat elemen di halaman tersebut terlalu lebar untuk ditampilkan dan meluap melebihi layar. Sebagian besar tema WordPress tidak menggunakan pengguliran horizontal karena dapat merusak tata letak situs Anda dan membingungkan pengguna.

Pada artikel ini, kami akan menunjukkan kepada Anda cara mudah dan cepat untuk menonaktifkan luapan di WordPress dan menghapus bilah gulir horizontal.

Apa Penyebab Horizontal Scroll Bar atau Overflow di WordPress

Saat mengatur Anda situs WordPresspenting untuk membuatnya mudah digunakan dan dapat diakses oleh semua orang.

WordPress akan menampilkan bilah gulir horizontal jika elemen lebih lebar dari tata letak situs web Anda. Ini disebut ‘meluap.’ Memiliki bilah gulir horizontal dapat merusak desain Anda dan membuat situs web Anda kurang ramah pengguna.

Halaman web dengan bilah gulir horizontal dan vertikal dapat membingungkan pengunjung dan menjadi sulit dinavigasi. Ini dapat mengakibatkan orang meninggalkan situs Anda menyebabkan konversi dan penjualan lebih rendah.

Menonaktifkan luapan dapat bermanfaat bagi Anda karena akan membuat situs Anda lebih ramah pengguna dan intuitif.

Menonaktifkan luapan adalah proses yang sangat mudah. Dengan mengingat hal itu, mari kita lihat cara mudah menonaktifkan bilah gulir horizontal luapan di WordPress.

Metode 1: Menambahkan Cuplikan CSS menggunakan Theme Customizer

Anda dapat menonaktifkan luapan di WordPress hanya dengan menambahkan a kode CSS di opsi ‘CSS tambahan’ dari penyesuai tema.

Yang harus Anda lakukan adalah pergi ke dashboard WordPress dan klik Penampilan » Sesuaikan.

Catatan: Anda mungkin melihat Penampilan » Editor dari pada Sesuaikan. Ini berarti tema Anda menggunakan editor situs lengkap (FSE) alih-alih Penyesuai Tema, dan Anda harus membaca panduan kami di cara memperbaiki penyesuai tema yang hilang atau gunakan Metode 2 di bawah.

Setelah Anda berada di halaman Kustomisasi, klik opsi ‘CSS tambahan’, lalu cukup salin dan tempel kode berikut.

html, badan { lebar maksimal: 100%; luapan-x: tersembunyi; }

Setelah Anda menempelkan kodenya, luapan apa pun akan dihapus, dan Anda akan dapat melihatnya diterapkan di panel pratinjau langsung situs web Anda.

Jangan lupa klik tombol ‘Publikasikan’ di bagian atas halaman setelah selesai!

Metode 2: Menambahkan Cuplikan CSS Menggunakan WPCode

Anda juga dapat menambahkan CSS melalui cuplikan kode menggunakan plugin WPCode.

WPCode adalah plugin cuplikan kode paling populer, digunakan oleh lebih dari 1 juta situs web. Kami merekomendasikan metode ini karena plugin ini memudahkan untuk menambahkan kode khusus ke WordPress tanpa harus mengedit file tema Anda.

Jadi, hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan WPCode plugin di situs web Anda. Untuk detail lebih lanjut, Anda dapat melihat panduan langkah demi langkah kami di cara install plugin wordpress.

Setelah Anda mengaktifkan plugin, itu akan menambahkan item menu baru berlabel Cuplikan Kode ke bilah admin WordPress Anda. Klik itu, dan Anda akan dibawa ke halaman ‘Semua Cuplikan’.

Lanjutkan dan klik tombol ‘Tambah Baru’ untuk menambahkan kode CSS Anda.

Sekarang setelah Anda berada di halaman ‘Tambahkan Cuplikan’, Anda dapat mencari pustaka cuplikan WPCode, atau Anda dapat memulai dari awal dengan milik Anda sendiri. Itulah yang akan Anda lakukan di sini.

Cukup arahkan kursor ke ‘Tambahkan Kode Kustom Anda (Cuplikan Baru)’ dan klik ‘Gunakan Cuplikan.’

Setelah Anda berada di laman ‘Buat Cuplikan Khusus’, mulailah dengan memasukkan judul untuk cuplikan kode Anda. Ini hanya untuk Anda, dan bisa apa saja yang membantu Anda mengidentifikasi kode.

Selanjutnya, Anda harus memilih ‘Code Type’ dari menu drop-down di sebelah kanan. Perhatikan bahwa WPCode tidak menawarkan opsi untuk CSS, jadi Anda harus mengeklik opsi ‘Universal Snippet’.

Selanjutnya, yang harus Anda lakukan adalah menyalin dan menempelkan cuplikan kode CSS berikut ke dalam ‘Pratinjau Kode’.

Ini akan terlihat seperti ini setelah Anda menempelkan kode:

Setelah itu, gulir ke bawah ke bagian ‘Penyisipan’. Di sini, Anda akan menemukan dua pilihan, ‘Auto Insert’ dan ‘Shortcode.’

Anda akan memilih opsi ‘Masukkan Otomatis’ sehingga kode Anda akan dimasukkan dan dijalankan secara otomatis di situs Anda.

Namun, jika Anda hanya ingin menonaktifkan bilah gulir horizontal pada beberapa halaman tertentu, Anda dapat menggunakan opsi logika bersyarat di WPCode untuk hanya menampilkan cuplikan pada halaman tertentu.

Atau, Anda dapat menggunakan WPCode Pro versi untuk memuat cuplikan pada halaman posting tertentu menggunakan Editor Blok.

Setelah Anda memilih opsi, buka bagian atas halaman dan alihkan tombol dari ‘Nonaktif’ ke ‘Aktif’ di pojok kanan atas.

Kemudian, cukup klik tombol ‘Simpan Cuplikan’.

Itu dia! Anda baru saja menghapus scroll bar luapan horizontal di situs Anda.

Kami harap artikel ini membantu Anda mempelajari cara menonaktifkan luapan di situs WordPress Anda. Anda mungkin juga ingin melihat pilihan ahli kami plugin WordPress yang harus dimiliki untuk mengembangkan situs Andadan panduan pemula kami tentang cara membuat formulir kontak di WordPress.

Jika Anda menyukai artikel ini, silakan berlangganan ke kami Saluran Youtube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.

.

Sumber Artikel