Cara Mengganti Bilah Menu Utama dengan Modul Menu Fullwidth Divi

Bilah menu utama membuat navigasi pengunjung menjadi mulus. Terlepas dari bilah menu utama default yang biasa kami gunakan di WordPress, Anda mungkin menemukan Modul Menu Lebar Penuh yang juga ditawarkan Divi. Biasanya, ini digunakan untuk menampilkan menu lain di situs web Anda yang berbeda dari menu utama yang Anda miliki di bagian atas setiap halaman.

Tetapi Anda juga dapat dengan mudah menggunakan Modul Menu Fullwidth untuk menggantikan bilah menu utama Anda. Ini memberi Anda kebebasan untuk menempatkan menu di mana pun Anda inginkan pada halaman tanpa berurusan dengan menu duplikat di bagian atas halaman Anda. Anda juga dapat menggunakan opsi bawaan Divi untuk menata menu seperti yang Anda inginkan, yang berarti Anda dapat membuat hasil yang menakjubkan menggunakan opsi perbatasan dan pembagi, misalnya.

Dalam tutorial ini, kami akan menunjukkan cara mengganti bilah menu utama Anda dengan Modul Menu Lebar Penuh menggunakan Paket Tata Letak Tukang Kayu Divi. Ini adalah bagian dari inisiatif desain Divi kami yang sedang berlangsung. Anda dapat memilih apakah Anda ingin membuat metode ini berlaku untuk semua halaman atau hanya beberapa halaman saja. Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke dalam tutorial kasus penggunaan, mari kita lihat sekilas hasil akhirnya pada ukuran layar yang berbeda.

Nonaktifkan Bilah Navigasi Tetap

Buka Opsi Tema Divi

Hal pertama yang perlu kita lakukan adalah menonaktifkan opsi navigasi tetap di opsi tema Divi. Kami melakukan ini untuk menghilangkan ruang menu utama di bagian atas halaman kami. Untuk melakukannya, buka Dasbor WordPress > Divi > Opsi Tema.

Nonaktifkan Bilah Navigasi Tetap

Buka tab umum dan nonaktifkan opsi Bilah Navigasi Tetap.

Buat Menu Utama

Buka Menu

Hal berikutnya yang akan kita lakukan adalah membuat menu utama kita. Kami akan menggunakan menu utama ini untuk Bilah Menu Utama default di bagian atas dan Modul Menu Lebar Penuh. Untuk menambahkan menu Anda, buka Dasbor WordPress > Tampilan > Menu.

Tambahkan Menu Utama Baru

Tambahkan menu baru, beri nama menu Anda dan jadikan Menu Utama Anda.

Tambahkan Halaman & Simpan Menu

Last but not least, tambahkan semua halaman Anda dan simpan menu Anda.

Bilah Menu Utama Gaya di Penyesuai Tema

Buka Penyesuai Tema

Bergantung pada apakah Anda ingin menyembunyikan bilah menu utama default di semua halaman atau tidak, Anda mungkin ingin menata bilah Menu Utama default terlebih dahulu. Anda hanya perlu melakukan ini jika Anda berencana menggunakannya di beberapa halaman. Jika Anda ingin menghapus Bilah Menu Utama di mana saja, Anda dapat melewati langkah ini.

Pengaturan Bilah Menu Utama

Untuk mencocokkan paket tata letak, kami telah menerapkan perubahan berikut:

• Gaya Font: Tebal & Huruf Besar
• Warna Teks: #FFFFFF
• Warna Tautan Aktif: #FFFFFF
• Warna Latar Belakang: #f25b3a
• Warna Latar Menu Dropdown: #f25b3a

Sembunyikan Bilah Menu Utama

Satu halaman

Buka Halaman Pilihan & Aktifkan Pembuat Visual

Untuk menyembunyikan Bilah Menu Utama di bagian atas halaman kita, kita perlu menggunakan sedikit kode CSS. Perhatikan bahwa penting untuk menonaktifkan opsi Bilah Navigasi Tetap (salah satu langkah sebelumnya). Jika tidak, ruang yang digunakan oleh Bilah Menu Utama akan menjadi putih dan tidak sepenuhnya hilang. Jika Anda akan menyembunyikan Bilah Menu Utama pada satu halaman, khususnya, buka halaman itu dan aktifkan Visual Builder.

Buka Pengaturan Halaman

Buka pengaturan halaman berikutnya dengan mengklik ikon berikut di bagian bawah halaman Anda:

Tambahkan Kode CSS

Beralih ke tab Advanced dan tambahkan kode CSS berikut ke kotak Custom CSS:

#main-header {
display: none;
}

Seluruh Situs Web

Buka Opsi Tema Divi

Jika Anda ingin menyingkirkan Bilah Menu Utama di seluruh situs web Anda, Anda juga dapat melakukannya. Anda tidak perlu menambahkan kode ke setiap halaman secara manual. Sebagai gantinya, Anda bisa pergi ke Dasbor WordPress> Divi> Opsi Tema.

Tambahkan Kode CSS

Lanjutkan dengan menggulir ke bawah hingga Anda menemukan kotak Custom CSS dan tambahkan kode CSS yang sama di sana:

#main-header {
display: none;
}

Tambahkan Bilah Menu Utama ke Halaman

Buka Halaman Arahan dengan Visual Builder

Sekarang kita menyembunyikan Bilah Menu Utama, kita dapat mulai menambahkan Modul Menu Lebar Penuh ke halaman kita. Untuk melakukannya, buka halaman arahan Anda, misalnya, dan aktifkan Visual Builder.

Tambahkan Bagian Lebar Penuh

Lanjutkan dengan menambahkan bagian Fullwidth tepat di bawah bagian pahlawan Anda.

Batas Atas

Anda dapat menggunakan semua opsi bawaan Divi untuk membuat desain yang Anda inginkan. Kami akan menjaganya agar tetap bersih. Satu-satunya hal yang akan kami tambahkan ke opsi bagian kami adalah batas atas:

• Lebar Batas Atas: 7px
• Warna Batas Atas: #f25b3a

Tambahkan Modul Menu Lebar Penuh

Selanjutnya, tambahkan Modul Menu Fullwidth ke bagian Anda.

Pilih Menu Utama

Pilih menu utama Anda sebagai menu yang ingin Anda tampilkan.

Warna latar belakang

Lanjutkan dengan memberi modul Anda warna latar belakang hitam.

Pengaturan Tautan

Kemudian, buka pengaturan Tautan dan terapkan perubahan berikut:

• Warna Tautan Aktif: #FFFFFF
• Warna Teks Menu Dropdown: #FFFFFF
• Warna Teks Menu Seluler: #FFFFFF
• Orientasi Teks: Kiri
• Warna Teks: Cahaya

Pengaturan Menu Dropdown

Ubah pengaturan Menu Dropdown selanjutnya:

• Warna Latar Menu Dropdown: #000000
• Warna Garis Menu Dropdown: #000000
• Warna Latar Menu Seluler: #000000

Pengaturan Teks Menu

Terakhir, kita akan membuat pengaturan teks sesuai dengan paket tata letak:

• Berat Font Menu: Sangat Tebal
• Gaya Font Menu: Huruf Besar

Jadikan Bagian Lebar Penuh Global & Gunakan di Halaman Lain Juga

Simpan sebagai Bagian Global

Kami selesai membuat menu utama baru kami! Jika Anda berencana menggunakannya di halaman lain juga, lanjutkan dan tambahkan ke Perpustakaan Divi Anda sebagai item global.

Tambahkan ke Halaman Lain Tanpa Bilah Menu Utama

Anda sekarang dapat dengan mudah menambahkan Menu Lebar Penuh ini ke halaman lain. Anda dapat memilih posisinya dan Anda bebas bermain-main dengan opsi desain bawaan yang menyertainya!

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Pikiran Akhir

Dalam posting blog kasus penggunaan ini, kami telah menunjukkan kepada Anda cara mengganti Bilah Menu Utama di bagian atas halaman Anda dengan Modul Menu Lebar Penuh. Menerapkan metode ini memberi Anda kebebasan untuk dapat menempatkan menu Anda di mana pun Anda inginkan di halaman Anda. Selain itu, Anda juga dapat menggunakan opsi bawaan Divi untuk menatanya. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah.