Cara Menambahkan Ikon Hamburger Beralih ke Modul Menu Divi di Desktop

Jika Anda membuat tajuk di dalam Divi, ada beberapa cara untuk melakukannya. Faktanya, Anda bisa mendapatkan gambaran umum tentang jenis header dan tutorial di sini. Sekarang, dalam tutorial hari ini, kami menambahkan opsi lain ke daftar Anda. Kami akan menunjukkan kepada Anda cara menambahkan sakelar ikon hamburger ke Modul Menu DIvi. Ikon hamburger ini sudah muncul, secara default, pada ukuran layar yang lebih kecil, tetapi dalam tutorial ini, kami akan memastikan ikon hamburger juga muncul di desktop. Saat mengklik ikon hamburger, semua item menu akan muncul dalam urutan horizontal di sebelah ikon. Ini memberikan tampilan dan nuansa minimal ke header Anda sambil menambahkan interaksi juga. 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.

Unduh Template Header Global GRATIS

Untuk mendapatkan template tajuk global gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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!

1. Buat Template Header Global Baru

Pergi ke Divi Theme Builder

Mulailah dengan membuka Divi Theme Builder di bagian belakang situs WordPress Anda. Sesampai di sana, klik "Tambahkan Header Global".

Tambahkan Tajuk Global Baru

Menu tarik-turun akan muncul. Untuk mulai membangun dari awal, lanjutkan dengan memilih “Build Global Header”.

2. Buat Desain Header Global

Pengaturan Bagian

Warna latar belakang

Setelah berada di dalam editor template, saatnya untuk mulai membangun desain header. Anda akan melihat sudah ada bagian di sana. Buka pengaturan bagian dan tambahkan warna latar belakang.

• Warna Latar Belakang: #f6f9fb

Jarak

Pindah ke tab desain bagian dan hapus semua padding atas dan bawah default.

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

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris, buka tab desain dan ubah lebar maksimum dalam pengaturan ukuran.

• Lebar Maks: 1280px

Jarak

Ubah padding atas dan bawah dalam pengaturan spasi berikutnya.

• Padding Atas: 5px
• Padding Bawah: 5px

Tambahkan Modul Menu ke Kolom

Pilih Menu

Selanjutnya, tambahkan Modul Menu ke kolom baris dan pilih menu dinamis pilihan Anda.

Unggah Logo

Unggah logo.

Hapus Warna Latar Belakang

Kemudian, hapus warna latar belakang putih default modul.

Pengaturan Teks Menu

Pindah ke tab desain modul dan ubah pengaturan teks menu yang sesuai:

• Font Menu: Poppins
• Berat Font Menu: Semi Tebal
• Warna Teks Menu: #003e51
• Ukuran Teks Menu: 16px
• Perataan Teks: Kanan

Pengaturan Menu Dropdown

Ubah pengaturan menu dropdown berikutnya.

• Warna Garis Menu Dropdown: #7159c8

Pengaturan Ikon

Ubah juga pengaturan ikon.

• Warna Ikon Keranjang Belanja: #670fff
• Warna Ikon Pencarian: #670fff
• Warna Ikon Menu Hamburger: #670fff

Perekat

Kemudian, buka pengaturan ukuran dan tetapkan lebar maksimum logo.

• Logo Lebar Maks: 50px

Jarak

Hapus juga margin bawah default modul.

• Margin Bawah: 0px

Putar Bagian Lengket

Sekarang menu kita sudah siap, kita juga akan mengubah bagian menjadi lengket. Buka pengaturan bagian, buka tab lanjutan dan terapkan pengaturan tempel berikut:

• Posisi Lengket: Menempel ke Atas
• Offset Dari Elemen Lengket Sekitarnya: Ya
• Default Transisi dan Gaya Lengket: Ya

Warna Latar Belakang Lengket

Ubah warna latar belakang bagian dalam status lengket berikutnya.

• Warna Latar Belakang: #ffffff

Bayangan Kotak Lengket

Terapkan bayangan kotak ke bagian juga.

• Warna Bayangan Default: rgba(0,0,0,0)
• Warna Bayangan Lengket: rgba (0,0,0,0.04)

3. Tambahkan Ikon Hamburger Beralih ke Modul Menu

Tambahkan ID CSS ke Modul Menu

Di bagian tutorial selanjutnya, kita akan fokus pada pembuatan ikon sakelar ikon hamburger desktop. Pertama, buka pengaturan Modul Menu, buka tab lanjutan dan tetapkan ID CSS.

• ID CSS: menu-divi

Tambahkan Modul Kode Di Bawah Modul Menu

Kemudian, tambahkan Modul Kode di bawah Modul Menu.

Tambahkan Tag Skrip & Gaya

Kami akan menggunakan beberapa kode CSS dan JQuery. Untuk mempersiapkannya, kami akan menambahkan beberapa tag gaya dan skrip.

Tambahkan Kode CSS

Kami akan menempelkan baris kode CSS berikut di antara tag gaya:

.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}

#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
  
transform: translateY(50%);  
}
  
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
  
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

Tambahkan JQuery

Tambahkan Baris Kode Pembuka JQuery

Selanjutnya, kita akan memiliki kode JQuery. Tambahkan baris kode JQuery berikut di antara tag skrip:

jQuery(function($){
$(document).ready(function(){

});
});

Buat Variabel

Buat beberapa variabel selanjutnya.

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

Tempatkan Ikon Beralih Di Dalam Modul Menu

Kemudian, tempatkan variabel ikon sakelar di dalam Modul Menu menggunakan baris kode berikut ini:

toggleIcon.insertAfter(desktopMenu);

Tambahkan Fungsi Klik

Kami juga menambahkan fungsi klik.

toggleIcon.click(function(){
	desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});

4. Simpan Perubahan Pembuat Tema Divi

Sekarang setelah semuanya siap, satu-satunya yang tersisa untuk dilakukan adalah menyimpan semua perubahan Divi Theme Builder dan melihat hasilnya!

Pratinjau

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

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan header Divi Anda di dalam Divi Theme Builder. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menambahkan sakelar ikon menu hamburger di desktop juga. Secara default, ikon hamburger adalah bagian dari pengalaman tablet dan seluler, tetapi kami juga memperluasnya ke desktop. Saat mengklik ikon sakelar, item menu akan muncul dalam urutan horizontal, yang memberikan tampilan dan nuansa minimal. Anda juga dapat mengunduh file template JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, pastikan untuk meninggalkan 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.