3 menit
Ketika mendesain suatu halaman website, kamu harus membuatnya menjadi responsive supaya halaman tersebut dapat diakses dengan baik ketika menggunakan Laptop/PC, tablet, maupun handphone.
Dari salah satu metode responsive tersebut, mungkin kamu perlu menyembunyikan block Elementor di tampilan mobile, kemudian menampilkannya di tampilan Desktop dan tablet, atau bisa juga menampilkan block tersebut di tampilan mobile, namun tidak ditampilkan ketika diakses menggunakan desktop dan tablet.
Dalam artikel ini, kita akan membahas cara menyembunyikan block Elementor di tampilan mobile dengan mudah, bahkan tanpa harus menggunakan Elementor Pro.
Cara Menyembunyikan Block Elementor di Tampilan Mobile
Sebenarnya cara ini bisa juga digunakan untuk menyembunyikan block elementor di tampilan desktop dan menampilkannya di tampilan mobile dan kamu bisa menentukan block mana yang akan ditampilkan.
1. Edit atau Buat Halaman
Hal pertama yang perlu kamu lakukan tentunya mengedit atau menambahkan halaman baru yang akan kamu buat desainnya.
Untuk menambahkan halaman baru, maka kamu bisa membuka halaman Post atau Pages, kemudian klik opsi add new post atau add new page.
2. Edit Dengan Elementor
Setelah menambahkan halaman baru atau mengedit halaman yang sudah ada, kamu akan menemukan opsi atau tombol untuk mengedit halaman dengan Elementor. Klik saja tombol tersebut untuk mulai menggunakan Elementor.
3. Tentukan Elemen Yang Akan Disembunyikan
Anggap saja disini kamu sudah membuat desain dengan berbagai Elemen, dan sekarang kamu tinggal menentukan elemen mana yang akan disembunyikan.
Untuk Elemen ini, pastikan bahwa kamu memilih elemen mana yang akan kamu sembunyikan dari halaman mobile.
Misalnya ketika kamu memilih untuk mengedit satu elemen utama diatas dan menyembunyikannya, maka block Research, Ideas, Pixel Perfect, SEO Friendly, Design, dan Support akan disembunyikan.
Namun jika kamu memilih elemen seperti dibawah ini, maka kamu hanya akan menyembunyikan block Pixel Perfect saja.
Tips: Gunakan fitur navigator untuk memilih elemen dengan cepat dan lebih akurat.
4. Sembunyikan Block Dari Tampilan Mobile
Dalam contoh ini, kita akan menyembunyikan elemen utama dengan block Research, Ideas, Pixel Perfect, SEO Friendly, Design, dan Support didalamnya, sehingga ketika diakses dengan mobile, maka block tersebut tidak akan ditampilkan.
Untuk melakukan ini, kamu bisa klik pada Elemen Utama, dan nantinya judul pada Sidebar menjadi Edit Section
Setelah panel yang ada disebelah kiri menampilkan Edit Section, klik pada tab Advanced dan cari opsi Responsive.
Sekarang disini kamu bisa memilih untuk menampilkan atau menyembunyikan gambar ketika diakses menggunakan Desktop, tablet, ataupun Mobile.
Apabila kamu ingin menyembunyikan block di tampilan mobile, maka kamu bisa klik toggle Show/Hide dan ketika toggle berwarna ungu, atau lingkaran berada di kanan, maka block akan disembunyikan pada tampilan dengan device tersebut.
5. Preview Halaman
Sekarang karena kamu sudah menentukan responsiveness pada block tersebut, maka kamu bisa melakukan preview halamannya. Apabila berhasil, maka tampilannya akan menjadi seperti ini:
Begitulah cara mudah untuk menyembunyikan block Elementor di tampilan mobile dan menampilkannya di desktop, tanpa kamu harus membuat halaman yang berbeda untuk mobile dan desktop.
Terima kasih telah berkunjung ke WPGan.com. Dapatkan saldo $100 di Vultr gratis dan deploy servermu sendiri melalui [Halaman Ini]