Cara Membuat Tautan Aktif di Gulir untuk Situs Web Divi Satu Halaman

Dalam tutorial hari ini kami akan menunjukkan kepada Anda cara menata tautan navigasi vertikal Anda sehingga saat pengunjung menggulir halaman ke bawah, tautan menu yang sesuai dengan bagian tempat mereka berada akan disorot. Ini adalah efek kecil yang menyenangkan yang menambahkan sedikit interaktivitas antara desain web Anda dan perilaku pengguna. Metode ini bekerja sangat baik jika Anda membuat situs web satu halaman.

Bagi mereka yang kesulitan membayangkan efek ini dalam pikiran mereka, kami telah menyediakan pratinjau di bawah ini.

Hasil

Mari kita lihat hasil akhir yang dapat Anda capai setelah mengikuti posting ini:

Seperti yang Anda lihat, tautan aktif yang disorot berubah secara otomatis saat pengguna menggulir melalui bagian halaman (juga saat diklik).

Inspirasi

Kami menemukan inspirasi kami untuk posting ini di situs Filmschool Berlin yang kami sebutkan sebagai contoh di posting kami tentang navigasi vertikal. Seorang pembaca di komentar posting itu meminta agar kami menunjukkan kepada mereka cara membuat efek tautan aktif bergulir dan inilah dia!

Cara Membuat Tautan Aktif di Gulir untuk Situs Web Divi Satu Halaman

Berlangganan Saluran Youtube Kami

Memulai: Unduh Halaman Gulir ke Plugin ID

Untuk melakukan desain ini, kita akan mulai dengan memanfaatkan plugin Page Scroll to ID yang gratis dan berperingkat baik yang dapat Anda temukan di sini. Klik tombol 'Unduh' dan simpan file ZIP plugin di suatu tempat di mana Anda dapat menemukannya segera.

Unggah & Aktifkan Halaman Gulir ke Plugin ID

Hal berikutnya yang perlu Anda lakukan adalah pergi ke Dashboard WordPress > Plugins > Add New > Pilih file ZIP yang baru saja Anda unduh dan unggah.

Setelah itu, jangan lupa untuk mengaktifkan plugin juga.

Aktifkan Navigasi Vertikal

Sebelum kita masuk ke pengaturan plugin Page Scroll to ID, kita akan mengaktifkan navigasi vertikal (dan navigasi tetap pada langkah berikutnya) terlebih dahulu. Jika Anda menggunakan Dasbor WordPress, buka Appearance > Customize > Header & Navigation > Header Format > Dan aktifkan navigasi vertikal.

Aktifkan Navigasi Tetap

Selanjutnya, mari aktifkan navigasi tetap situs web Anda. Ini diperlukan karena inti dari penggunaan tautan aktif pada gulir adalah agar pengunjung dapat melihat bagian mana mereka berada, saat mereka berada di dalamnya. Jika Anda menggunakan Dasbor WordPress, buka Divi > Opsi Tema > Dan aktifkan Bilah Navigasi Tetap di tab Umum.

Halaman Gulir ke Pengaturan Plugin ID

Untuk bagian ini, kita akan kembali ke plugin yang baru saja diunggah. Setelah Anda mengaktifkan plugin, Anda harus menggunakan pengaturan yang tepat. Untuk pergi ke pengaturan, klik 'pengaturan' tepat di bawah nama plugin.

Setelah Anda selesai melakukannya, Anda akan melihat berbagai opsi yang membantu Anda menentukan bagaimana tautan aktif akan berperilaku di situs web Anda. Untuk contoh yang kami buat, kami menggunakan pengaturan berikut:

• Aktifkan di Tautan Menu WordPress: Ya
• Durasi gulir: 200 milidetik
• Sesuaikan durasi pengguliran secara otomatis: Ya
• Pelonggaran animasi gulir: Linear
• Selalu gulir dengan lancar saat mencapai akhir halaman/dokumen: Ya
• Hentikan pengguliran halaman dengan roda mouse atau gesek sentuh: Ya
• Tata letak halaman: otomatis
• Izinkan hanya satu elemen yang disorot dalam satu waktu: Ya
• Pertahankan elemen saat ini disorot hingga yang berikutnya muncul: Ya
• Sorot oleh target berikutnya: Ya
• Tambahkan nilai hash tautan yang diklik ke bilah URL/alamat browser: Ya
• Gulir dari/ke halaman yang berbeda: Ya
• Penundaan 0 milidetik untuk menggulir ke target pada pemuatan halaman
• Cegah skrip lain menangani tautan plugin (jika mungkin): Ya
• Menormalkan target titik jangkar: Ya

Tambahkan ID & Kelas CSS ke Bagian

Hal berikutnya yang perlu Anda lakukan adalah menetapkan ID CSS yang berbeda dan Page Scroll pada ID Kelas CSS ke bagian yang berbeda pada satu halaman Anda. Untuk melakukannya, buka pengaturan masing-masing bagian Anda dan buka tab Lanjutan. Di dalam tab Lanjutan, tentukan berbagai ID CSS yang ingin Anda gunakan untuk bagian Anda. Ketahuilah bahwa, agar berfungsi, Anda harus menetapkan ID CSS yang berbeda untuk setiap bagian pada satu halaman Anda.

Dalam contoh ini, kami menggunakan 'home' sebagai ID CSS pertama kami. Kelas CSS, bagaimanapun, adalah sama untuk setiap bagian dan membantu Anda menautkan bagian tersebut ke plugin Page Scroll to ID. Nama kelas CSS adalah 'ps2id'.

Tambahkan ID ke Item Menu

Selanjutnya, saatnya untuk membuat item menu dan memastikannya sesuai dengan bagian dan dengan plugin Page Scroll to ID. Jika Anda menggunakan Dasbor WordPress, buka Appearance > Menus . Jika Anda sudah memiliki menu utama, Anda dapat mengerjakannya. Jika tidak, Anda dapat mengetikkan judul dan membuat menu baru. Jangan lupa untuk menjadikannya sebagai menu utama.

Gunakan Tautan Khusus

Selanjutnya, Anda akan memerlukan tautan khusus untuk mencapai hasil yang Anda inginkan. Mulailah dengan menambahkan tautan khusus pertama. Tambahkan situs web Anda diikuti dengan ID bagian pertama ke bidang tautan seperti yang ditunjukkan pada tangkapan layar di bawah ini.

Aktifkan Kelas CSS

Hal berikutnya yang perlu Anda lakukan, jika Anda belum pernah melakukannya sebelumnya, adalah mengaktifkan kelas CSS untuk item menu Anda. Untuk melakukannya, klik opsi 'Opsi Layar' di sudut kanan. Setelah kemungkinan muncul, aktifkan kelas CSS.

Gunakan Gulir Halaman ke ID Kelas CSS

Setelah Anda mengaktifkan kelas CSS untuk item menu Anda, Anda dapat melanjutkan dan secara manual menautkan kelas Page Scroll ke ID ke masing-masing item menu. Kelas CSS sama seperti yang kita gunakan untuk menetapkan ID ke bagian kita, yaitu 'ps2id'.

Buat Modifikasi Penampilan

Anda dapat membuat segala macam modifikasi pada menu utama Anda, bahkan saat Anda menggunakan metode ini. Untuk menunjukkan kepada Anda bagaimana Anda dapat membuat perubahan, kami akan membuat ulang contoh navigasi vertikal kami.

Catatan: Seperti yang disebutkan dalam pengantar posting ini, Anda tidak akan dapat melihat perubahan yang Anda buat saat melihat pratinjau halaman. Anda harus mempublikasikan halaman terlebih dahulu dan melihatnya dalam modus langsung untuk melihat hasilnya.

Penyesuai Tema

Mulailah dengan masuk ke Penyesuai Tema > Header & Navigasi > Menu Utama dan buat perubahan berikut pada tampilan menu utama Anda:

• Sembunyikan Gambar Logo: Ya
• Tinggi Maks Logo: 83
• Margin Atas Menu: 0
• Ukuran Teks: 14
• Spasi Huruf: -1
• Font: Lato Light
• Gaya Font: Kapital
• Warna Teks: #FFFFFF
• Warna Tautan Aktif: #FFFFFF
• Warna Latar Belakang: rgba(255,255,255,0)
• Warna Latar Menu Dropdown: rgba(255,255,255,0)

Opsi Tema CSS Kustom

Untuk mengubah gaya tautan aktif, kita harus menambahkan beberapa kode CSS Kustom. Jika Anda berada di dasbor WordPress, buka Divi > Opsi Tema > Gulir ke bawah tab Umum dan tempel baris kode CSS berikut di kotak CSS Kustom:

#top-menu .current-menu-item a.mPS2id-highlight{
background: black;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 15px;
}

Selain itu, kami juga menggunakan menu transparan yang tumpang tindih, yang telah kami tangani lebih detail di posting ini. Untuk menerapkan perubahan CSS tersebut ke situs web Anda juga, salin dan tempel baris kode CSS berikut di kotak CSS Khusus juga:

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

Hasil

Setelah mengikuti semua langkah dalam posting ini, Anda seharusnya dapat mencapai hasil akhir ini:

Anda tentu saja dapat memodifikasi gaya sesuai preferensi Anda sendiri (atau menggunakannya untuk navigasi teratas juga).

Pikiran Akhir

Dalam tutorial ini, kami telah menunjukkan cara membuat menu navigasi vertikal interaktif untuk satu pager. Kami telah menunjukkan kepada Anda bagaimana Anda dapat menggunakan plugin Page Scroll to ID yang dikombinasikan dengan tema Divi untuk dengan mudah mencapai hasil yang Anda inginkan. Di posting mendatang, kami akan kembali ke sini dan menunjukkan kepada Anda cara kreatif menata tautan aktif yang Anda gunakan melalui metode ini. 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 Yurlick / shutterstock.com