Cara Membuat Menu Navigasi Vertikal (atau Header) untuk Situs Web Divi Anda

Menu navigasi vertikal dapat berguna untuk situs web tertentu yang membutuhkan lebih banyak item menu di garis depan. Menu horizontal mungkin sulit untuk memuat semua tautan menu yang diperlukan, terutama pada lebar browser yang lebih kecil. Dalam tutorial ini, kami akan menunjukkan cara membuat menu navigasi vertikal kustom menggunakan Divi Theme Builder. Ini akan memberi Anda lebih banyak ruang untuk menampilkan item menu WordPress Anda. Dan Anda akan memiliki kekuatan penuh untuk menambahkan Modul Divi tambahan ke header vertikal dan mendesainnya dengan Divi builder.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, 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

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengunggah template, navigasikan ke Divi Theme Builder di bagian belakang situs WordPress Anda.

Unggah Template Situs Web Default Global

Kemudian, di sudut kanan atas, Anda akan melihat ikon dengan dua panah. Klik pada ikon.

Arahkan ke tab impor, unggah file JSON yang dapat Anda unduh di posting ini, dan klik 'Impor Template Pembuat Tema Divi'.

Simpan Perubahan Pembuat Tema Divi

Setelah Anda mengunggah file, Anda akan melihat header dan footer global baru di templat situs web default Anda. Simpan perubahan Divi Theme Builder segera setelah Anda ingin template diaktifkan.

Langsung saja ke tutorialnya ya?

Bagian 1: Membangun Header Global Baru

Untuk tutorial ini, kita akan membuat menu navigasi vertikal di Global Header menggunakan Divi Theme Builder. Namun, kami akan menunjukkan kepada Anda cara menambahkan menu yang sama ke badan templat halaman di akhir posting, untuk berjaga-jaga jika Anda ingin menggunakannya selain menu utama situs Anda.

Untuk memulai, buka Dasbor WordPress dan arahkan ke Divi > Theme Builder.

Kemudian klik area “Add Global Header” dari Default Website Template dan pilih “Build Global Header” dari dropdown.

Kemudian pilih opsi "Bangun dari Awal".

Bagian 2: Mendesain Tata Letak Bagian Vertikal

Di dalam Editor Tata Letak Header Global, buka pengaturan bagian reguler yang sudah ada dan perbarui yang berikut ini.

• Lebar (desktop): 300px
• Lebar (tablet dan ponsel): 100%

• Tinggi (desktop): 100vh
• Tinggi (tablet dan ponsel): otomatis

• Padding (desktop): 4vh atas, 0px bawah
• Padding (tablet dan ponsel): 0px atas, 0px bawah

Lanjutkan desain dengan menambahkan bayangan kotak sebagai berikut:

• Bayangan Kotak: lihat tangkapan layar
• Posisi Vertikal Bayangan Kotak: 0px
• Kekuatan Buram Bayangan Kotak: 20px
• Kekuatan Penyebaran Bayangan Kotak: -10px
• Warna Bayangan: rgba(0,0,0,0.3)

Untuk memastikan menu navigasi vertikal tetap terlihat di sebelah kiri saat pengguna menggulir, perbarui posisinya menjadi tetap dan perbarui indeks z sebagai berikut:

• Posisi: Tetap
• Indeks Z: 9999

Untuk memastikan bahwa kita akan dapat melihat navigasi submenu yang akan diperluas di luar bagian, tambahkan CSS khusus berikut ke elemen utama:

overflow: visible !important;

Sekarang bagian Anda berada dalam tata letak vertikal di sisi kiri template.

Bagian 3: Mendesain Menu Vertikal

Dengan bagian di tempat, kami siap untuk merancang menu vertikal. Untuk melakukan ini, kita akan menggunakan modul menu dengan beberapa CSS khusus untuk mengatur gaya navigasi agar ditampilkan secara vertikal.

Kami juga akan menggunakan satuan panjang vh sehingga menu akan menskalakan dengan baik dengan ketinggian browser yang berbeda.

Menambahkan Baris

Untuk memulai, tambahkan baris satu kolom ke bagian.

Kemudian perbarui pengaturan baris sebagai berikut:

Ukuran dan Bantalan

• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 80%
• Padding (desktop): 3vh atas, 3vh bawah
• Padding (tablet dan ponsel): 0px atas, 0px bawah

Berbatasan

• Lebar Perbatasan: 1px
• Warna Perbatasan: #eeeeee

Menambahkan Modul Menu

Di dalam baris satu kolom, tambahkan Modul Menu baru.

Pilih menu yang akan ditampilkan di bawah sakelar konten.

Kemudian tambahkan Logo Situs Anda sebagai konten dinamis di bawah sakelar Logo.

Di bawah tab desain, perbarui yang berikut ini:

• Gaya: Terpusat
• Font Menu: Nunito Sans
• Warna Teks Menu: #535b7c
• Ukuran Teks Menu: 18px (desktop), 14px (tablet dan ponsel)
• Tinggi Baris Menu: 2em
• Warna Garis Menu Dropdown: #535b7c
• Warna Tautan Aktif Menu Dropdown: #535b7c

• Warna Ikon Keranjang Belanja: #535b7c
• Warna Ikon Pencarian: #535b7c
• Warna Ikon Menu Hamburger: #535b7c

• Padding (desktop): 2vh atas, 2vh bawah
• Padding (desktop): 10px atas, 10px bawah

Bagian 4: Menambahkan CSS Kustom untuk Menu

Menu membutuhkan beberapa CSS khusus untuk mendapatkan navigasi vertikal yang ingin kita capai. Untuk memulai, buka tab lanjutan dan tambahkan CSS khusus berikut ke Tautan Menu dan Logo Menu.

Menu Tautan CSS (desktop):

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

Menu Tautan CSS (tablet):

width: auto;
border:none;

CSS Logo Menu:

margin-bottom: 20px;

Selanjutnya, tambahkan Kelas CSS khusus ke modul menu sebagai berikut:

Kelas CSS: et-vert-menu

Itu akan digunakan untuk menargetkan menu khusus ini di CSS kustom eksternal kami, kami akan menambahkan menggunakan modul kode.

Menambahkan CSS Kustom dengan Modul Kode

Di bawah modul menu, tambahkan modul kode baru.

Kemudian tempel kode berikut ke dalam kotak kode (pastikan untuk menempatkannya di antara tag gaya):

/*Style Vertical Navigation Menu*/  
.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: 10px 0 !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 all and (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;
}
}

Bagian 5: Mendesain 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 Baris

Tambahkan baris satu kolom baru di bawah baris saat ini.

Menambahkan Tombol

Kemudian tambahkan modul tombol baru ke baris.

Perbarui pengaturan tombol sebagai berikut:

• Penjajaran Tombol: tengah
• Ukuran Teks Tombol: 18px (desktop), 14px (tablet dan ponsel)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #535b7c
• Lebar Batas Tombol: 0px

Lalu buka tab lanjutan dan tempel 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 Media Sosial.

Tambahkan Jejaring Sosial yang Anda inginkan di bawah tab konten.

Di bawah tab Desain, perbarui yang berikut ini:

• Penyelarasan Modul: Pusat
• Warna Ikon: #535b7c

Kemudian buka pengaturan masing-masing jaringan dan hapus warna latar belakang.

Kemudian tambahkan sedikit margin atas sebagai berikut:

• Margin: 3vh atas

Perbarui Pengaturan Baris

Setelah ikon ikuti media sosial selesai, buka pengaturan baris dan sesuaikan yang berikut:

• Lebar Talang: 1
• Padding (desktop): 3vh atas, 0px bawah
• Padding (tablet dan ponsel): 10px atas

Simpan Tata Letak dan Template

Setelah selesai, simpan tata letak dan template.

Hasil Akhir

Berikut adalah hasil akhir pada halaman langsung.

Cara Menambahkan Menu Navigasi Vertikal ke Area Tubuh Template Halaman

Jika Anda ingin menambahkan menu navigasi vertikal ke tata letak halaman (bukan header global Anda), Anda harus terlebih dahulu menyimpan tata letak bagian ke Perpustakaan Divi.

Untuk melakukan ini, buka Editor Tata Letak Header Global dan simpan bagian vertikal (berisi menu) ke Perpustakaan Divi Anda.

Kemudian keluar dari editor tata letak dan buat templat baru dan tetapkan ke halaman apa pun yang Anda inginkan. Klik untuk membuat badan khusus untuk templat halaman.

Pilih untuk membangunnya dari awal.

Tambahkan bagian lebar penuh baru ke tata letak.

Kemudian tambahkan Modul Konten Posting Lebar Penuh ke bagian tersebut.

Hapus bagian reguler default di bagian atas halaman dan kemudian buka pengaturan untuk bagian lebar penuh dan tambahkan CSS khusus berikut ke Elemen Utama:

Elemen Utama CSS (desktop)

width: calc(100% - 300px);
margin-left:300px !important;

Elemen Utama CSS (tablet)

width: 100%;

Di bawah bagian reguler, klik untuk menambahkan bagian baru dan, di bawah tab Tambahkan Dari Pustaka, pilih bagian menu vertikal yang sebelumnya telah Anda simpan ke pustaka.

Karena kami tidak ingin bagian ditampilkan di ponsel, buka pengaturan bagian dan nonaktifkan visibilitas bagian di tablet dan ponsel.

Kemudian buka modul kode di dalam tata letak bagian dan ganti cuplikan kode ini…

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Dengan ini…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Ini akan memindahkan header dan footer utama agar sesuai dengan menu vertikal tetap di sebelah kiri template halaman. Inilah tampilannya di halaman langsung menggunakan header dan footer default Divi.

Pikiran Akhir

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. Anda juga dapat mengubah luapan vertikal menjadi menggulir untuk memberi pengguna kemampuan untuk menggulir item menu (perhatikan saja bahwa Anda tidak akan dapat melihat/menggunakan submenu dengan pengaturan luapan ini).

Pengaturan bagian vertikal membuka pintu untuk membuat beberapa bilah samping khusus juga. Saya harap ini berguna untuk proyek-proyek masa depan.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!