Cara Membuat Menu Bersarang Runtuh Seluler dengan Pembuat Tema Divi

Beberapa waktu lalu, kami membagikan peretasan menu seluler yang membantu Anda membuat menu bersarang yang runtuh. Kami tahu banyak dari Anda telah menggunakannya, tetapi dengan Divi Theme Builder baru, pendekatannya menjadi sedikit berbeda. Dalam tutorial hari ini, kami akan menunjukkan cara menerapkan efek runtuh seluler ke Modul Menu di dalam Divi Theme Builder. Ada tiga bagian utama dari tutorial ini:

• Menyiapkan menu Anda dan menetapkan kelas yang benar untuk item menu Anda
• Membangun menu Anda menggunakan Pembuat Tema dan Modul Menu
• Menambahkan kode khusus di dalam Pembuat Tema

Anda juga dapat mengunduh file template JSON secara gratis! Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Seluler

Desktop

Unduh Desain Header Global GRATIS

Penting: setelah mengunduh dan mengunggah file JSON ke pembuat tema Anda, Anda masih perlu mengatur menu Anda secara manual dengan kelas CSS yang benar + menambahkan Modul Kode dengan kode CSS dan JQuery (langkah 1 dan 3 dari posting ini) .

Untuk mendapatkan menu bersarang yang runtuh secara gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Berlangganan Saluran Youtube Kami

1. Siapkan Menu Anda

Tambahkan Item Menu & Item Sub Menu

Hal pertama yang perlu Anda lakukan adalah membuat menu Anda. Tambahkan sub item pilihan Anda.

Tambahkan Opsi Kelas CSS

Setelah Anda menambahkan item menu, Anda dapat mengaktifkan opsi kelas CSS dengan mengklik 'Opsi Layar' dan mengaktifkan 'Kelas CSS'.

Tambahkan Kelas CSS ke Item Menu Tingkat Pertama yang Mengandung Item Sub Menu

Lanjutkan dengan menambahkan kelas CSS ke item menu tingkat pertama yang berisi item sub menu. Dalam contoh ini, itu berarti menambahkan kelas CSS ke item menu 'Layanan' dan 'Portofolio'.

• Kelas CSS: tingkat pertama

Tambahkan Kelas CSS ke Item Menu Tingkat Kedua & Menu Simpan

Kemudian, tetapkan kelas CSS yang berbeda ke item menu tingkat kedua di menu Anda. Pastikan Anda menambahkan kelas CSS ini ke item menu level kedua saja (jika Anda menambahkan lebih banyak level). Nanti di tutorial ini, kita akan menggunakan kelas CSS ini dan yang telah kita tetapkan ke item menu tingkat pertama untuk membuat menu bersarang yang runtuh.

• Kelas CSS: tingkat kedua

2. Buka Divi Theme Builder & Mulai Buat Header Global

Pergi ke Divi Theme Builder

Bagian selanjutnya dari tutorial ini berfokus pada pembuatan desain header. Jika Anda ingin menerapkan teknik bersarang ke header yang telah Anda buat (menggunakan Modul Menu), Anda dapat melewati langkah ini dan pergi ke bagian terakhir tutorial. Jika Anda ingin membuat ulang desain, ikuti terus langkah-langkahnya. Buka Pembuat Tema Divi.

Mulai Membangun Header Global

Mulai buat tajuk global Anda berikutnya.

Pengaturan Bagian

Jarak

Di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan hapus semua padding atas dan bawah default.

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

Indeks Z

Tingkatkan indeks z bagian juga.

• Indeks Z: 99999

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

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

Elemen Utama

Pastikan semua modul muncul bersebelahan pada ukuran layar yang lebih kecil dengan menambahkan satu baris kode CSS ke elemen utama baris juga.

display: flex;

kolom 1

Jarak

Kemudian, buka pengaturan kolom 1 dan tambahkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 20px
• Padding Bawah: 20px

Berbatasan

Tambahkan beberapa radius perbatasan juga.

• Kanan Atas: 100px
• Kanan Bawah: 100px

Bayangan Kotak

Dan selesaikan pengaturan kolom 1 dengan menambahkan bayangan kotak halus.

• Posisi Horizontal Bayangan Kotak: 20px
• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.15)

Kolom 2

Jarak

Buka pengaturan kolom kedua berikutnya dan tambahkan beberapa padding atas dan bawah.

• Padding Atas: 20px
• Padding Bawah: 20px

Kolom 3

Latar Belakang Gradien

Ke kolom berikutnya dan terakhir. Tambahkan latar belakang gradien.

• Warna 1: #26c699
• Warna 2: #abe02f
• Arah Gradien: 116deg

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus berikutnya.

• Padding Atas: 20px
• Padding Bawah: 20px

Berbatasan

Kemudian, buka pengaturan perbatasan dan buat perubahan berikut:

• Kiri Atas: 100px
• Kiri Bawah: 100px

Bayangan Kotak

Selesaikan pengaturan kolom dengan menambahkan bayangan kotak.

• Posisi Horizontal Bayangan Kotak: -26px
• Posisi Vertikal Bayangan Kotak: 0px
• Warna Bayangan: #d2ff0c

Tambahkan Modul Gambar ke Kolom 1

Unggah Logo

Saatnya menambahkan modul, dimulai dengan Modul Gambar di kolom 1. Unggah logo Anda.

Penyelarasan

Ubah perataan gambar modul berikutnya.

• Penjajaran Gambar: Tengah

Perekat

Selesaikan pengaturan modul dengan mengubah lebar di berbagai ukuran layar.

• Lebar: 120px (Desktop), 80px (Tablet & Ponsel)

Tambahkan Modul Menu ke Kolom 2

Pilih Menu

Di kolom 2, satu-satunya modul yang kita butuhkan adalah Modul Menu. Pilih menu yang telah Anda buat di bagian pertama tutorial ini.

Hapus Warna Latar Belakang

Hapus warna latar belakang modul berikutnya.

Tata Letak

Kemudian, ubah pengaturan tata letak.

• Gaya: Terpusat
• Arah Menu Dropdown: Ke Bawah

Teks Menu

Gaya teks menu juga.

• Font Menu: Montserrat
• Berat Font Menu: Sedang
• Warna Teks Menu: #000000
• Ukuran Teks Menu: 13px
• Spasi Huruf Menu: 1px

Menu drop down

Lanjutkan dengan mengubah beberapa warna di pengaturan menu dropdown.

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

Ikon

Dan selesaikan pengaturan modul dengan mengubah warna ikon menu hamburger di pengaturan ikon.

• Warna Ikon Menu Hamburger: #000000

Tambahkan Modul Teks ke Kolom 3

Tambah isi

Ke modul berikutnya dan terakhir, yaitu Modul Teks di kolom 3. Tambahkan beberapa salinan pilihan Anda.

Tambahkan Tautan

Tambahkan tautan ke modul berikutnya.

• URL Tautan Modul: #

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Montserrat
• Berat Font Teks: Semi Tebal
• Warna Teks: #ffffff
• Ukuran Teks: 16px
• Tinggi Baris Teks: 1em
• Perataan Teks: Tengah

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa margin atas.

• Margin Atas: 10px

3. Tambahkan Fungsionalitas ke Menu Menggunakan Modul Kode

Tambahkan Modul Kode ke Kolom 2

Setelah Anda menyelesaikan desain tajuk, saatnya menambahkan kode khusus yang akan mengubah menu seluler menjadi menu bersarang yang dapat diciutkan. Tambahkan Modul Kode ke kolom kedua (atau di mana pun).

Masukkan Kode CSS & JQuery

Kemudian, tambahkan kode CSS dan JQuery. Pastikan Anda menempatkan kode CSS di antara tag gaya dan kode JQuery di antara tag skrip.

.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}

(function($) {
      
function setup_collapsible_submenus() {
    
var FirstLevel = $('.et_mobile_menu .first-level > a');
  
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');  
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
  

}
      
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
 
})(jQuery);

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Seluler

Desktop

Pikiran Akhir

Dalam posting ini, kami menunjukkan kepada Anda cara membuat menu bersarang yang runtuh berlaku untuk tajuk global Anda di dalam Pembuat Tema. Kami mulai dengan membuat bilah menu utama, dilanjutkan dengan mendesain tajuk kami di dalam Pembuat Tema menggunakan Modul Menu dan menyelesaikan tutorial dengan menambahkan kode khusus yang membuat efeknya berfungsi. Kami harap Anda menikmati tutorial ini dan jika Anda memiliki pertanyaan, silakan tinggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.