Cara Membuat Navigasi Vertikal dengan Divi yang Mendorong Bisnis

Dalam tutorial Divi hari ini, kami akan menunjukkan cara membuat navigasi vertikal yang mendorong bisnis untuk situs web Anda. Navigasi vertikal yang akan kami tunjukkan cara membuatnya biasanya akan digunakan untuk bisnis yang menganggap penting agar pengunjung segera bertindak. Misalnya, jika Anda memiliki restoran yang memungkinkan pelanggan memesan secara online, Anda mungkin ingin situs web Anda membantu pengunjung bertindak cepat.

Navigasi vertikal yang akan kami tunjukkan cara membuatnya akan berisi informasi penting dan ajakan bertindak, bukan halaman. Termasuk ini dalam navigasi vertikal akan merangsang pengunjung untuk memesan dan, dengan demikian, meningkatkan tingkat konversi situs web.

Hasil

Sebelum menyelami langkah-langkah dan inspirasi yang berbeda, mari kita lihat hasil navigasi vertikal yang dapat Anda capai di akhir posting ini:

Selain menunjukkan cara menambahkan semua item menu yang berbeda ke navigasi vertikal, kami juga akan menggunakan navigasi tetap. Dengan begitu, Anda yakin info tersebut mengikuti pengunjung di seluruh satu halaman.

Inspirasi

Inspirasi yang kami miliki untuk navigasi vertikal yang mendorong bisnis ini berasal dari situs web yang telah kami pamerkan di posting sebelumnya. Dalam posting itu, kami telah mencantumkan 12 situs web yang menggunakan navigasi vertikal untuk tujuan situs web mereka sendiri. Salah satu contoh yang menarik perhatian orang adalah website Eat Thai Restaurant. Navigasi vertikal mereka adalah salah satu konsep out-of-the-box. Situs web mereka adalah satu halaman tetapi mereka menemukan cara yang bagus untuk tetap menggunakan kemungkinan navigasi. Situs web mereka terlihat seperti ini:

Cara Membuat Navigasi Vertikal dengan Divi yang Mendorong Bisnis

Berlangganan Saluran Youtube Kami

Aktifkan Navigasi Vertikal

Untuk memulai, kita harus mengaktifkan opsi navigasi vertikal yang ditawarkan Divi. Untuk melakukannya, buka Dasbor WordPress > Tampilan > Header & Navigasi > Format Header > Aktifkan Navigasi Vertikal.

Aktifkan Navigasi Tetap

Navigasi vertikal yang kami buat ulang, seperti situs web Eat Thai Restaurant, akan diperbaiki. Untuk memperbaiki navigasi vertikal Anda, buka Dasbor WordPress > Divi > Opsi Tema > tab Umum > Aktifkan Navigasi Tetap.

Pengaturan Menu Utama (Penyesuai Tema)

Hal berikutnya yang perlu Anda lakukan adalah membuat beberapa perubahan pada Menu Utama Anda. Jika Anda menggunakan Dasbor WordPress, buka Appearance > Customize > Header & Navigation > Primary Menu Bar . Setelah Anda berada di sana, Anda dapat membuat perubahan berikut (atau perubahan lain yang ingin Anda buat):

• Sembunyikan Gambar Logo: Nonaktifkan
• Tinggi Maks Logo: 100
• Margin Atas Menu: 0
• Ukuran Teks: 14
• Spasi Huruf: -1
• Font: Lato Light
• Warna Teks: #FFFFFF
• Warna Tautan Aktif: #FFFFFF
• Warna Latar Belakang: #004159
• Warna Latar Menu Dropdown: #004159

Pengaturan Menu Navigasi Tetap (Penyesuai Tema)

Hal terakhir yang perlu kita lakukan di Penyesuai Tema adalah memastikan logo muncul saat menggulir juga. Jika Anda masih menggunakan Penyesuai Tema, buka Header & Navigasi > Pengaturan Navigasi Tetap > Dan pastikan opsi 'Sembunyikan Logo' dinonaktifkan.

Tambahkan Item Menu

Selanjutnya, kita akan menambahkan item menu ke navigasi vertikal kita. Bagian posting ini mungkin akan menghabiskan sebagian besar waktu Anda. Anda harus menambahkan masing-masing item satu per satu melalui tautan khusus.

Aktifkan Kelas CSS

Tetapi sebelum kita mulai menambahkan item menu, Anda harus memastikan opsi Kelas CSS diaktifkan. Opsi ini memungkinkan Anda untuk menetapkan kelas ke masing-masing item menu satu per satu. Dalam hal ini, itu perlu karena sebagian besar item akan memiliki pengaturan gayanya sendiri. Untuk mengaktifkan opsi Kelas CSS, klik 'Opsi Layar' di kanan atas halaman Menu dan aktifkan opsi Kelas CSS seperti yang ditunjukkan pada tangkapan layar di bawah ini.

Tambahkan Menu Baru

Setelah Anda mengaktifkan kelas CSS untuk item menu Anda, Anda dapat melanjutkan dan membuat menu baru. Beri nama dan pastikan Anda menjadikan menu baru ini sebagai menu utama Anda.

Setelah menambahkan semua item menu (yang akan kami tunjukkan langkah demi langkah), menu Anda akan terlihat seperti ini di bagian belakang:

Nomor telepon

Karena ini adalah satu halaman, tidak akan ada halaman yang disertakan dalam menu. Semua item yang akan kita tambahkan ke menu akan menjadi tautan khusus. Ini memberi kita kemungkinan untuk bermain-main dengan hal-hal yang ingin kita tambahkan.

Untuk menambahkan item menu pertama Anda, klik Tautan Khusus dan tambahkan nomor telepon di bidang Label Navigasi. Anda dapat memilih apakah Anda ingin menambahkan URL ke sana atau tidak. Namun, saat menambahkan item menu ke menu, Anda harus mengisi URL. Setelah item menu ditambahkan ke menu Anda, Anda dapat menghapus URL dan Anda akan yakin bahwa tidak akan terjadi apa-apa ketika seseorang mengklik item menu.

Setelah Anda menambahkan item menu ke menu Anda, Anda juga akan melihat kelas CSS muncul. Di situlah Anda harus memutuskan kelas CSS yang akan mengubah gaya item menu. Dalam hal ini, kami menggunakan kelas 'nomor telepon'. Jika Anda hanya ingin menyalin dan menempelkan baris kode CSS di akhir posting ini, maka pastikan Anda menggunakan kelas CSS yang disebutkan dalam langkah-langkah ini.

Alamat

Demikian juga, kita akan menambahkan alamat. Isi alamat di Label Navigasi dan tambahkan URL jika Anda mau. Kelas yang kami gunakan untuk item menu alamat hanyalah 'alamat'.

Ikon Sosial

Menambahkan ikon sosial ke navigasi vertikal Anda membutuhkan sedikit lebih banyak usaha. Dalam posting sebelumnya, kami secara eksplisit menangani penambahan ikon sosial ke menu utama Anda. Namun, dalam kasus ini, metodenya akan sedikit berbeda karena kita harus membuat ikon berbaris di samping satu sama lain di navigasi vertikal.

Tambahkan Font Luar Biasa

Hal pertama yang harus Anda lakukan, jika Anda belum melakukannya, adalah menambahkan Font Awesome ke Opsi Tema Anda. Untuk melakukannya, buka Dasbor WordPress > Divi > Opsi Tema > Integrasi > Dan tempel kode pendek berikut ke kepala situs web Anda:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Dapatkan Kode Pendek

Untuk mendapatkan kode pendek ke ikon sosial; buka halaman ini di situs web Font Awesome. Di bidang pencarian yang akan Anda lihat di halaman itu, cari berbagai ikon yang ingin Anda tambahkan ke navigasi vertikal Anda.

Setelah mengeklik ikon, Anda akan melihat kode pendek yang ditautkan ke ikon. Simpan masing-masing shortcode ini di suatu tempat.

Tambahkan Ikon Sosial ke Menu

Selanjutnya, kita akan menambahkan ikon sosial. Biasanya, Anda dapat menambahkan masing-masing ikon sosial satu per satu sebagai item menu. Tapi karena kita ingin mereka muncul tepat di samping satu sama lain, kita harus menempatkannya ke dalam item menu yang sama. Kode HTML yang perlu Anda tambahkan ke Label Navigasi adalah sebagai berikut:

<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>

Jangan lupa untuk menambahkan URL ke masing-masing ikon. Kelas yang kami gunakan untuk ketiga ikon sosial yang digabungkan adalah 'icon-wrapper' tetapi kami juga telah menetapkan kelas tambahan untuk masing-masing ikon sosial untuk membuat penyesuaian individual. Anda dapat melihat kelas-kelas ini tepat setelah kelas Font Awesome. Mereka disebut 'facebook', 'instagram' dan 'amplop'.

Petunjuk arah

Untuk item menu berikutnya, kami menggunakan kata 'directions' sebagai nama kelas CSS.

Garis

Untuk menambahkan garis tepat di bawah arah, kita harus menambahkan karakter kosong ke dalam Navigasi Label. Itu karena WordPress tidak mengizinkan Anda membuat item menu tanpa memiliki label yang tertaut padanya. Untuk menambahkan karakter kosong ke item menu baris, cukup tambahkan ' ' ke Label Navigasi. Selanjutnya, tambahkan juga 'line' sebagai nama kelas CSS ke item menu ini.

Jam buka

Selanjutnya, kita akan menambahkan jam buka dan menetapkan nama kelas CSS 'jam' untuk itu.

CTA 1

Selanjutnya, kita akan menambahkan CTA pertama. Kami akan menetapkan nama kelas CSS 'cta-1' untuk itu.

CTA 2

Untuk CTA kedua, kita akan menggunakan nama kelas CSS 'cta-2'.

Tombol CTA

Menambahkan tombol CTA ke navigasi vertikal Anda memerlukan beberapa langkah lebih banyak daripada item menu biasa yang hanya berupa teks. Mulailah dengan membuka halaman yang Anda gunakan sebagai satu halaman dan ikuti langkah selanjutnya yang disebutkan di bawah ini.

Buat Tombol di Halaman Arahan

Jika Anda ingin menggunakan tombol CTA di Navigasi Vertikal Anda, Anda harus memiliki tombol yang sama di suatu tempat di satu halaman Anda. Setelah Anda membuatnya, Anda dapat memeriksa elemen dan menyalin baris kode berikut (tertaut ke tombol yang Anda buat) yang muncul di kode situs web Anda:

<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> 
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> 
ORDER NOW 
</a> 
</div>

Tentu saja, kode ini mungkin berbeda sesuai dengan cara Anda menatanya. Itu juga tergantung pada apakah ada tombol lain di halaman yang sama atau tidak. Ketahuilah bahwa tombol hanya akan muncul dengan gaya yang Anda tetapkan di halaman tempat tombol itu berada. Itu sebabnya menambahkan tombol ke navigasi vertikal Anda biasanya hanya lebih disukai jika menyangkut satu halaman.

Catatan: Pastikan Anda menyesuaikan ukuran font dan bantalan tombol Anda di dalam Modul Tombol sehingga pas dengan Navigasi Vertikal Anda.

Tambahkan sebagai Item Menu

Sekarang setelah Anda menyalin kode HTML yang diperlukan yang ditautkan ke tombol, tambahkan tautan khusus baru dan tambahkan kode ke Label Navigasi. Kelas CSS yang kami gunakan untuk item menu ini adalah 'cta-3'.

Tambahkan Baris Kode CSS

Bagian selanjutnya dari posting ini didedikasikan untuk berbagi baris kode CSS yang membantu Anda mencapai hasil akhir dan tata letak. Anda akan melihat bahwa kami telah menggunakan kelas CSS yang telah kami tetapkan ke item menu yang berbeda. Namun, jika Anda memutuskan untuk menggunakan nama kelas yang berbeda, pastikan Anda mengubahnya dalam kode CSS untuk membuatnya berfungsi.

Untuk menambahkan kode CSS, buka Dasbor WordPress > Divi > Opsi Tema > Gulir ke bawah tab Umum dan tambahkan baris kode CSS berikut ke kotak CSS Kustom:

@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}

@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}

#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}

Ubah Warna Latar Belakang Bagian

Langkah terakhir yang harus Anda lakukan adalah mengubah warna latar belakang bagian pada satu halaman Anda. Pastikan warna ini sama dengan yang Anda gunakan untuk penampung halaman Anda. Dalam hal ini, yaitu '#d6d4d1'.

Hasil

Setelah Anda menambahkan semua item menu dan kode CSS yang ditautkan ke masing-masing item menu ini, Anda seharusnya dapat mencapai hasil berikut:

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat navigasi vertikal untuk satu halaman Anda. Posting ini terinspirasi oleh situs web Eat Thai Restaurant yang dibuat dengan Divi juga. Jika Anda telah mengikuti seluruh posting langkah demi langkah, Anda seharusnya sudah dapat mencapai hasil yang dipamerkan di atas. Jika Anda memiliki pertanyaan atau saran, pastikan Anda 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 oleh Vectomart / shutterstock.com