Apakah Anda ingin menambahkan ikon hamburger ke modul Menu dari Divi ?
Jika Anda membuat tajuk di Divi, ada beberapa cara untuk melakukannya.
Kami akan menunjukkan cara menambahkan ikon hamburger ke modul Menu Divi. Ikon hamburger ini sudah muncul secara default di layar yang lebih kecil. Namun dalam tutorial ini, kami akan memastikan bahwa ikon hamburger juga muncul di desktop.
Ini memberikan tampilan minimal ke tajuk Anda sambil juga menambahkan interaksi.
Mari kita pergi.
penelitian
Sebelum masuk ke tutorial ini, mari kita lihat dulu hasilnya.
Unduh DIVI Sekarang!!!
Buat Template Header Global Baru dengan Divi Builder
Pergi ke Divi Theme Builder
Dari dasbor WordPress, buka 'Divi > Pembuat Tema' lalu klik 'Tambahkan Tajuk Global'
Tambahkan tajuk global baru
Menu tarik-turun akan muncul. Untuk mulai membangun dari awal, lanjutkan dengan memilih “Bangun Tajuk Global”.
Merancang desain tajuk global
Pengaturan bagian
Warna latar belakang
Setelah berada di editor template, saatnya untuk mulai mendesain header. Anda akan melihat bahwa sudah ada bagian. Buka pengaturan bagian dan tambahkan warna latar belakang.
- Warna Latar Belakang: #f6f9fb
jarak
Beralih ke tab Mendesain bagian dan memodifikasi parameter berikut.
- Padding (Atas dan Bawah): 0px
Tambahkan baris baru
Struktur kolom
Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:
perekat
Buka pengaturan garis, buka tab Mendesain dan ubah lebar maksimum dalam pengaturan ukuran.
- Lebar Maks: 1px
jarak
Kemudian ubah padding atas dan bawah dalam pengaturan spasi.
- Padding (Atas dan Bawah): 5px
Tambahkan modul Menu ke kolom
Pilih menu untuk ditambahkan
Selanjutnya, tambahkan modul Menu ke kolom baris dan pilih menu dinamis pilihan Anda.
Unduh logo
Unduh sebuah logo.
Hapus warna latar belakang
Selanjutnya, hapus warna latar belakang putih default dari modul.
Pengaturan teks menu
Beralih ke tab Mendesain modul dan memodifikasi parameter teks menu yang sesuai:
- Menu Font: Poppins
- Berat Font Menu: Semi Tebal
- Warna Teks: #003e51
- Ukuran Teks Menu: 16px
- Perataan Teks: Kanan
Pengaturan menu drop-down
Kemudian ubah pengaturan dari menu tarik-turun.
- 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
Lalu pergi ke pengaturan ukuran dan tetapkan lebar maksimum logo.
- logo Lebar Maks: 280px
jarak
Hapus juga margin bawah default dari modul.
- Margin (Bawah): 0px
Jadikan Bagian Lengket
Sekarang menu kita sudah ada, kita juga akan membuat bagian itu lengket. Buka pengaturan bagian, buka tab Advanced dan terapkan pengaturan berikut:
- Posisi Lengket: Tongkat Ke Atas
- Offset Dari Elemen Lengket Sekitarnya: YA
- Default Transisi dan Gaya Lengket: YA
Warna latar belakang dalam keadaan lengket
Kemudian ubah warna latar belakang bagian menjadi sticky state.
- Warna Latar Belakang: #ffffff
Bayangan kotak keadaan lengket
Terapkan juga bayangan kotak ke bagian tersebut.
- Warna Bayangan (Desktop): rgba(0,0,0,0)
- Warna Bayangan (Lengket): rgba(0,0,0,0.04)
Menambahkan ikon hamburger ke modul Menu
Tambahkan ID CSS ke modul menu
Pertama, buka pengaturan modul Menu, buka tab Advanced dan menetapkan ID CSS.
- ID CSS: menu-divi
Tambahkan modul Kode di bawah modul Menu
Selanjutnya, tambahkan modul Kode di bawah modul Menu.
Tambahkan skrip dan tag gaya
Kami akan menggunakan kode CSS dan JQuery. Untuk mempersiapkan ini, kami akan menambahkan 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 JQuery pembuka
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 berikutnya.
var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');
Tempatkan ikon sakelar di modul Menu
Selanjutnya, tempatkan variabel ikon sakelar di modul Menu menggunakan baris kode berikut:
toggleIcon.insertAfter(desktopMenu);
Tambahkan fungsi klik
Kami juga menambahkan fungsi klik.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
Simpan perubahan Divi Theme Builder
Sekarang semuanya sudah siap, yang harus Anda lakukan adalah menyimpan semua perubahan Divi Theme Builder dan melihat hasilnya!
penelitian
Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhirnya.
Unduh DIVI Sekarang!!!
Kesimpulan
Dalam artikel ini, kami menunjukkan cara berkreasi dengan tajuk global Anda di Divi Theme Builder.
Secara khusus, kami telah menunjukkan kepada Anda cara menambahkan ikon menu hamburger di desktop juga. Secara default, ikon hamburger ditampilkan di tablet dan ponsel.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk menyelesaikan proyek pembuatan situs web Anda. Atau lihat juga panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
