Cara Membuat Bilah Menu Gesek untuk Situs Web Anda dengan Divi

Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.

Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang berkelanjutan, kami akan menunjukkan kepada Anda cara membuat bilah menu geser untuk situs web Anda menggunakan Paket Tata Letak Pialang Hipotek. Ini adalah cara yang bagus untuk menambahkan interaksi ke situs web Anda. Anda akan memiliki pengalaman pengguna yang sama di semua ukuran layar dan Anda dapat menggunakan teknik ini untuk semua jenis situs web yang Anda buat.

Mari kita lakukan!

Pratinjau

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

Desktop

Seluler

Nonaktifkan Navigasi Tetap di Opsi Tema Divi

Buka Opsi Tema Divi

Mari kita mulai! Hal pertama yang perlu Anda lakukan adalah membuka opsi tema Divi di situs WordPress Anda.

Nonaktifkan Navigasi Tetap

Di sini, kita akan menonaktifkan bilah navigasi tetap. Kami perlu menonaktifkan opsi ini untuk sepenuhnya menghilangkan bilah menu utama di halaman kami nanti di tutorial ini.

• Bilah Navigasi Tetap: Dinonaktifkan

Sembunyikan Bilah Menu Utama di Halaman

Aktifkan Pembuat Visual di Halaman Arahan Paket Tata Letak Pialang Hipotek

Lanjutkan dengan membuka halaman yang telah Anda buat menggunakan halaman arahan Paket Tata Letak Pialang Hipotek dan aktifkan Visual Builder.

Buka Pengaturan Halaman

Kami akan menyembunyikan bilah menu utama di halaman kami dengan menambahkan beberapa kode CSS. Untuk menambahkan kode ini, buka pengaturan halaman.

Tambahkan Kode CSS Khusus untuk Menyembunyikan Bilah Menu Utama

Lalu, buka tab lanjutan dan tempatkan baris kode CSS berikut di kotak CSS Kustom:

#main-header {
display: none;
}

Menambahkan kode ini akan membantu mencegah bilah menu utama muncul di halaman.

Buat Desain Menu Kustom dengan Divi

Pastikan Ada Cukup Padding Atas di Bagian Pahlawan Di Semua Ukuran Layar

Sekarang setelah kami menyingkirkan bilah menu utama di halaman kami, kami dapat mulai menambahkan bilah menu gesek sebagai gantinya! Hal pertama yang perlu Anda lakukan adalah memastikan bahwa ada cukup bantalan di bagian atas halaman Anda sehingga bilah menu geser tidak akan tumpang tindih dengan konten yang ada. Khususnya untuk halaman arahan Paket Tata Letak Pialang Hipotek, itu berarti memastikan bantalan kustom kolom 1 tetap '180px' di semua ukuran layar.

• Padding Atas: 180px

Tambahkan Bagian Reguler Baru ke Bawah Halaman

Saatnya mulai membuat bilah menu gesek khusus! Tambahkan bagian reguler ke bagian bawah halaman Anda.

Jarak

Buka pengaturan bagian dan hapus semua bantalan atas dan bawah default.

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

Menambahkan baris

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Buka pengaturan baris dan ubah warna latar belakang baris menjadi putih.

• Warna Latar Belakang: #ffffff

Perekat

Kemudian, buka pengaturan baris dan ubah pengaturan ukuran untuk memungkinkan baris memenuhi seluruh lebar layar:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua bantalan atas dan bawah berikutnya.

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

Bayangan Kotak

Dan untuk memastikan ada cukup kedalaman antara bilah menu geser dan halaman itu sendiri, kita akan menambahkan bayangan kotak.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba (0,0,0,0.55)

Tambahkan Modul Gambar

Unggah Logo Perusahaan

Saatnya mulai menambahkan semua modul yang ingin kita tampilkan di bilah menu geser, dimulai dengan Modul Gambar. Upload logo Anda menggunakan file gambar dengan lebar 226px dan tinggi 100px.

Penyelarasan

Lalu, buka tab desain Modul Gambar dan ubah perataan gambar.

• Penjajaran Gambar: Tengah

Perekat

Ubah pengaturan ukuran gambar selanjutnya.

• Lebar Maks: 75% (Desktop), 100% (Tablet & Ponsel)

Jarak

Dan tambahkan beberapa bantalan atas dan bawah khusus ke gambar juga.

• Padding Atas: 15px (Tablet), 25px (Ponsel)
• Padding Bawah: 15px (Tablet), 25px (Ponsel)

Tambahkan Modul Tombol

Tambahkan Salinan

Modul kedua yang kita butuhkan adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Penyelarasan

Lalu, buka tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Ubah tampilan tombol berikutnya.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 0.8vw (Desktop), 1.4vw (Tablet), 2.1vw (Ponsel)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #40eccc
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 50px
• Jarak Huruf Tombol: 2px
• Font Tombol: Lato
• Berat Huruf: Berat
• Gaya Font: Huruf Besar

Jarak

Dan buat bentuk yang Anda inginkan menggunakan margin kustom dan nilai padding.

• Margin Atas: 15px
• Margin Bawah: 15px
• Padding Atas: 15px
• Padding Bawah: 15px
• Padding Kiri: 40px
• Padding Kanan: 40px

Tambahkan Modul Teks #1

Tambahkan Item Menu ke Kotak Konten

Modul berikutnya yang kita butuhkan di bilah menu gesek adalah Modul Teks. Di sini, kita akan menambahkan judul halaman ke kotak konten.

Tambahkan Tautan

Pindah ke pengaturan tautan dan tambahkan tautan yang benar ke Modul Teks.

Warna latar belakang

Ubah warna latar belakang berikutnya.

• Warna Latar Belakang: #f2f2f2

Pengaturan Teks

Kemudian, ubah pengaturan teks.

• Font Teks: Lato
• Berat Font Teks: Tebal
• Warna Teks: #000000
• Ukuran Teks: 0.9vw (Desktop), 1.9vw (Tablet), 2.4vw (Telepon)
• Orientasi Teks: Tengah

Jarak

Dan tambahkan beberapa bantalan atas dan bawah khusus ke modul juga.

• Padding Atas: 30px
• Padding Bawah: 30px

Modul Teks Klon x5 Kali

Setelah Anda selesai memodifikasi Modul Teks, Anda dapat melanjutkan dan mengkloningnya 5 kali.

Ubah Salin

Pastikan Anda mengubah judul halaman di setiap duplikat ini.

Ubah Tautan

Bersama dengan tautan.

Ubah Warna Latar Belakang

Ubah warna latar belakang item menu kedua, keempat dan keenam berikutnya.

• Warna Latar Belakang: #ffffff

Tambahkan CSS Khusus ke Baris

Elemen Utama

Sekarang, untuk memastikan bilah menu geser menempel di bagian atas halaman, kita perlu menambahkan beberapa baris kode CSS ke elemen utama baris.

position:fixed;
top: 0px;
z-index: 99;

Elemen Utama Kolom

Kami juga mengubah kolom menjadi kotak yang memungkinkan kami untuk menggulir. Persentase yang dapat Anda lihat dalam kode CSS di bawah ini menunjukkan berapa banyak ruang yang digunakan masing-masing modul di dalam kisi. Anda dapat mengubah nilai ini jika Anda ingin kisi Anda terlihat berbeda.

overflow-x: scroll;
display: grid;
grid-template-columns: 15% 45% 25% 25% 25% 25% 25% 25%;

Kelas CSS Kolom

Dan untuk menghilangkan scrollbar, kita akan menambahkan kelas CSS ke baris juga.

Hapus Bilah Gulir

Di Halaman

Anda dapat menghapus scrollbar pada halaman itu sendiri dengan membuka pengaturan halaman dan menambahkan baris kode CSS berikut ke kotak Custom CSS:

.swipe-menu::-webkit-scrollbar {
display: none;
}

Di Seluruh Situs Web

Jika Anda tidak ingin mengulangi langkah yang sama untuk menyembunyikan bilah gulir pada setiap halaman satu per satu, Anda juga dapat membuka opsi tema Divi dan membuat kode CSS berlaku untuk seluruh situs web dengan menggulir ke bawah tab umum dan menambahkan baris berikut kode CSS ke kotak CSS Kustom:

.swipe-menu::-webkit-scrollbar { display: none; }

Simpan sebagai Bagian sebagai Barang Global

Setelah bilah menu gesek Anda berfungsi dengan baik, Anda dapat menyimpannya ke perpustakaan Divi Anda sebagai item global dan menggunakannya di halaman lain juga!

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 membuat bilah menu geser untuk situs web apa pun yang Anda buat menggunakan Divi. Ini adalah teknik yang bagus untuk menambahkan dimensi lain ke situs web Anda. Tutorial ini adalah bagian dari inisiatif desain Divi kami yang sedang berlangsung, di mana kami mencoba memasukkan sesuatu yang ekstra ke dalam kotak peralatan desain Anda setiap minggu. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!