Di masa lalu, kami telah membagikan berbagai jenis header yang dapat Anda buat dengan Divi dan Divi Theme Builder. Faktanya, Anda dapat menemukan semua tutorial yang tercantum di posting navigasi ini. Dalam posting itu, Anda akan melihat kami telah menunjukkan kepada Anda cara membuat header layar penuh, tetapi untuk membantu Anda membawa desain header Anda lebih jauh, kami akan menunjukkan cara membuat menu hamburger animasi kustom juga. Ada beberapa hal penting tentang menu hamburger yang akan kita buat:
Dengan kata lain, ini jelas merupakan tutorial header yang akan membantu Anda menambahkan tampilan dan nuansa tingkat lanjut ke situs web Anda. Anda juga dapat menata item sesuai keinginan dan Anda 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. Desktop
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
1. Buat Template Header Baru Buka Divi Theme Builder & Tambahkan Template Header Global Baru Mulailah dengan membuka Divi Theme Builder. Satu di sana, tambahkan tajuk global baru.
Mulai Membangun Dari Awal Dan mulailah membangun desain header dari awal.
2. Bangun Logo & Ikon Hamburger Pengaturan Bagian Warna latar belakang Setelah berada di dalam editor template, kita akan mulai dengan membuat logo dan ikon hamburger. Anda akan melihat sudah ada bagian di sana. Buka pengaturan bagian dan terapkan warna latar belakang transparan.
- Warna Latar Belakang: rgba(255,255,255,0)
Jarak Pindah ke tab desain bagian dan hapus semua padding atas dan bawah default berikutnya.
- Padding Atas: 0px
- Padding Bawah: 0px
Posisi Kemudian, pergi ke lanjutan dan putar bagian tetap.
- Posisi: Tetap
- Lokasi: Kiri Atas
- Indeks Z: 13
Tambahkan Baris Baru Struktur Kolom Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:
Perekat Tanpa menambahkan modul, buka pengaturan baris, lanjutkan ke tab desain dan ubah pengaturan ukuran yang sesuai:
- Gunakan Lebar Talang Kustom: Ya
- Lebar Talang: 1
- Samakan Tinggi Kolom: Ya
- Lebar: 95%
- Lebar Maks: 100%
Jarak Hapus semua padding atas dan bawah default berikutnya.
- Padding Atas: 0px
- Padding Bawah: 0px
Elemen Utama CSS Dan untuk memastikan logo dan ikon hamburger muncul bersebelahan pada ukuran layar yang lebih kecil, kita akan menyisipkan satu baris kode CSS di elemen utama baris. display: flex;
Tambahkan Modul Gambar ke Kolom 1 Unggah Logo Saatnya menambahkan modul, dimulai dengan Modul Gambar di kolom 1. Unggah logo pilihan Anda.
Perekat Pindah ke tab desain dan ubah pengaturan ukuran berikutnya.
- Lebar Maks:
- Desktop: 80px
- Tablet & Ponsel: 50px
Posisi Kemudian, reposisi seluruh modul.
- Posisi: Absolut
- Lokasi: Kiri Atas
- Offset Vertikal: 20px
Tambahkan Modul Teks ke Kolom 3 Struktur HTML di Kotak Konten Di kolom ketiga, kita akan menambahkan Modul Teks. Kami akan menggunakan Modul Teks ini untuk membuat ikon hamburger kami. Mulailah dengan beralih ke tab teks di kotak konten dan masukkan tag HTML berikut: <span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>
Perekat Ubah pengaturan ukuran modul berikutnya.
Jarak Kemudian, terapkan nilai padding khusus di berbagai ukuran layar.
- Bantalan Atas:
- Desktop: 10px
- Tablet & Ponsel: 17px
- Bantalan Bawah:
- Desktop: 10px
- Tablet & Ponsel: 17px
- Bantalan Kiri:
- Desktop: 15px
- Tablet & Ponsel: 30px
- Bantalan Kanan:
- Desktop: 15px
- Tablet & Telepon: 10px
Posisi Reposisi modul ini juga.
- Posisi: Absolut
- Lokasi: Pojok Kiri Atas
3. Buat Menu Hamburger Tambahkan Bagian Baru Latar Belakang Gradien Sekarang setelah kita memiliki logo dan ikon hamburger, kita dapat melanjutkan ke bagian berikutnya yang didedikasikan untuk membuat menu hamburger dan semua itemnya. Mulailah dengan menambahkan bagian baru, buka pengaturan bagian dan terapkan latar belakang gradien.
- Warna 1: #000000
- Warna 2: #11111
- Tipe Gradien: Linier
- Arah Gradien: 90 derajat
- Posisi Awal: 50%
- Posisi Akhir: 50%
Perekat Terapkan tinggi minimum dan tinggi maksimum ke pengaturan ukuran berikutnya.
- Tinggi Min: 100vh
- Tinggi Maks: 100vh
Jarak Kemudian, hapus semua padding bagian atas dan bawah default.
- Padding Atas: 0px
- Padding Bawah: 0px
Meluap Ubah juga overflow.
- Luapan Horisontal: Tersembunyi
- Luapan Vertikal: Otomatis
Posisi Untuk memastikan menu dapat dibuka setiap saat, kami akan memposisikan ulang bagian di tab lanjutan.
- Posisi: Tetap
- Lokasi Top Center
Tambahkan Baris Baru Struktur Kolom Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:
Perekat Tanpa menambahkan modul, buka pengaturan baris, pindah ke tab desain dan ubah pengaturan ukuran sebagai berikut:
- 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
Meluap Lalu, buka tab lanjutan dan ubah overflow.
- Luapan Horisontal: Tersembunyi
- Luapan Vertikal: Otomatis
Posisi Reposisi baris juga.
- Posisi: Absolut
- Lokasi Top Center
Pengaturan Kolom 1 Jarak Selanjutnya, kita akan membuka pengaturan kolom 1 dari baris kita dan menerapkan beberapa nilai padding responsif kustom.
- Bantalan Atas:
- Desktop: 24vh
- Tablet & Telepon: 10vh
- Bantalan Bawah:
- Desktop: 24vh
- Tablet & Telepon: 5vh
- Padding Kiri: 13%
- Padding Kanan: 13%
Berbatasan Kami juga akan menerapkan beberapa pengaturan perbatasan:
- Lebar Perbatasan Kanan:
- Desktop: 2px
- Tablet & Ponsel: 0px\
- Warna Batas Kanan: #191919
- Lebar Batas Bawah:
- Desktop: 0px
- Tablet & Ponsel: 2px
- Warna Batas Kanan: #191919
Pengaturan Kolom 2 Jarak Kemudian, kita akan beralih ke kolom 2 dan menerapkan beberapa nilai padding kustom di sana juga.
- Bantalan Atas:
- Desktop: 24vh
- Tablet & Telepon: 5vh
- Bantalan Bawah:
- Desktop: 24vh
- Tablet & Telepon: 5vh
- Padding Kiri: 13%
- Padding Kanan: 13%
Tambahkan Modul Teks #1 ke Kolom 1 Tambahkan Konten H3 Saatnya menambahkan modul, dimulai dengan Modul Teks pertama di kolom 1. Tambahkan beberapa konten H3 pilihan Anda.
Pengaturan Teks H3 Pindah ke tab desain dan ubah pengaturan teks H3 sebagai berikut:
- Judul 3 Font: Montserrat
- Judul 3 Berat Font: Ultra Tebal
- Judul 3 Gaya Font: Huruf Besar
- Judul 3 Warna Teks: #ffffff
- Judul 3 Ukuran Teks
- Desktop: 1vw
- Tablet: 2.5vw
- Telepon: 3.5vw
- Spasi Judul 3 Huruf: 5px
Jarak Tambahkan beberapa margin bawah berikutnya.
Modul Teks Klon & Tempatkan Duplikat di Kolom 2 Setelah Anda menyelesaikan modul pertama ini, Anda dapat mengkloningnya sekali dan menempatkan duplikatnya di kolom 2.
Ubah Konten Pastikan untuk mengubah konten dalam modul duplikat ini.
Tambahkan Modul Teks #2 ke Kolom 2 Struktur HTML di Kotak Konten Untuk menampilkan item menu kami, termasuk item sub menu, kami akan menggunakan tab teks dari Modul Teks baru. Lanjutkan dan tambahkan Modul Teks baru ke kolom 1 dan masukkan HTML berikut: <span style="color: #686868;">01—</span> <a href="#">Services</a> <span class="toggle-sub-menu" style="color: #ffff00;">+</span>
<ul>
<li><a href="#">Web design</a></li>
<li><a href="#">Branding</a></li>
</ul>
Pengaturan Teks Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:
- Font Teks: Montserrat
- Berat Font Teks: Tipis
- Warna Teks: #ffffff
- Ukuran teks:
- Desktop: 2.7vw
- Tablet: 4vw
- Telepon: 6vw
- Spasi Surat Teks: 0.1em
- Tinggi Baris Teks: 1em
Pengaturan Teks Tautan Ubah juga warna teks tautan.
Pengaturan Teks Daftar Tidak Terurut Kemudian, ubah pengaturan teks daftar tidak berurutan.
- Font Daftar Tidak Terurut: Montserrat
- Berat Font Daftar Tidak Terurut: Tebal
- Gaya Font Daftar Tidak Terurut: Huruf Besar
- Ukuran Teks Tidak Terurut:
- Desktop: 1vw
- Tablet: 2.5vw
- Telepon: 3.5vw
- Tinggi Baris Daftar Tidak Terurut: 1.5em
- Tipe Gaya Daftar Tidak Terurut: Tidak Ada
- Posisi Gaya Daftar Tidak Terurut: Di dalam
Jarak Dan selesaikan pengaturan modul dengan menambahkan beberapa bantalan atas dan bawah khusus.
- Padding Atas: 5%
- Padding Bawah: 5%
Modul Teks Klon untuk Membuat Variasi Tanpa Submenu Setelah Anda menyelesaikan modul pertama, Anda dapat mengkloningnya sekali. Kami akan menggunakan duplikasi ini untuk membuat variasi item menu tanpa item sub menu.
Tinggalkan Submenu & Beralih Ikon Untuk mengubah modul duplikat ini menjadi item menu biasa tanpa item submenu, gunakan struktur HTML ini sebagai gantinya: <span style="color: #686868;">03—</span> <a href="#">Contact</a>
Gunakan Kembali Kedua Jenis Item Menu Setelah Anda memiliki kedua variasi item menu, Anda dapat menggunakan kembali keduanya sesuai dengan mengkloningnya dan mengubah kontennya.
Tambahkan Modul Teks #2 ke Kolom 2 Tambahkan Konten H4 & Paragraf ke Kotak Konten Di kolom 2, kita akan menambahkan Modul Teks lain dengan beberapa konten H4 dan paragraf pilihan kita.
Pengaturan Teks Pindah ke tab desain dan ubah pengaturan teks yang sesuai:
- Font Teks: Alata
- Warna Teks: #cecece
- Ukuran teks:
- Desktop: 0.8vw
- Tablet: 2.4vw
- Telepon: 3.4vw
- Spasi Huruf Teks: 1px
- Tinggi Baris Teks: 1.5em
- Warna Teks: Cahaya
Pengaturan Teks H4 Buat beberapa perubahan pada pengaturan teks H4 juga.
- Judul 4 Ukuran Teks:
- Desktop: 1vw
- Tablet: 3vw
- Telepon: 4vw
Perekat Kemudian, ubah lebar modul di pengaturan ukuran.
Elemen Utama CSS Dan tambahkan satu baris kode CSS ke elemen utama modul. Baris kode CSS ini akan membantu kita menempatkan dua Modul Teks bersebelahan. display: inline-block;
Modul Teks Klon #2 Ubah Salin Setelah Anda menyelesaikan Modul Teks, Anda dapat mengkloningnya sekali dan mengubah konten yang sesuai.
Tambahkan Modul Ikuti Media Sosial ke Kolom 2 Tambahkan Jejaring Sosial Pilihan Modul terakhir yang kita butuhkan dalam perancangan ini adalah Modul Ikuti Media Sosial di kolom 2. Tambahkan jejaring sosial pilihan Anda.
Hapus Warna Latar Belakang Setiap Jejaring Sosial Satu per satu Hapus warna latar belakang setiap jejaring sosial satu per satu.
Jarak Kemudian, kembali ke pengaturan modul umum dan terapkan beberapa margin atas.
4. Tambahkan Fungsionalitas Tambahkan Kelas CSS ke Modul Teks Ikon Hamburger Sekarang setelah fondasi desain menu hamburger kami dibuat, kami sekarang dapat fokus pada penambahan fungsionalitas! Hal pertama yang harus Anda lakukan adalah membuka Modul Teks yang berisi ikon hamburger dan menambahkan kelas CSS berikut:
- Kelas CSS: buka lebar penuh
Tambahkan Kelas CSS ke Bagian #2 Kemudian, buka bagian menu hamburger, bagian #2, dan tambahkan kelas CSS berikut:
- Kelas CSS: menu lebar penuh
Tambahkan Kelas CSS ke Setiap Modul di Menu Lebar Penuh Untuk membuat efek animasi stagger kustom, kita perlu menerapkan kelas CSS berikut ke setiap modul di bagian #2.
- Kelas CSS: efek sempoyongan
Tambahkan Kelas CSS Ekstra ke Item Menu Tambahkan kelas CSS tambahan, yang disebut "main-menu-item", ke masing-masing item menu di kolom 1 juga.
- Kelas CSS: item menu utama efek terhuyung-huyung
Tambahkan Modul Kode ke Bagian #1 Untuk menerapkan fungsionalitas, kami akan menggunakan kode CSS dan JQuery khusus. Kami akan menempatkan kode ini di Modul Kode baru di kolom kedua baris kami di bagian #1.
Masukkan Kode CSS Tambahkan kode CSS berikut ke Modul Kode di antara tag gaya seperti yang Anda lihat di layar cetak di bawah ini. /* enable class below once you’re done editing the menu */
/*
.fullwidth-menu {
opacity: 0;
top: 0vh;
visibility: hidden;
}
*/
.line{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.fullwidth-open.open .line{
background: white;
}
.line-1 {
top: 15px;
}
.line-2 {
top: 25px;
width: 80%;
}
.line-3 {
top: 35px;
width: 50%;
}
.fullwidth-open.open .line-1 {
top: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.fullwidth-open.open .line-2 {
display: none;
}
.fullwidth-open.open .line-3 {
top: 25px;
width: 100%;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.fullwidth-menu-open {
opacity: 1 !important;
top: 0 !important;
visibility: visible !important;
}
.fullwidth-menu {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
.main-menu-item ul {
display: none;
padding: 0;
margin-top: 50px;
}
.toggle-sub-menu {
cursor: pointer;
}
Masukkan Perpustakaan Anime.js Lanjutkan dengan menambahkan perpustakaan JavaScript Anime menggunakan tag skrip seperti yang Anda lihat di layar cetak di bawah ini . Kami akan menggunakan perpustakaan yang luar biasa ini untuk membuat efek terhuyung-huyung di langkah berikutnya dari tutorial.
- src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”
Masukkan Kode JQuery Fungsionalitas klik di menu hamburger kami didukung oleh kode JQuery berikut. Pastikan Anda menempatkan kode ini di antara tag skrip seperti yang Anda lihat di layar cetak di bawah ini. jQuery(function($){
$(document).ready(function(){
// All variables needed in functions
var menuSection = $(‘.fullwidth-menu’);
var hamburgerIcon = $(‘.fullwidth-open’);
var menuLink = $(‘.fullwidth-menu a’);
var subMenu = $(‘.main-menu-item ul’);
var toggleIcon = $(‘.toggle-sub-menu’);
// Open fullwidth menu & animate items
hamburgerIcon.click(function(){
$(this).toggleClass(‘open’);
menuSection.toggleClass(‘fullwidth-menu-open’);
if (menuSection.hasClass("fullwidth-menu-open")) {
anime({
targets: ‘.stagger-effect’,
translateY: [150, 0],
opacity: [0, 1],
loop: false,
delay: anime.stagger(100, {easing: ‘easeOutQuad’})
});
} else {
subMenu.slideUp();
toggleIcon.text($(this).text() == ‘+’ ? ‘-‘ : ‘+’);
}
});
// Close fullwidth menu when clicking an item
menuLink.click(function(){
hamburgerIcon.toggleClass(‘open’);
menuSection.toggleClass(‘fullwidth-menu-open’);
subMenu.slideUp();
toggleIcon.text($(this).text() == ‘+’ ? ‘-‘ : ‘+’);
});
// Change icon when toggling the submenu
toggleIcon.click(function(){
var subMenu = $(this).parent().find("ul");
subMenu.slideToggle();
$(this).text($(this).text() == ‘-‘ ? ‘+’ : ‘-‘);
});
});
});
Aktifkan Kelas CSS Segera setelah Anda Menyelesaikan Desain Header Layar Penuh Anda Last but not least, kami akan mengaktifkan kelas CSS di Modul Kode yang dapat Anda temukan di bagian pertama. Buka Code Module dan hilangkan tanda “/* */” di awal dan akhir kelas. Mengaktifkan kelas ini (dikombinasikan dengan beberapa kode JQuery yang sudah diaktifkan) akan memastikan bagian yang berisi item menu tidak langsung dimuat saat seseorang mengunjungi salah satu halaman Anda. Setelah Anda mengaktifkan kelas ini, bagian kedua pada halaman Anda akan hilang dari Visual Builder, tetapi Anda masih dapat mengaksesnya dalam Mode Wireframe atau mematikan kelas CSS jika Anda ingin membuat perubahan tambahan.
5. Simpan Perubahan Header & Pembuat Tema Itu dia! Satu-satunya yang tersisa untuk dilakukan adalah menyimpan template dan Divi Theme Builder dan melihat hasilnya di situs web Anda!
Pratinjau Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar. Desktop
Seluler
Pikiran Akhir Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan header Divi Anda. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara membuat menu hamburger animasi khusus. Segera setelah pengunjung mengklik ikon hamburger, menu layar penuh bertransisi dan menampilkan item menu satu per satu, yang menghasilkan pengalaman pengguna yang indah. Anda juga dapat mengunduh file template JSON secara gratis! Jika Anda memiliki pertanyaan, jangan ragu 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.
