Dalam tutorial ini, kami akan menunjukkan cara membuat tombol menu drop-down menggunakan modul menu lebar penuh Divi. Untuk melakukan ini, pertama-tama kita akan membuat menu di WordPress. Kami kemudian akan menggunakan modul menu lebar penuh Divi untuk menampilkan menu ini dengan gaya khusus menggunakan pembuat Divi dan sedikit CSS khusus. Hasilnya adalah tombol menu drop-down yang praktis dan bergaya.
Mari kita mulai.
penelitian
Berikut ini ikhtisar tombol menu tarik-turun yang akan kami integrasikan ke dalam tutorial ini.
Apa yang Anda butuhkan untuk memulai
Untuk memulai, jika Anda belum melakukannya, instal dan aktifkan Tema Divi diinstal (atau plugin Divi Builder jika Anda tidak menggunakan Tema Divi). Kami akan menggunakan pembuat Divi di awal untuk mendesain tombol menu tarik-turun.
Itu dia !
Buat menu di WordPress
Sebelum kita mulai membuat menu dropdown dengan Divi Builder, pertama-tama kita perlu membuat menu WordPress yang ingin kita gunakan untuk modul menu lebar penuh. Untuk melakukan ini, buka dasbor WordPress dan buka Appearance> Menus. Kemudian buat menu baru dengan mengklik tautan buat menu baru, masukkan nama menu dan klik tombol "Buat menu".
Untuk saat ini, Anda dapat membuat link kustom dengan "#" sebagai placeholder untuk URL bersama dengan teks link.
Susun item menu sehingga item menu tingkat atas memiliki link "Pelajari Lebih Lanjut" dengan tiga item submenu.
Setelah itu, pastikan untuk menyimpan menu.
Cara membuat tombol menu drop-down dengan modul menu full-lebar Divi
Setelah menu dibuat, kita dapat mulai mendesain tombol menu drop-down dengan Divi. Untuk memulai proyek, buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di front-end (pembangun visual).
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Buat konten palsu
Pertama, tambahkan baris dari satu kolom ke bagian standar default.
Tambahkan modul teks
Kemudian tambahkan modul teks ke baris dengan konten berikut:
Menu Divi Konten Anda ditempatkan di sini. Edit atau hapus teks ini sebaris atau di modul Pengaturan konten. Anda juga dapat mengatur gaya setiap aspek konten ini dalam pengaturan Desain modul dan bahkan menerapkan CSS khusus ke teks ini dalam modul Pengaturan lanjutan.
Kemudian perbarui parameter desain sebagai berikut:
Bagian padding
Kemudian, perbarui pengaturan bagian dengan item berikut:
- Padding: 0px ke bawah
Penspasian garis dan batas
Setelah isian bagian diperbarui, buka pengaturan garis dan berikan isian dan sedikit batas.
- Pelapis: 10vw di atas, 10vw di bawah, 5vw di kiri, 5vw di kanan, XNUMXvw di kanan
- Lebar perbatasan: 1px
Membuat tombol menu drop-down
Untuk membuat tombol menu drop down, kita akan menggunakan modul menu lebar penuh. Ini akan memungkinkan kita untuk menambahkan menu yang telah dibuat sebelumnya.
Menambahkan menu lebar penuh
Untuk membuat modul menu lebar penuh, tambahkan bagian lebar penuh baru di bawah bagian standar saat ini.
Kemudian tambahkan modul menu lebar-penuh ke baris.
Di jendela pop-up pengaturan menu lebar penuh (di bawah Konten), gunakan menu drop-down untuk memilih menu yang ingin Anda tampilkan. Ini harus menjadi menu yang sama yang kita buat sebelumnya bernama "menu tombol drop down".
Kemudian, hapus warna latar belakang putih default untuk menu.
Setelah Anda menambahkan menu dengan modul menu lebar-penuh, simpan pengaturan. Kami akan kembali ke modul ini sebentar lagi untuk menyelesaikan desain. Tapi untuk saat ini, kita akan menambahkan latar belakang ke bagian lebar penuh.Perbarui desain bagian lebar penuh
Buka pengaturan untuk bagian lebar penuh dan perbarui yang berikut:
- Gradien latar belakang kiri: # 0047d6
- Warna gradien latar belakang kanan: # 45b2ff
- Lebar maksimum: 240px
- Bagian Alignment: pusat
Saya mengatur lebar bagian maksimum menjadi 240px, karena ini cocok dengan lebar lebar menu dropdown default di Divi. Ini juga merupakan ukuran yang bagus untuk tombol di desktop dan seluler.
- Sudut membulat: 5px
Pada tab Advanced, tambahkan Kelas CSS, Overflow, dan Indeks Z berikut.
- Kelas CSS: tombol tarik turun
- Overflow horisontal: terlihat
- Overflow vertikal: terlihat
- Indeks Z: 14
Kelas CSS diperlukan agar kita dapat menargetkan CSS eksternal kita pada bagian ini nanti. Overflow perlu diatur ke terlihat sehingga kita bisa melihat menu drop-down. Dan indeks Z akan membantu Anda menjaga drop-down di atas semua konten lain di halaman.
Rancang menu Fulwidth
Kami sekarang siap untuk mendesain modul menu Fulwidth. Buka pengaturan modul menu lebar-penuh dan perbarui yang berikut ini:
- Buat tautan menu lebar-lebar: YES
- Warna teks tarik-turun: #ffffff
- Warna teks menu seluler: #ffffff
- Penyelarasan teks: pusat
- Warna latar belakang menu tarik-turun: # 45b2ff
- Warna dari baris menu drop-down: #ffffff
- Warna latar belakang menu: #45b2ff
- Menu Font: Encode Tanpa Semi Condensed
- Berat Menu Font: Semi Bold
- Warna teks menu: #ffffff
- Ukuran teks menu: 16px
- Penentuan jarak menu: 2px
- Animasi menu drop-down: Buka
Posisikan tombol drop-down
Agar tombol tumpang tindih dengan batas bawah, kita perlu menambahkan margin atas negatif yang persis setengah ketinggian tombol.
- Margin: -40.5px tinggi
Seperti yang Anda lihat, ruang hover belum menempati seluruh area tombol dan menu drop-down masih ada di sebelah kanan. Untuk mengatasi masalah ini, kita dapat menambahkan CSS khusus.
Menambahkan CSS khusus
Sebelum menambahkan CSS khusus, pastikan untuk menambahkan "drop down" ID CSS ke bagian lebar penuh (bukan modul).
Tanpa ID CSS, CSS di bawah ini tidak akan berfungsi.Untuk menambahkan CSS khusus, buka pengaturan halaman dan rekatkan kode berikut ke dalam kotak input CSS kustom.
.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important; }. tombol-dropdown .fullwidth-menu li> a {padding-bottom: 0px; tinggi garis: 81px; }. tombol-dropdown .fullwidth-menu seperti {padding: 6px 0px; tinggi garis: 1.6em; } .dropdown-button .et_mobile_menu li a: hover, .nav ul li a: hover, .dropdown-button .fullwidth-menu a: hover {opacity: 1; } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! important; }. tombol-dropdown .fullwidth-menu li {display: block; } .dropdown-button .fullwidth-menu .menu-item-has-children> a: first-child: after {right: 20px; }
Inilah hasil akhirnya
final pikiran
Membuat tombol menu drop-down menggunakan modul menu lebar-penuh Divi melibatkan beberapa langkah utama. Pertama kita buat menu di WordPress yang ingin kita integrasikan ke dalam modul. Kemudian kami menggunakan pembuat Divi untuk dan memberi gaya modul menu lebar penuh sesuai keinginan kami. Kemudian kami menambahkan CSS khusus untuk memoles desain di desktop dan seluler. Hasilnya adalah menu drop-down yang indah (dan berguna) yang diluncurkan untuk desktop hover dan klik seluler. Semoga ini merupakan tambahan yang berguna untuk perangkat desain Anda.