Cara Membuat Navigasi Vertikal Transparan yang Tumpang tindih Situs Web Divi Anda

Dalam tutorial Divi hari ini, kami terutama akan fokus melakukan sesuatu yang istimewa dengan navigasi vertikal di situs web Anda. Navigasi vertikal opsi yang sering dilupakan yang disediakan oleh tema Divi. Meskipun tidak sering digunakan, itu dapat mengubah tampilan dan nuansa lengkap situs web Anda dan membawanya ke tingkat yang Anda inginkan. Untuk membantu Anda menjadikan navigasi vertikal Anda lebih istimewa dari sebelumnya, kami akan membuatnya transparan. Selain itu, kami juga akan memastikan bahwa menu transparan tumpang tindih dengan seluruh situs web Anda.

Saat ini, kami tidak melihat banyak situs web dengan navigasi vertikal di luar sana. Tetapi dalam kasus-kasus tertentu, itu dapat memberikan hasil yang menakjubkan. Di salah satu posting kami sebelumnya, kami menunjukkan kepada Anda 12 contoh situs web Divi yang menggunakan navigasi vertikal untuk menyempurnakan desain web mereka.

Saat Anda membuat navigasi vertikal tumpang tindih dengan situs web Anda, menggunakan warna latar belakang transparan adalah penting. Jika Anda tidak menggunakan warna latar belakang transparan, navigasi vertikal mungkin tumpang tindih dengan beberapa konten di situs web Anda. Anda tidak ingin menghilangkan fokus utama pada konten situs web Anda dan Anda juga tidak ingin tumpang tindih.

Untuk mendemonstrasikan apa yang sebenarnya kami maksud, kami telah membuat contoh elegan dan sederhana yang akan kami tunjukkan cara membuatnya. Langkah demi langkah, kami akan memandu Anda melalui berbagai langkah yang diperlukan untuk mencapai hasil berikut.

Hasil Akhir Hari Ini: Menu Vertikal Sederhana & Elegan

Pada gambar di atas, Anda dapat melihat kesederhanaan yang dapat dibawa oleh navigasi vertikal transparan ke situs web Anda. Selain menunjukkan cara membuat menu vertikal transparan, kami juga akan memberikan beberapa tip desain umum yang dapat Anda gunakan saat membuatnya agar sesuai dengan situs web Anda sendiri.

Membuat Desain di Divi

Berlangganan Saluran Youtube Kami

Pengaturan Umum

Sebelum masuk ke contoh yang kami buat, kami akan memberi Anda beberapa informasi umum (dan baris kode CSS) yang membantu Anda mengintegrasikan navigasi transparan dengan cara yang sederhana (tanpa semua modifikasi lain yang kami buat dalam contoh) .

Aktifkan Navigasi Vertikal

Untuk memulainya, Anda perlu mengaktifkan navigasi vertikal di situs web Anda. Untuk melakukannya, buka Dasbor WordPress > Tampilan > Kustomisasi > Header & Navigasi > Format Header > Dan aktifkan Navigasi Vertikal.

Pilih Pengaturan Desain Anda di Penyesuai Tema

Sekarang Anda masih berada di Penyesuai Tema, Anda dapat menyesuaikan semua pengaturan navigasi vertikal dengan cara yang sama seperti Anda mengubah navigasi teratas. Kembali ke Header & Navigation > Menu Utama > Dan buat semua modifikasi yang ingin Anda buat pada menu utama Anda.

Di bagian ini, penting untuk memberikan warna latar belakang menu yang memiliki opacity kurang dari 1. Sebaiknya, bahkan kurang dari 0,5. Pastikan ini menerapkan warna latar belakang. Jika Anda ingin hal yang sama diterapkan pada warna latar belakang menu dropdown, pilih juga warna yang sama di sana.

Tambahkan Kode CSS

Setelah Anda membuat semua perubahan yang diinginkan pada bagian desain navigasi vertikal, Anda dapat beralih ke bagian CSS. Karena kita sudah berada di Penyesuai Tema, kita akan menambahkan kode CSS khusus di sana. Anda tentu saja dapat menambahkan kode CSS ke satu halaman tertentu juga atau melalui Opsi Tema Anda.

Kode CSS yang akan kami berikan kepada Anda melakukan dua hal. Pertama-tama, ini memastikan navigasi vertikal transparan dan situs web Anda tumpang tindih. Kedua, ini membantu Anda menyesuaikan lebar navigasi vertikal Anda. Jika Anda tidak ingin mengubah lebar sama sekali, Anda dapat meninggalkan potongan kode itu dari situs web Anda dan membuat navigasi vertikal transparan dan situs web Anda tumpang tindih.

Perubahan ini hanya akan berlaku untuk versi desktop situs web Anda. Pada layar yang memiliki lebar lebih kecil dari 981px, modifikasi tidak akan berlaku.

Tambahkan Kode CSS di Penyesuai Tema

Pertama, kami memiliki kode yang memastikan situs web Anda memenuhi seluruh lebar browser Anda. Salin dan tempel kode berikut ke tab CSS Tambahan Penyesuai Tema Anda:

@media (min-width: 981px) { 
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important; 
}
}

Selain itu, jika Anda juga ingin menyesuaikan lebar navigasi vertikal, salin dan tempel baris kode CSS berikut:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important;
}
.et_vertical_nav #page-container #main-header
{
width: 120px;
}
}

Menciptakan Navigasi Vertikal Sederhana

Sekarang kami telah menangani langkah-langkah yang diperlukan untuk membuat navigasi vertikal transparan yang tumpang tindih dengan situs web Anda, kami akan membuat ulang contohnya. Contohnya, sekali lagi, terlihat seperti ini:

Tip Desain Keseluruhan

Sebelum memulai, kami akan membagikan beberapa tip dan pemikiran desain umum yang harus Anda ingat. Kiat-kiat ini akan membantu Anda mendapatkan yang terbaik dari situs web elegan dan sederhana yang Anda buat. Mari kita lihat dua tips yang pasti ingin kami tekankan.

Sentralisasi Semuanya

Pertama, pastikan Anda memusatkan konten di situs web Anda. Ini jelas tetapi layak disebut. Jika Anda menggunakan navigasi vertikal transparan yang tumpang tindih dengan situs web Anda, pemusatan konten Anda akan sangat cocok dengan itu. Sebaliknya, jika Anda menyelaraskan semuanya ke sisi kiri situs web Anda, kemungkinan besar navigasi vertikal transparan dan konten akan tercampur. Itu mungkin bukan hasil yang ingin Anda capai. Anda ingin memprioritaskan simetri dan keterbacaan di situs web Anda.

Jika Anda memilih konten yang disejajarkan secara berbeda, pastikan Anda memeriksa padding dan margin konten. Jika Anda memodifikasi margin dan padding yang sesuai, hasilnya masih bisa terlihat bagus. Tapi, Anda mungkin harus membuat banyak modifikasi manual.

Latar Belakang Warna Sama Di Mana Saja

Jika Anda menggunakan warna latar belakang yang sepenuhnya transparan untuk navigasi vertikal Anda, seperti yang kami gunakan dalam contoh ini, penting untuk mempertahankan konsistensi tertentu. Anda ingin warna dalam navigasi vertikal Anda dapat dibaca dan terlihat karena orang harus dapat menavigasi situs web Anda dengan lancar.

Jika Anda memilih warna font terang di navigasi vertikal transparan, pastikan gambar atau warna latar belakang Anda mengandung warna gelap. Demikian juga, jika Anda menggunakan warna font gelap, pastikan gambar atau warna latar belakang yang Anda gunakan berwarna terang.

Mulai Membuat Contoh

Tanpa batas waktu lebih lanjut, mari kita mulai membuat ulang contoh yang kami tunjukkan kepada Anda. Pertama-tama, buat halaman baru dan tambahkan Bagian Lebar Penuh ke dalamnya. Kami hanya akan menunjukkan cara membuat ulang satu bagian halaman. Tentu saja, Anda kemudian dapat melanjutkan dan menambahkan bagian sebanyak yang Anda inginkan. Menu akan tetap sama persis saat menggulir.

Buat Header Lebar Penuh

Dalam Bagian Fullwidth, tambahkan Header Fullwidth. Lalu, buka tab Desain, letakkan Orientasi Teks & Logo ke 'Tengah' dan aktifkan mode layar penuh dari Header Lebar Penuh Anda juga.

Pengaturan Judul

Juga, gulir ke bawah tab yang sama dan buat perubahan berikut pada subkategori Teks Judul:

• Judul Font: Lato Light
• Judul Font Style: Capitals
• Judul Gaya Font: 60 (desktop), 50 (tablet), 40 (ponsel)
• Warna Teks Judul: #FFFFFF

Pengaturan Subjudul

Selanjutnya lanjutkan scrolling dan pastikan pengaturan subkategori Teks Subjudul adalah sebagai berikut:

• Font Subjudul: Lato Light
• Ukuran Font Subjudul: 22px (desktop & tablet), 19 (ponsel)
• Warna Teks Subjudul: #c4c4c4

Pengaturan Tombol

Terakhir, buat perubahan berikut pada subkategori Tombol dari tab Desain:

• Gunakan Gaya Kustom untuk Tombol Satu: Ya
• Tombol Satu Ukuran Teks: 15 (desktop & tablet), 12 (ponsel)
• Tombol Satu Warna Teks: #000000
• Tombol Satu Warna Latar Belakang: #FFFFFF
• Tombol Satu Font: Lato Light
• Tombol Satu Gaya Font: Tebal & Kapital

Pengaturan Latar Belakang Gradien

Selanjutnya, buka pengaturan Bagian Lebar Penuh untuk menambahkan gambar latar belakang dengan hamparan gradien di dalam subkategori Latar Belakang dari tab Konten. Tergantung pada jenis latar belakang dan warna yang Anda gunakan, tambahkan warna yang cocok.

Dalam contoh kami, kami menggunakan latar belakang gelap. Oleh karena itu, kita akan mulai dengan warna hitam di gradien. Warna lain, kami cocokkan dengan gambar latar belakang adalah 'rgba(0,49,109,0.43)'.

Selanjutnya, pengaturan yang kami gunakan untuk warna gradien adalah sebagai berikut:

• Tipe Gradien: Linier
• Arah Gradien: 87deg
• Posisi Awal: 0%
• Posisi Akhir: 62%

Selanjutnya, tambahkan gambar latar belakang dan terapkan pengaturan berikut:

• Ukuran Gambar Latar Belakang: Sampul
• Posisi Gambar Latar Belakang: Tengah
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan
• Campuran Gambar Latar Belakang: Hamparan

Perubahan Penyesuai Tema

Untuk langkah selanjutnya, kita perlu membuat beberapa modifikasi lain di Theme Customizer. Jika Anda menggunakan Dasbor WordPress, buka Appearance > Customize > Header & Navigation > Primary Menu Bar > dan buat perubahan berikut:

• Tinggi Maks Logo: 83
• Ukuran Teks: 14
• Spasi Huruf: 0
• Font: Lato Light
• Gaya Font: Kapital
• Warna Teks: #FFFFFF
• Warna Tautan Aktif: #FFFFFF
• Warna Latar Belakang: #FFFFFF
• Warna Latar Menu Dropdown: rgba(221.153,51,0)
• Warna Garis Menu Dropdown: #1E73BE
• Warna Teks Menu Dropdown: #FFFFFF

Tambahkan Kode CSS Kustom di Penyesuai Tema

Saat Anda masih dalam Penyesuai Tema, kami akan menambahkan baris kode CSS yang diperlukan untuk membuat tata letak terlihat seperti aslinya.

Bagian pertama kode menghilangkan margin kiri situs web saat menggunakan navigasi vertikal. Bagian kedua menempatkan menu lebih dekat ke kiri. Bagian ketiga menempatkan margin atas dan batas bawah untuk setiap halaman dalam menu. Bagian keempat menambahkan margin atas ke logo dan menghilangkan margin setelah logo. Dan terakhir, kami memastikan menu menjaga jarak yang sama antara logo dan item menu dengan menghapus padding atas. Perubahan ini juga berlaku untuk menu saat menggulir. Oleh karena itu, menu akan terlihat sama di seluruh situs web.

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #FFFFFF;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}

Hasil Akhir

Sebagai hasil dari semua langkah yang Anda ikuti selama posting ini, Anda akan mendapatkan hasil berikut di situs web yang sedang Anda kerjakan:

Membungkus

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat navigasi vertikal transparan yang tumpang tindih dengan situs web Anda. Selain itu, kami juga telah membagikan desain yang elegan dan sederhana yang dapat Anda gunakan untuk situs web Anda sendiri jika Anda mengikuti posting ini selangkah demi selangkah. Jika Anda memiliki pertanyaan atau permintaan, pastikan Anda meninggalkan komentar di bagian komentar di bawah agar kami dapat menghubungi!

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