Apakah Anda ingin membuat menu navigasi vertikal sehingga menyajikan lebih banyak item di latar depan di DIVI?
Menu navigasi vertikal dapat berguna untuk beberapa situs web yang membutuhkan lebih banyak item menu di latar depan. Menu horizontal bisa jadi sulit untuk menyesuaikan semua tautan menu yang diperlukan, terutama pada lebar browser yang lebih kecil.
Dalam tutorial ini, kami akan menunjukkan cara membuat menu navigasi vertikal menggunakan Divi Theme Builder.
Ini akan memberi Anda lebih banyak ruang untuk menampilkan item menu WordPress Anda.
Ayo mulai!
penelitian
Berikut sekilas desain yang akan kita buat dalam tutorial ini.
Mari kita pergi ke tutorial.
Membuat Header Global Baru
Untuk tutorial ini, kita akan membuat menu navigasi vertikal di header global menggunakan pembuat tema Divi
Untuk memulai, buka dasbor WordPress dan navigasikan ke Divi > Theme Builder.
Kemudian klik pada area "Tambahkan tajuk global". templat situs web default dan pilih "Build Global Header" dari daftar drop-down.
Baca juga: Cara Membuat Header Global dengan Pembuat Tema di DIVI
Desain tata letak bagian vertikal
Di editor tata letak tajuk global, buka pengaturan bagian reguler yang sudah ada dan perbarui yang berikut ini.
- Lebar maksimum: 300px
- Tinggi: 100vh
- Margin Dalam: Atas 4vh, Bawah 0px
Lanjutkan kustomisasi dengan menambahkan kotak bayangan sebagai berikut:
- Kotak bayangan: lihat tangkapan layar
- Posisi vertikal bayangan kotak: 0px
- Kekuatan blur bayangan kotak: 20px
- Kekuatan Penyebaran Bayangan Kotak: -10px
- Warna bayangan: rgba (0,0,0,0.3)
Untuk memastikan bahwa menu navigasi vertikal tetap terlihat di sebelah kiri saat pengguna menggulir, perbarui tab Lanjutan ke posisi tetap dan perbarui indeks-z sebagai berikut:
- Stasiun tetap
- Z-indeks: 9999
Untuk memastikan bahwa kita dapat melihat navigasi submenu yang akan meluas di luar bagian, tambahkan CSS khusus berikut ke elemen utama:
overflow: visible !important;
Bagian Anda sekarang akan berada dalam tata letak vertikal di sisi kiri template.
Rancang menu vertikal
Dengan bagian di tempatnya, kami siap mendesain menu vertikal. Untuk melakukan ini, kami akan menggunakan modul menu dengan CSS khusus untuk menyesuaikan navigasi agar ditampilkan secara vertikal.
Kami juga akan menggunakan unit panjang vh sehingga menu beradaptasi dengan baik dengan ketinggian browser yang berbeda.
Menambahkan garis
Untuk memulai, tambahkan baris ke kolom di bagian.
Selanjutnya, perbarui parameter baris sebagai berikut:
Ukuran dan Spasi
- Gunakan Lebar Talang Kustom: YA
- Jarak kolom: 1
- Lebar maksimum: 100%
- Lebar maksimum: 80%
- Margin Internal: 3vh Atas, 3vh Bawah
Perbatasan
- Lebar batas: 1px
- Warna batas: #eeeeee
Menambahkan modul Menu
Di dalam baris satu kolom, tambahkan modul Menu baru.
Pilih menu untuk ditampilkan di tab Isi.
Kemudian tambahkan logo Anda situs web sebagai isi dinamis di bawah tombol Logo.
Di bawah tab Gaya perbarui yang berikut ini:
- Gaya: Terpusat
- Menu Font: Nunito Sans
- Warna teks menu: #535b7c
- Menu Ukuran Teks: 18px (desktop), 14px (tablet dan ponsel)
- Tinggi baris menu: 2 em
- Warna baris tarik-turun: #535b7c
- Menu tarik-turun Warna Tautan Aktif: #535b7c
- Warna ikon keranjang: #535b7c
- Warna ikon pencarian: #535b7c
- Warna ikon Menu Hamburger: #535b7c
- Margin Internal: 2vh Atas, 2vh Bawah
Menambahkan CSS khusus untuk menu
Menu membutuhkan CSS khusus untuk mencapai navigasi vertikal yang ingin kita capai. Untuk memulai, buka tab lanjutan dan tambahkan CSS khusus berikut ke tautan menu dan logo menu.
Tautan menu CSS (desktop):
width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;
Tautan menu CSS (tablet):
width: auto;
border:none;
Logo CSS menu:
margin-bottom: 20px;
Selanjutnya, tambahkan kelas CSS khusus ke modul Menu sebagai berikut:
Kelas CSS: et-vert-menu
Kelas ini akan digunakan untuk menargetkan menu khusus ini di CSS kustom eksternal kami yang akan kami tambahkan menggunakan modul Kode.
Menambahkan CSS khusus dengan modul Kode
Di bawah modul Menu, tambahkan modul Kode.
Kemudian tempel kode berikut ke dalam kotak kode (pastikan untuk meletakkannya di antara tag gaya):
/* MenudeNavigation Style Vertical*/
.et-vert-menu .et_pb_menu__menu>nav>ul {
flex-direction: column;
margin-left: 0px!important;
margin-right: 0px!important;
width: 100%;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
margin: 10px0!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
display:block!important;
padding: 0px!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul ul {
padding: 0px!important;
top: 0px!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
left:calc(100%- 1px) !important;
top:0px!important;
}
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
content: "5"!important; /*change arrow icon for submenu*/
right: 20px!important;
}
.et-vert-menu .nav li ul {
left: calc(100%- 1px) !important; /*align submenu to the right of menu link*/
}
@media alland (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
width: 100%; /*width of the vertical navigation menu*/
}
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/
#et-main-area {
width: calc(100%- 300px);
margin-left: 300px;
}
}
Rancang tombol dan ikon ikuti media sosial
Sekarang setelah menu selesai, kita dapat menambahkan tombol dan beberapa tautan mengikuti media sosial untuk melengkapi tajuk vertikal.
Menambahkan garis
Tambahkan baris baru satu kolom di bawah baris saat ini.
Menambahkan tombol
Kemudian tambahkan modul Button ke baris.
Perbarui pengaturan tombol sebagai berikut:
- Penjajaran tombol: tengah
- Gunakan gaya khusus untuk Tombol: YA
- Ukuran teks tombol: 18px (desktop), 14px (tablet dan ponsel)
- Warna teks tombol: #ffffff
- Warna latar belakang tombol: #535b7c
- Lebar batas tombol: 0 piksel
Selanjutnya, buka tab lanjutan dan rekatkan CSS khusus berikut ke elemen utama:
Elemen utama CSS (desktop)
display:block;
width: 100%;
Elemen utama CSS (tablet)
display:inherit;
Menambahkan ikon ikuti media sosial
Di bawah tombol, tambahkan modul Ikuti kami di media sosial.
Tambahkan jejaring sosial yang Anda inginkan di bawah tab isi.
Pada tab Gaya, perbarui yang berikut ini:
- Penyelarasan Modul: Pusat
- Warna ikon: #535b7c
Kemudian buka pengaturan untuk masing-masing jejaring sosial dan hapus warna latar belakang.
Kemudian tambahkan margin atas kecil sebagai berikut:
- Margin: Puncak 3vh
Perbarui parameter garis
Setelah Ikon Ikuti Media Sosial selesai, buka Pengaturan Baris dan sesuaikan yang berikut:
- Gunakan Lebar Talang Kustom: YA
- Jarak kolom: 1
- Margin Dalam: Atas 3vh, Bawah 0px
Simpan tata letak dan template
Setelah selesai, simpan tata letak dan template.
Hasil akhir
Berikut adalah hasil akhirnya pada halaman langsung.
Unduh DIVI Sekarang!!!
Kesimpulan
Menu navigasi vertikal yang ditampilkan di sini telah diberi posisi tetap. Namun, jika Anda membutuhkan lebih banyak ruang untuk item menu atau konten tambahan, Anda dapat mengubah posisi bagian menjadi absolut
Pengaturan bagian vertikal juga membuka pintu untuk membuat bilah samping khusus.
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.
...
