Menggunakan Modul Menu Fullwidth Divi vs Modul Menu Reguler

Bagian yang sering diabaikan tetapi penting dari situs web apa pun adalah menu navigasi. Navigasi adalah elemen kunci dalam menciptakan pengalaman pengguna yang menyenangkan. Jika dilakukan dengan benar, menu dapat sangat meningkatkan pengalaman pengguna dan memudahkan pengunjung Anda untuk menavigasi situs web.

Divi hadir dengan 2 jenis modul navigasi yang berbeda; Menu Lebar Penuh dan Menu Reguler. Pada artikel ini, kita akan membahas dan mendemonstrasikan beberapa perbedaan antara modul menu fullwidth Divi dan modul menu biasa. Jika Anda pernah bertanya-tanya modul mana yang akan digunakan untuk situs web Anda, semoga artikel ini membantu Anda memahami perbedaan utama dan kasus penggunaan untuk modul-modul ini. Kami juga akan memberi Anda petunjuk langkah demi langkah untuk menyesuaikan desain menu lebar penuh dan modul menu biasa.

Mari kita mulai!

Sneak Peek

Desktop: Modul Menu Lebar Penuh

Desktop: Modul Menu Reguler

Seluler: Modul Menu Lebar Penuh

Seluler: Modul Menu Reguler

Perbedaan Utama Antara Modul Menu Fullwidth Divi dan Modul Menu Reguler

Berikut adalah ikhtisar perbedaan utama antara modul menu lebar penuh dan modul menu biasa.

Wadah Bagian Reguler vs Lebar Penuh

Modul menu fullwidth membutuhkan bagian fullwidth di Divi. Karena bagian ini memiliki lebar penuh, modul apa pun yang Anda tambahkan akan memenuhi seluruh lebar halaman. Tidak seperti bagian menu biasa, Anda tidak dapat memiliki beberapa modul secara berdampingan. Modul menu lebar penuh sangat bagus jika Anda ingin menu menjangkau lebar halaman dan tidak memerlukan modul tambahan di sampingnya.

Modul menu reguler membutuhkan bagian reguler di Divi. Bagian reguler memiliki banyak tata letak baris yang berbeda, dan Anda dapat menggunakan tata letak apa pun dengan modul menu biasa. Ini memungkinkan Anda untuk memasukkan konten tambahan di samping menu menggunakan baris lain untuk membuat bilah menu yang lebih kompleks. Berkat banyak opsi baris Divi, Anda dapat dengan mudah membuat tata letak unik untuk bilah menu menggunakan modul menu biasa.

Pengaturan Lebar Bawaan vs Mengedit Wadah Baris

Perbedaan utama lainnya antara menu reguler dan lebar penuh adalah bahwa mereka memiliki cara berbeda untuk mengedit lebar dan spasi modul.

Modul menu lebar penuh dilengkapi dengan beberapa pengaturan bawaan untuk mengedit lebar. Anda dapat membuat teks menu dengan lebar penuh dengan opsi "buat tautan menu dengan lebar penuh". Ini memperluas modul menu lebar penuh di luar lebar konten default.

Untuk mendapatkan tampilan serupa dengan modul menu biasa, Anda perlu mengedit pengaturan baris yang berisi. Misalnya, edit lebar, lebar maksimal, dan perataan baris yang berisi menu reguler untuk memperluas modul menu reguler di luar lebar konten default.

Menggunakan Modul Menu Fullwidth Divi vs Modul Menu Reguler

Apa yang Anda Butuhkan untuk Memulai

Jika Anda ingin mengikuti tutorial ini, instal dan aktifkan Tema Divi dan pastikan Anda memiliki Divi versi terbaru di situs web Anda.

Sekarang, Anda siap untuk memulai!

Merancang Modul Menu Fullwidth

Tambahkan halaman baru ke situs web Anda dan beri judul, lalu pilih opsi untuk Gunakan Divi Builder.

Untuk tutorial ini kita akan membangun desain dari awal, jadi pilih opsi Start Building.

Saat Anda pertama kali membuat halaman kosong, halaman itu sudah dimuat sebelumnya dengan bagian biasa. Pertama tambahkan bagian lebar penuh di bawah bagian reguler.

Kemudian, hapus bagian reguler dari halaman.

Tambahkan modul Menu Fullwidth ke baris fullwidth.

Tambahkan warna latar belakang ke menu lebar penuh.

• Latar belakang: #4e7560

Tambahkan logo ke menu lebar penuh.

Selanjutnya, navigasikan ke opsi Teks Menu di bawah tab Desain.

• Font Menu: Poppins
• Warna Teks Menu: #FFFFFF
• Ukuran Teks Menu: 20px

Selanjutnya, navigasikan ke pengaturan Menu Dropdown.

• Warna Latar Menu Dropdown: #FFFFFF
• Warna Garis Menu Dropdown: #7EAD70
• Warna Teks Menu Dropdown: #000000

Atur latar belakang Menu Seluler dan warna teks.

• Warna Latar Menu Seluler: #FFFFFF
• Warna Teks Menu Seluler: #000000

Selanjutnya, ubah pengaturan Menu Hamburger.

• Warna Ikon Menu Hamburger: #FFFFFF
• Ikon Menu Hamburger Ukuran Font: 40px

Terakhir, tambahkan beberapa bantalan atas dan bawah.

• Padding-Atas: 10px
• Padding-Bottom: 10px

Sekarang modul menu lebar penuh Anda selesai!

Merancang Modul Menu Reguler

Tambahkan halaman baru ke situs web Anda dan beri judul, lalu pilih opsi untuk Gunakan Divi Builder.

Pilih Mulai Membangun untuk membangun dari awal.

Halaman ini telah dimuat sebelumnya dengan bagian reguler yang kosong. Untuk bagian ini, tambahkan warna latar belakang.

• Latar belakang: #4e7560

Selanjutnya, lepaskan bantalan atas dan bawah.

• Padding-Atas: 0px
• Padding-Bawah: 0px

Tambahkan baris baru dengan tata letak yang ditunjukkan di bawah ini.

Dalam pengaturan baris, samakan tinggi kolom.

• Samakan Tinggi Kolom: Ya

Di pengaturan CSS Elemen Utama di bawah tab Lanjutan, tambahkan CSS khusus berikut.

 align-items:center; 

Tambahkan modul teks ke kolom paling kiri. Kami akan menggunakan ini untuk menampilkan nama situs web alih-alih mengunggah logo. Ini adalah keuntungan unik dari modul menu biasa karena Anda dapat menggunakannya bersama modul lain untuk menambahkan elemen tambahan ke bilah menu.

• Teks H1: “Blog Divi”

Atur Perataan Teks ke kiri di desktop.

• Perataan Teks-Desktop: Kiri

Atur Perataan Teks ke tengah di tablet dan seluler.

• Perataan Teks-Tablet: Tengah
• Perataan Teks-Seluler: Pusat

Selanjutnya, navigasikan ke pengaturan teks heading.

• Font Judul: Poppins
• Berat Huruf Judul: Tebal
• Warna Teks Judul: #FFFFFF
• Ukuran Teks Judul: 40px

Sekarang setelah judul “Blog Divi” selesai, mari tambahkan modul menu biasa ke kolom tengah.

Hapus warna latar belakang.

• Latar Belakang: Tidak ada

Selanjutnya, navigasikan ke tab desain. Di bawah Tata Letak, ubah gaya menjadi Terpusat.

• Gaya: Terpusat

Sekarang kita dapat memodifikasi gaya teks menu.

• Font Menu: Poppins
• Warna Teks Menu: #FFFFFF
• Ukuran Teks Menu: 20px

Ubah gaya menu dropdown juga.

• Warna Garis Menu Dropdown: #7EAD70
• Warna Teks Menu Dropdown: #000000

Selanjutnya, ubah pengaturan menu seluler.

• Warna Latar Menu Seluler: #FFFFFF
• Warna Teks Menu Seluler: #000000

Terakhir, ubah pengaturan menu hamburger.

• Warna Ikon Menu Hamburger: #FFFFFF
• Ikon Menu Hamburger Ukuran Font: 40px

Ini melengkapi penataan modul menu biasa. Untuk menyelesaikan desain menu, mari tambahkan tombol ajakan bertindak ke kolom kanan. Pertama, tambahkan modul tombol.

Ubah teks tombol.

• Tombol: “Uji Coba 30 Hari Gratis”

Atur perataan tombol ke tengah.

• Penjajaran Tombol: Tengah

Setel "Gunakan Gaya Kustom untuk Tombol" ke Ya dan ubah warna teks.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Warna Teks Tombol: #FFFFFF

Mengatur latar belakang tombol.

• Latar Belakang Tombol: #7EAD70

Atur latar belakang tombol pada hover menjadi oranye.

• Latar Belakang Tombol saat Arahkan: #D19929

Selanjutnya, atur lebar batas tombol, radius, dan font.

• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 40px
• Font Tombol: Poppins

Terakhir, atur padding kiri dan kanan.

• Padding-Kiri: 30px
• Padding-Kanan: 30px

Hasil Akhir

Sekarang mari kita lihat hasil akhir untuk modul menu kita.

Desktop: Modul Menu Lebar Penuh

Desktop: Modul Menu Reguler

Seluler: Modul Menu Lebar Penuh

Seluler: Modul Menu Reguler

Pikiran Akhir

Semoga artikel ini membantu Anda memahami beberapa perbedaan utama antara modul menu lebar penuh Divi dan modul menu biasa. Keduanya sangat mudah disesuaikan untuk membuat menu yang tampak hebat untuk situs web Anda. Modul menu fullwidth mengambil lebar halaman dan dilengkapi dengan opsi bawaan untuk memodifikasi dan mengubah lebar. Di sisi lain, modul menu biasa dapat digunakan bersama modul lain dan terdapat dalam satu baris, di mana lebar dan opsi ukuran lainnya dapat diubah. Apakah Anda menggunakan modul menu lebar penuh atau modul menu biasa di situs web Anda? Kami akan senang mendengar dari Anda di komentar!