Cara Menggabungkan Bilah Kemajuan Gulir dengan Menu Navigasi Tetap di Divi

Indikator Progress Bar dapat menambahkan sentuhan yang bagus ke situs web Anda, meningkatkan UX dengan interaksi yang bermanfaat (dan menyenangkan). Biasanya, bilah kemajuan berdiri sendiri di bagian atas halaman tanpa banyak koneksi ke konten halaman yang sebenarnya. Pengguna hanya memiliki indikator visual di mana mereka berada di halaman. Tapi, hari ini, kita akan membawa fungsi ini ke level lain.

Dalam tutorial ini, kami akan menunjukkan cara menggabungkan bilah progres gulir dengan menu navigasi tetap di Divi. Desain ini unik karena bilah kemajuan berkorelasi dengan lebar tombol menu. Dan karena lebar tombol menu sama (dalam persentase) dengan tinggi bagian konten yang dapat digulir pada halaman, setiap tombol akan diisi oleh bilah kemajuan gulir tepat saat pengguna mencapai bagian tombol yang sesuai. Dan jika itu tidak cukup, kami akan menjadikan setiap tombol sebagai tautan jangkar ke bagian yang sesuai juga, untuk bonus UX tambahan!

Desain ini akan sempurna untuk membawa pengguna melalui halaman arahan yang menjelaskan langkah-langkah suatu proses. Nah, Anda akan lihat.

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!

https://youtu.be/Kf-ciVKEZFI

Berlangganan Saluran Youtube Kami

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Bagian 1: Membuat Tata Letak Halaman Bagian Layar Penuh

Bagian Atas

Untuk memulai, tambahkan baris satu kolom ke bagian tersebut.

Sebelum menambahkan modul, perbarui pengaturan baris sebagai berikut:

• Lebar: 100%
• Lebar Maks: 100%
• Padding: 0px atas, 0px bawah

Di dalam baris, tambahkan modul teks.

Kemudian buka pengaturan untuk modul teks dan rekatkan HTML berikut untuk membuat judul berwarna:

<h2><span style="color: #00A4E0;">Let's</span><span style="color: #EE4266;>get</span style="color: #2a1e5c;>star</span><span style="color: #26c485;">ted</span></h2>

Di bawah tab desain, perbarui perataan teks ke tengah.

Perbarui gaya Judul H2 berikut:

• Judul 2 Font: Roboto
• Judul 2 Ukuran Teks: 6vw

Buka pengaturan bagian dan perbarui ketinggian menjadi 100vh (atau 100% dari ketinggian viewport/jendela). Ini akan memastikan bagian layar penuh. Kemudian ambil padding sebagai berikut:

• Tinggi: 100vh
• Padding: 0px atas, 0px bawah

Untuk memastikan baris/konten di dalam bagian tetap berada di tengah secara vertikal di dalam bagian, tambahkan CSS khusus berikut ke Elemen Utama Bagian:

display:flex;
flex-direction:column;
justify-content:center;

Langkah Satu Bagian

Bagian berikutnya dalam tata letak akan menjadi yang pertama dari empat langkah. Ini juga merupakan bagian pertama yang akan digulir tautan jangkar menu pertama kami.

Untuk membuat bagian langkah pertama, duplikat bagian atas yang baru saja kita buat.

Kemudian buka pengaturan untuk bagian duplikat dan perbarui warna latar belakang:

• Warna Latar Belakang: #222222

Selanjutnya, buka pengaturan teks dan ganti teks isi dengan yang berikut:

<h2>Step One...</h2>
Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur. 

Ubah perataan teks menjadi rata kiri.

Kemudian perbarui yang berikut ini:

• Judul 2 Warna Teks: #00a4e0
• Lebar Maks: 40vh (desktop), 80vh (tablet)
• Penyelarasan Modul: tengah

Itu menangani langkah satu bagian.

Langkah Kedua Bagian

Untuk membuat bagian langkah dua, duplikat bagian langkah satu yang baru saja kita buat.

Buka pengaturan bagian dan tambahkan gradien latar belakang di atas warna latar belakang sebagai berikut:

• Warna Latar Belakang Gradien Kiri: rgba(255,255,255,0.85)
• Warna Latar Belakang Gradien Kanan: rgba(255,255,255,0.85)

Kemudian perbarui warna judul:

• Judul 2 Warna Teks: #ee4266

Warna latar belakang dan judul bagian ini akan cocok dengan warna tombol yang berhubungan dengan bagian ini di menu yang akan kita buat nanti.

Langkah Tiga Bagian

Untuk membuat bagian langkah tiga, duplikat bagian langkah dua dan seret ke bagian bawah halaman.

Kemudian ubah warna heading modul teks.

• Judul 2 Warna Teks: #26c485

Langkah Empat Bagian

Langkah terakhir kami adalah langkah keempat. Untuk membuat bagian ini, duplikat bagian langkah dua dan seret ke bagian bawah halaman.

Kemudian perbarui judul untuk modul teks di bagian itu.

• Judul 2 Warna Teks: #2a1e5c

Hasil

Berikut adalah hasil dari tata letak kami sejauh ini.

Bagian 2: Membuat Scroll Progress Bar dan Menu

Bagian selanjutnya ini adalah di mana kita akhirnya membuat bilah progres gulir dengan tombol menu kita. Idenya adalah untuk menambahkan bagian tetap ke bagian atas halaman. Kemudian di dalam bagian tersebut, kita akan membuat baris yang berisi modul pembagi yang akan berfungsi sebagai indikator progress bar kita. Di atas baris dengan bilah kemajuan, kita akan menambahkan baris lain yang akan berisi tombol kita. Setiap tombol akan memiliki latar belakang transparan (atau semi-transparan) untuk menampilkan bilah kemajuan di belakangnya saat pengguna menggulir halaman ke bawah.

Untuk memulai, mari buat bagian tetap di bagian atas halaman. Lanjutkan dan buat bagian reguler baru dan seret ke bagian atas tata letak halaman.

Buka pengaturan bagian dan keluarkan padding sebagai berikut:

• Padding: 0px atas, 0px bawah

Di bawah tab lanjutan, perbarui yang berikut ini:

• Posisi: Tetap
• Indeks Z: 999

Ini akan memastikan bagian tersebut tetap berada di bagian atas jendela browser untuk fungsionalitas tautan jangkar yang mudah. Ini juga akan memastikan bagian keluar dari aliran normal dokumen/html dan tidak menambah tinggi keseluruhan dokumen. Ini akan membuat bilah gulir mencapai akhir setiap tombol tepat ketika pengguna mencapai setiap bagian/langkah pada halaman saat menggulir.

Di dalam bagian, tambahkan baris satu kolom.

Buka pengaturan baris dan perbarui yang berikut:

• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%
• Padding: 0px atas, 0px bawah
• Posisi: Absolut

Buka pengaturan kolom dan tambahkan CSS Kustom berikut ke Elemen Utama:

height: 100%;
display:flex;
align-items:center;

Ini akan memastikan kolom memiliki ketinggian yang sama dengan bagian. Ini juga akan memungkinkan modul memiliki ketinggian 100% juga. Ini akan menjadi kunci untuk memastikan bilah kemajuan mengisi bagian tersebut.

Untuk membuat bilah kemajuan, tambahkan modul pembagi ke kolom.

Kemudian perbarui pengaturan pembagi sebagai berikut:

• Tampilkan Pembagi: TIDAK
• Warna Latar Belakang: #222222

• Lebar: 100%
• Tinggi: 100%

CATATAN: Kami memberikan bilah kemajuan lebar 100% di sini sehingga Anda dapat melihatnya di dalam desain. Kami akan menambah dan mengurangi lebar pembagi/progress bar dengan JQuery.

Di bawah tab lanjutan, tambahkan ID CSS dan berikan posisi absolut.

• ID CSS: scrollBar
• Posisi: Absolut

Menambahkan Indikator Teks Persentase

Selanjutnya, kita akan menambahkan tempat untuk menunjukkan persentase posisi gulir saat pengguna menggulir halaman ke bawah. Ini akan berkorelasi dengan lebar bilah kemajuan.

Di bawah pembagi, tambahkan modul teks.

Kemudian rekatkan HTML berikut ke badan:

<p><span></span></p>

JQuery kami akan menulis teks persentase ke HTML ini (di antara tag rentang). Anda tidak akan dapat melihat apa pun sekarang.

Meskipun teks persentase belum terlihat, kita masih perlu menambahkan gaya berikut untuk mengantisipasinya.

• Font Teks: Roboto
• Gaya Font Teks: TT
• Warna Teks Teks: #ffffff
• Ukuran Teks Teks: 16px
• Padding: 0.8em atas, 0.8 bawah, 15px kiri

Di bawah tab lanjutan, berikan Kelas CSS khusus dan nonaktifkan di ponsel dan tablet.

• Kelas CSS: et-progress-label
• Nonaktifkan Aktif: Ponsel, Tablet

Meskipun kami belum selesai, ini adalah tempat yang bagus untuk menambahkan kode khusus kami yang diperlukan untuk menampilkan bilah progres gulir dan persentase.

Untuk menambahkan kode, tambahkan modul kode di bawah modul teks.

Kemudian tempel kode berikut di kotak kode pastikan untuk membungkusnya dengan tag skrip yang diperlukan:

(function($) {
$(document).ready(function(){
var docHeight = $(document).height();
var winHeight = $(window).height();
var $scrollBar = $('#scrollBar');
var $progressLabel = $('.et-progress-label p span'); 
$scrollBar.css('width', 0);
$progressLabel.html('0%');
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100);
$scrollBar.css('width', (scrollPercentage + '%'));
$progressLabel.html( Math.round(scrollPercentage) + '%');
});
});
})( jQuery );

Itu menangani bilah kemajuan dan teks persentase. Mari kita beralih ke menu navigasi.

Membangun Tombol Menu dengan Tautan Jangkar

Sekarang kita siap untuk membuat menu navigasi yang akan menyertakan empat tombol yang menjangkau seluruh lebar browser. Saya pikir akan keren jika bilah gulir mengisi setiap tombol saat pengguna mencapai bagian yang sesuai yang ditautkannya. Inilah idenya. Setiap tombol akan memiliki lebar 25% dari total lebar browser. Dan karena keempat bagian kami semuanya memiliki ketinggian yang sama (100vh), masing-masing dari empat bagian mewakili 25% dari total area tata letak halaman yang dapat digulir. Ini akan memastikan bilah kemajuan mencapai akhir setiap tombol tepat saat bagian yang sesuai mengisi area pandang. Apakah Anda menangkap itu? Jika tidak, semoga lebih masuk akal nanti.

Baris dan Kolom

Untuk membuat tombol menu, pertama, kita perlu membuat baris empat kolom di bawah baris yang berisi bilah kemajuan/pembagi.

Buka pengaturan baris dan perbarui yang berikut:

• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%
• Padding: 0px atas, 0px bawah

Untuk memastikan kolom tertumpuk di ponsel, kita perlu menambahkan CSS khusus berikut ke Elemen Utama:

display:flex;
flex-wrap:nowrap;

Langkah Satu Tombol

Untuk membuat tombol pertama, tambahkan modul tombol di kolom paling kiri.

Perbarui teks tombol dan URL tautan sebagai berikut:

• Teks Tombol: Langkah 1
• URL Tautan Tombol: #one
  (tautan jangkar ini akan melompati bagian dengan ID CSS yang sesuai yang akan kami tambahkan nanti)

Selanjutnya, perbarui gaya tombol sebagai berikut:

• Penjajaran Tombol: Tengah
• Ukuran Teks Tombol: 20px (desktop), 14px (tablet)
• Warna Latar Tombol: transparan
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: 0.2em
• Font Tombol: Roboto
• Gaya Font Tombol: TT
• Padding: 0.8em atas, 0.8em bawah, 0 kiri, 0 kanan

Untuk membuat tombol menjangkau lebar penuh kolom, tambahkan CSS khusus berikut ke elemen utama:

display:block !important;
width: 100%;

Langkah 2 Tombol

Untuk membuat tombol untuk langkah kedua, duplikat tombol di kolom satu dan seret ke kolom 2.

Kemudian perbarui yang berikut ini:

• Warna Teks Tombol: #ee4266
• Warna Latar Tombol: rgba(255,255,255,0.85)

Warna latar belakang semi-transparan akan digabungkan dengan warna bilah kemajuan hitam (di belakangnya) agar sesuai dengan latar belakang bagian dua langkah yang sesuai.

Kemudian perbarui URL tautan tombol dengan yang berikut:

• URL Tautan Tombol: #dua

Langkah 3 Tombol

Untuk membuat tombol langkah 3, duplikat tombol langkah 1 (memiliki warna bg yang sama), dan seret ke kolom 3.

Kemudian perbarui warna teks tombol:

• Warna Teks Tombol: #26c485

Kemudian perbarui URL tautan tombol dengan yang berikut:

• URL Tautan Tombol: #three

Langkah 4 Tombol

Untuk membuat tombol langkah 3, gandakan tombol langkah 2 (memiliki warna bg yang sama), dan seret ke kolom 4.

Kemudian perbarui warna teks tombol:

• Warna Teks Tombol: #2a1e5c

Kemudian perbarui URL tautan tombol dengan yang berikut:

• URL Tautan Tombol: #four

Menambahkan ID CSS Bagian yang Sesuai untuk Tautan Jangkar

Setelah tombol selesai dan semuanya memiliki URL tautan jangkar, kita dapat menambahkan ID CSS bagian yang sesuai ke setiap bagian yang kita inginkan untuk dilompati oleh setiap tombol di halaman.

Langkah Satu Bagian ID CSS

Buka pengaturan untuk bagian langkah satu dan tambahkan ID CSS berikut:

• ID CSS: satu

Langkah Kedua Bagian ID CSS

Buka pengaturan untuk bagian langkah dua dan tambahkan ID CSS berikut:

• ID CSS: dua

Langkah Tiga Bagian ID CSS

Buka pengaturan untuk bagian langkah ketiga dan tambahkan ID CSS berikut:

• ID CSS: tiga

Langkah Empat Bagian ID CSS

Buka pengaturan untuk bagian langkah empat dan tambahkan ID CSS berikut:

• ID CSS: empat

Hasil Akhir

Pikiran Akhir

Menu progress bar ini jelas merupakan desain unik yang memiliki potensi untuk berbagai aplikasi. Semoga bisa membantu untuk project selanjutnya. Dan, jangan ragu untuk menjelajahi variasi desain yang tak terhitung jumlahnya yang tersedia di dalam pembuat Divi untuk membuat menu bilah kemajuan Anda sendiri.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!