Apakah Anda ingin membuat? menu geser dan dorong di DIVI yang tidak menyembunyikan elemen halaman Anda?
Header besar dengan banyak tautan navigasi dapat menghabiskan ruang berharga di . Anda situs jaringan. Inilah sebabnya mengapa menu konteks dan slide-out menjadi semakin populer. Biasanya, menu yang dapat digeser untuk ditampilkan tetap berada di atas isi halaman, menyembunyikan elemen tertentu.
Namun, menu push geser bekerja sedikit berbeda. Efek dorong geser unik karena menu meluncur dari atas halaman sambil menekan secara bersamaan isi dari halaman ke bawah sehingga tidak ada yang tersembunyi dari pandangan.
Dalam tutorial ini, kami akan menunjukkan cara membuat menu push geser dari awal menggunakan Divi Theme Builder.
Mari kita pergi!
penelitian
Berikut ini sekilas menu geser geser yang akan kita buat dalam tutorial ini.
Bangun menu push geser dengan pembuat tema Divi
Membuat menu global baru
Untuk membuat menu, kami akan membuat header global baru di dalam Divi Theme Builder.
Buka Divi > Pembuat Tema.
Baca juga: Cara membuat tajuk global dengan formulir masuk di DIVI
Kemudian klik area "Tambahkan tajuk global" di templat situs web secara default. Dari daftar drop-down, pilih "Build Global Header".
Pembuatan menu push
Elemen pertama yang akan kita buat bersama adalah bagian menu push. Bagian ini akan berisi item menu yang akan beralih ke atas dan ke bawah saat Anda mengklik tombol sakelar menu.
Pengaturan bagian
Buka pengaturan bagian default dan perbarui pengaturan sebagai berikut:
Latar belakang
- Latar belakang: #1a1e36
Margin internal
- Margin Internal: 0px Atas, 0px Bawah
Kelas CSS
Di bawah tab lanjutan, tambahkan kelas CSS berikut yang akan digunakan nanti dalam kode JS kita.
- Kelas CSS: et-push-menu
Tambahkan baris 1
Setelah parameter bagian ditentukan, buat baris satu kolom di bagian tersebut.
Parameter Baris 1
Selanjutnya, perbarui parameter baris sebagai berikut:
perekat
- Gunakan Lebar Talang Kustom: YA
- Jarak kolom: 1
- Lebar maksimum: 100%
- Lebar maksimum: 1 piksel
jarak
- Margin: 3vh Atas, 3vh Bawah
Perbatasan
- Lebar batas bawah: 1px
- Warna batas bawah: rgba(255,255,255,0.2)
CSS khusus
Di bawah tab lanjutan, tambahkan CSS khusus berikut ke elemen utama:
display:flex;
justify-content:center;
align-items:center;
Parameter kolom
Setelah pengaturan baris ditentukan, buka pengaturan kolom dan tambahkan cuplikan CSS khusus ke elemen utama:
display:flex;
align-items:center;
justify-content:center;Ini akan memusatkan isi kolom baik secara vertikal maupun horizontal.
Menambahkan tombol
Kami sekarang siap untuk mulai menambahkan item menu kami menggunakan modul Button. Mulailah dengan menambahkan tombol baru ke kolom.
Lihat juga panduan kami di: Cara membuat menu navigasi vertikal di DIVI
Pengaturan tombol
Selanjutnya, perbarui pengaturan tombol sebagai berikut:
Isi
- Teks tombol: Desain
- URL Tautan Tombol: # (ganti nanti dengan URL khusus Anda sendiri)
Gaya
- Gunakan gaya khusus untuk Tombol: YA
- Warna teks tombol: #ffffff
- Lebar Batas Tombol: 0 piksel
- Font Tombol: Montserrat
- Tombol Cahaya Lembut: Berat
- Tombol ikon: YA
- Tombol ikon: [Pilihan Anda]
- Hanya Tampilkan Ikon pada Tombol Arahkan: TIDAK
- Penempatan Ikon Tombol: Kiri
Kolom duplikat
Sekarang, untuk membuat tombol tambahan untuk menu, kita dapat menduplikasi kolom. Untuk desain ini, mari gandakan kolom 4 kali untuk memberi kita total 5 item menu/tombol dalam deretan lima kolom.
Tambahkan baris 2
Setelah baris pertama selesai, kami siap untuk menambahkan baris tombol lain yang dapat digunakan untuk set item menu yang berbeda.
Baca juga: Bagaimana cara menambahkan formulir kontak ke tajuk global di DIVI
Untuk membuat baris berikutnya, duplikat baris 1.
Hapus semua kolom kecuali satu
Kemudian hapus semua kecuali satu kolom di baris duplikat.
Parameter Baris 2
Perbarui parameter baris 2 sebagai berikut:
- Lebar maksimum: 1 piksel
- Lebar batas bawah: 0px
Parameter kolom
Kemudian tambahkan perbatasan ke kolom sebagai berikut:
- Lebar batas kanan: 1px
- Warna batas kanan: rgba(255,255,255,0.2)
Perbarui pengaturan tombol
Setelah kolom memiliki batas kanan, buka pengaturan tombol dan perbarui yang berikut:
- Ukuran teks tombol: 14px
- Tombol Soft Light: teks tebal
- Jarak huruf tombol: 2 px
- Gaya salin tombol: TT
- Tombol ikon: TIDAK
Kolom duplikat
Seperti yang kita lakukan sebelumnya, mari menduplikasi kolom untuk membuat tombol dan kolom tambahan. Untuk desain ini, mari kita gandakan kolom 3 kali untuk memberi kita total 4 tombol dalam deretan 4 kolom.
Hapus batas dari kolom terakhir
Karena kita tidak ingin kolom terakhir memiliki batas kanan, buka pengaturan untuk kolom 4 dan perbarui lebar batas:
- Lebar batas kanan: 0px
Membuat Bilah Tajuk Utama
Selanjutnya, kita akan membuat bagian bar header utama. Bilah tajuk ini akan selalu tetap terlihat dan akan menjadi apa yang berisi logo situs kami, ajakan bertindak, dan tombol sakelar menu kami.
Tambahkan bagian
Sebelum menambahkan bagian baru, ada baiknya memperbarui label bagian sebelumnya agar terbaca "Push Menu Section".
Lihat juga: Cara Membuat Header Global dengan Pembuat Tema di DIVI
Kemudian buat bagian baru di bawah bagian pertama.
Pengaturan bagian
Sekarang perbarui label bagian baru untuk membaca "Bagian Header". Kemudian buka pengaturan bagian dan perbarui yang berikut:
jarak
- Margin Internal: 0px Atas, 0px Bawah
Tambahkan satu baris
Setelah padding bagian diatur, tambahkan baris tiga kolom ke bagian tersebut.
Pengaturan saluran
Buka parameter baris dan perbarui yang berikut:
perekat
- Lebar selokan: 1
- Lebar: 90%
- Tinggi: 70px
jarak
- Margin Internal: 0px Atas, 0px Bawah
CSS khusus
Di bawah tab lanjutan, tambahkan CSS khusus berikut ke elemen utama:
display:flex;
align-items:center;Ini akan memusatkan kolom di baris secara vertikal.
Menambahkan tombol
Untuk membuat CTA utama pada bagian header, kita dapat menggunakan tombol baris kedua di bagian atas. Salin tombol dari kolom 1 baris 2 bagian atas dan tempel ke kolom 1 baris bagian header.
Perbarui pengaturan tombol
Kemudian buka pengaturan tombol duplikat dan perbarui yang berikut:
- Teks tombol: Pendaftaran
- Ukuran teks tombol: 14px
- Warna teks tombol: #1a1e36
- Tombol ikon: YA
- Tombol ikon: Panah kanan (lihat tangkapan layar)
Tambahkan logo
Di kolom tengah, tambahkan modul Gambar. Ini akan menjadi cara kami menambahkan logo situs secara dinamis.
Arahkan kursor ke area gambar dan klik ikon "Gunakan konten dinamis". Dari menu tarik-turun, pilih "Logo Situs".
Pengaturan Gambar
Kemudian, di bawah tab Gaya, perbarui yang berikut ini:
- Perataan gambar: terpusat
- Tinggi maksimum: 55 piksel
Tambahkan ikon hamburger khusus
Kita dapat menggunakan ikon biasa melalui modul tata letak sebagai sakelar menu, tetapi untuk tutorial ini saya pikir kami akan menambahkan sakelar menu khusus dengan efek transisi yang keren.
Tambahkan modul teks
Untuk membuat ikon menu, kita akan menggunakan modul teks dengan kode HTML khusus yang akan ditata dengan CSS eksternal.
Silakan dan tambahkan modul teks ke kolom 3.
Tambahkan kode HTML ke modul teks
Kemudian tambahkan kode HTML berikut ke konten modul teks:
<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>
Latar belakang
Berikan modul teks warna latar belakang:
- Warna Latar Belakang: #1a1e36
Memformat teks
Selanjutnya, perbarui pengaturan Gaya sebagai berikut:
- Lebar: 70 piksel
- Penyelarasan modul: kanan
- Tinggi: 70px
- Margin Internal: 20px Atas, 20px Bawah, 16px Kiri, 16px Kanan
Kelas CSS
Di bawah tab lanjutan, tambahkan kelas CSS berikut:
- Kelas CSS: et-push-menu-toggle
Tambahkan kode
Untuk membawa pulang fungsionalitas yang kita butuhkan untuk membuat menu push geser ini berfungsi, kita akan menambahkan CSS dan jQuery kustom kita ke modul Kode.
Lanjutkan dan tambahkan modul Kode ke kolom 3 di bawah modul Teks.
Kemudian paste kode berikut (NB: bungkus kode ini dalam tag gaya agar berfungsi dengan benar):
.line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #ffffff;
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;
}
.line-2 {
top: 10px;
}
.line-3 {
top: 20px;
}
.et-push-menu-toggle.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.et-push-menu-toggle.open .line-2 {
display: none;
}
.et-push-menu-toggle.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.et-push-menu {
display:none;
}
.et-fb .et-push-menu {
display:block;
}
.et-push-menu-toggle {
cursor:pointer;
}
Kemudian salin dan tempel kode ini langsung di bawah (penting: bungkus kode ini dalam tag skrip agar berfungsi dengan baik):
(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );
Perbarui teks tombol dan tautan
Terakhir, kami dapat memperbarui semua tombol dengan teks tombol dan URL tautan yang diperlukan.
Selesai!
Simpan pengaturan
Jangan lupa untuk menyimpan tata letak dan pengaturan Pembuat Tema.
Hasil akhir
Untuk melihat hasil akhir, periksa halaman di situs web.
Membuat Lengket
Jika Anda menginginkan versi menu yang "lengket", cukup tambahkan cuplikan kode CSS berikut ke modul kode (di antara tag gaya):
header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
overflow-y: visible !important;
}
Berikut hasilnya.
Unduh DIVI Sekarang!!!
Kesimpulan
Kami harap Anda menikmati menu geser geser ini. Efeknya unik dan membuka pintu untuk header yang lebih kreatif. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca 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.
...
