Cara Membuat Navigasi Standar dan Vertikal Tumpang Tindih di Situs Web Divi Anda

Dalam posting ini, kami akan menunjukkan cara menggabungkan navigasi standar dan vertikal. Lebih spesifik; cara membuat menu sekunder dan footer tumpang tindih dengan navigasi vertikal di situs web Anda. Itu berarti Anda tidak perlu memilih antara memiliki navigasi teratas atau navigasi vertikal; Anda bisa melakukan keduanya! Anda dapat mengatur menu utama dan menu sekunder sesuai keinginan Anda dalam Penyesuai Tema Anda, bukan itu yang akan kami bantu Anda capai dalam posting ini secara eksplisit. Kami lebih suka menunjukkan kepada Anda hal-hal berikut yang membantu dalam proses melakukan hal-hal berikut:

• cara membuat menu sekunder Anda tumpang tindih dengan navigasi vertikal Anda
• cara membuat menu sekunder Anda diperbaiki saat menggulir
• bagaimana membuat footer Anda tumpang tindih dengan navigasi vertikal Anda

Ini semua adalah hal yang akan membantu Anda menciptakan keseimbangan yang baik antara navigasi standar dan vertikal di situs web Anda. Dengan membuat navigasi standar dan vertikal tumpang tindih, situs web Anda tidak akan terasa seperti didominasi oleh navigasi vertikal. Konten utama di situs web Anda akan menyesuaikan diri dengan navigasi vertikal tetapi menu dan footer sekunder akan berperilaku dengan cara yang sama ketika navigasi vertikal tidak diaktifkan.

Hasil

Pada akhir tutorial ini, Anda akan dapat mencapai hasil berikut di situs web yang menggunakan navigasi vertikal:

Inspirasi untuk Navigasi Standar dan Vertikal yang Tumpang Tindih

Pada postingan sebelumnya, kami telah membagikan beberapa contoh situs web yang menggunakan navigasi vertikal. Semua contoh menunjukkan kepada kami betapa kreatifnya Anda dengan opsi Divi yang tidak terlalu sering digunakan. Navigasi vertikal yang dipikirkan dengan matang di situs web Anda dapat memberikan interaksi ekstra yang ingin Anda capai dengan pengunjung Anda.

Sambil menunjukkan contoh, ada beberapa komentar yang menginspirasi kami untuk menunjukkan kepada Anda bagaimana mencapai hasil tertentu. Posting ini adalah salah satu tutorial berbasis inspirasi yang akan menunjukkan kepada Anda bagaimana membuat beberapa tweak ke situs web Anda tanpa harus mencari solusi sendiri.

Kami terinspirasi oleh situs web Alex Brands yang menggunakan menu sekunder di bagian atas dan navigasi vertikal di sisi kiri halaman.

Saat menggulir, menu sekunder bergulir. Ini memberikan sedikit sentuhan ekstra yang bagus ke situs web dan membantu menjaga fokus pada konten di dalam menu sekunder. Alex Brands adalah situs web e-niaga dan menu sekunder tetap membantu mengingatkan orang apa yang ada di keranjang belanja mereka dan penawaran yang mereka tawarkan.

Navigasi vertikal semacam ini sangat menarik untuk situs web e-niaga. Navigasi vertikal memudahkan pengunjung untuk menavigasi melalui berbagai kategori item yang ditawarkan di situs web. Lebih mudah untuk mengikuti item menu saat mereka berada di navigasi vertikal karena lebih mudah ditafsirkan sebagai daftar yang harus dilalui orang.

Cara Membuat Navigasi Standar dan Vertikal Tumpang Tindih di Situs Web Divi Anda

Berlangganan Saluran Youtube Kami

Langkah Umum

Sebelum kita masuk ke bagian di mana kami menunjukkan kepada Anda bagaimana membuat navigasi standar Anda tumpang tindih dengan navigasi vertikal Anda, kita akan melalui langkah-langkah umum terlebih dahulu. Langkah-langkah umum ini adalah dasar yang harus Anda lalui sebelum menerapkan tumpang tindih.

Tanpa jatuh tempo lebih lanjut; mari kita mulai.

Buat Menu Anda & Tambahkan Item Menu

Hal pertama yang perlu Anda lakukan (jika Anda belum melakukannya) adalah menambahkan menu dan item menu ke situs web Anda. Ini adalah item menu yang akan muncul dalam navigasi vertikal Anda. Untuk menambahkan menu baru ke situs web Anda, buka Dasbor WordPress > Tampilan > Menu. Setelah Anda berada di halaman itu, beri judul menu baru Anda dan buat menu tersebut.

Lanjutkan dengan menambahkan item menu dan menjadikannya menu utama Anda.

Tambahkan Ikon Sosial ke Menu Sekunder

Hal berikutnya yang perlu Anda lakukan adalah mengaktifkan menu sekunder Anda. Untuk memastikan menu sekunder muncul di situs web Anda, menu sekunder Anda harus memiliki elemen yang diaktifkan. Dalam posting ini, kami hanya akan menambahkan ikon media sosial, tetapi Anda tentu saja dapat menambahkan apa pun yang Anda suka.

Untuk mengaktifkan menu sekunder dan menampilkan ikon sosial, mulailah dengan masuk ke Dasbor WordPress > Sesuaikan > Header & Navigasi > Elemen Header > Aktifkan opsi 'Tampilkan Ikon Sosial'.

Aktifkan Navigasi Vertikal

Langkah selanjutnya yang harus Anda ambil adalah mengaktifkan navigasi vertikal di dalam pembuat Divi Anda. Untuk melakukannya, buka Dasbor WordPress > Tampilan > Kustomisasi > Header & Navigasi > Format Header > Aktifkan navigasi vertikal.

Selain itu, Anda juga dapat memilih di mana Anda ingin menampilkan navigasi vertikal Anda; di sisi kiri atau kanan situs web Anda.

Nonaktifkan Navigasi Tetap Untuk Menu Utama Anda

Sebelum kita beralih ke modifikasi lanjutan, ada satu hal terakhir yang harus dilakukan: menonaktifkan navigasi tetap untuk menu utama Anda. Jika Anda telah menonaktifkan menu utama, lewati langkah ini. Namun, jika menu utama Anda saat ini sudah diperbaiki, buka Dasbor WordPress > Divi > Opsi Tema > Dan nonaktifkan navigasi tetap.

Gabungkan Navigasi Standar & Vertikal

Di bagian selanjutnya dari posting ini, kami akan menunjukkan kepada Anda bagaimana membuat navigasi standar dan vertikal Anda menjadi sesuatu yang berbeda dari biasanya. Ketika berbicara tentang navigasi vertikal, kita terbiasa melihat bagian layar yang ditutupi olehnya. Menu sekunder dan footer, secara default, tidak akan melewati navigasi vertikal.

Namun dalam beberapa kasus, kami ingin memastikan navigasi sekunder dan footer berada di atas navigasi vertikal. Dengan begitu, satu-satunya hal yang akan bergantung pada navigasi vertikal adalah konten utama. Situs web Anda tidak akan terasa seperti terbagi sepenuhnya di dua tempat; navigasi vertikal dan sisa situs web.

Tambahkan Kode CSS ke Opsi Tema

Anda dapat menambahkan kode CSS dengan dua cara: melalui Opsi Tema Divi atau melalui Penyesuai Tema. Untuk menambahkan kode ke Opsi Tema, buka Dasbor WordPress > Divi > Opsi Tema > Umum > Gulir ke bawah tab dan tempel baris kode CSS berikut ke dalam kotak CSS Kustom:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Tambahkan Kode CSS ke Penyesuai Tema

Kemungkinan lain yang Anda miliki adalah menambahkan baris kode CSS ke Penyesuai Tema. Untuk melakukannya, buka Dasbor WordPress > Tampilan > Kustomisasi > CSS Tambahan > Dan tempel baris CSS di bidang CSS Khusus:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menggabungkan navigasi standar dan vertikal di situs web Anda. Lebih tepatnya; kami telah menunjukkan kepada Anda cara membuat menu sekunder dan footer tumpang tindih dengan navigasi vertikal Anda dan cara memperbaiki menu sekunder Anda. Jika Anda memiliki pertanyaan atau saran; jangan ragu untuk meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan dengan Desain garis / shutterstock.com