Cara Menghilangkan Header WordPress di Halaman Tertentu
Cara menghilangkan header wordpress dalam halaman tertentu sebenarnya sangat mudah jika themes Anda sudah mendukung atau menyiapkan fiturnya. Sayangnya tidak semua themes memberi fitur ini, untuk itu Anda harus cari cara manual untuk melakukannya.
1 – Jika Anda Menggunakan Elementor
Jika Anda menggunakan Elementor sangat mudah;
- pada mode buat halaman / edit halaman
- klik pengaturan di kanan atas
- klik bagian pos (sebelah blok)
- klik template
- pilih Kanvas Elementor
2 – Cara Manual
Tidak semua orang menggunakan elementor, elementor walau memiliki kemudahan terkadang juga memiliki kekurangan, sementara WordPress sendiri sudah menyediakan Gutenberg yang memudakan kita membuat landing page tanpa plugin tambahan.
Ok, jika themes anda tidak support fitur “hide header” kita bisa melakukannya sendiri:
- Sebut saja domain anda “abc.com”
- kemudian anda memiliki “abc.com/halaman-landing-page”
- buka “abc.com/halaman-landing-page” dengan Chrome.
- klik Inspeksi – akan muncul development tool
- klik bagian Element
- lihat bagian atas, bagian “<body class …. ” di sana terdapat id halaman page-id-xxx, contoh “page-id-6”, catat “page-id-6” tersebut (Perhatikan GAMBAR-01)
- kemudian Gunakan inspect element dengan tombol panah, untuk mengetahui ID CSS dari header di tema kita. (Perhatikan GAMBAR-02)
- arahkan mouse pada header, klik headernya
- kemudian cek di html nya, temukan ID dari header ataupun nama CSS lainnya,, bisa header, nav, div. Pilih sesuai kebutuhan anda. Pada contoh kali ini kita temukan masthead. Catat “masthead” (Perhatikan Gambar-03)
- jadi kita sudah punya 2 hal ini
- id halaman: “page-id-6”
- id CSS: “masthead”
- maka kita buat kode ini:
- “
.page-id-66 #masthead {display: none;}” – tanpa tanda kutip ya. - sebelum page-id dikasih titik
- sebelum CSS id dikasih #.
- taruh kode ini di custom CSS ya.
- “
- Catatan:
- pada contoh di atas kita menggunakan CSS ID, selain css id kita juga bisa menyembunyikan CSS class. Jika yang disembunyikan css class maka gunakan titik, bukan pagar. contoh: “
.page-id-66 .css-clas-tertentu {display: none;}“
- pada contoh di atas kita menggunakan CSS ID, selain css id kita juga bisa menyembunyikan CSS class. Jika yang disembunyikan css class maka gunakan titik, bukan pagar. contoh: “
