Pernahkah Anda mencari untuk membuat pelacak kemajuan vertikal alih-alih bilah gulir tradisional? Jika belum, maka telusuri artikel ini sampai habis untuk mengetahui cara membuatnya dengan Elementor Pro.
Namun sebelum membahas tema utama, mari kita ingat dulu apa itu pelacak kemajuan.
Pelacak kemajuan adalah indikator kemajuan yang memberi tahu pengguna tentang kemajuan proses yang sedang berlangsung, seperti menginstal aplikasi, memperbarui, membaca artikel, dll. . Dan ada dua jenis:
- le pelacak kemajuan linier
- le pelacak kemajuan melingkar
Anda juga dapat membaca: Elementor: Cara membuat kartu efek dari portofolio
Dalam tutorial ini, kami akan menunjukkan cara menyisipkan indikator kemajuan vertikal langkah demi langkah ke bagian yang berisi arsip posting.
Buat pelacak kemajuan
Di tab elemen dari panel alatElementor, ketik di bilah pencarian Pelacak Kemajuan. Kemudian seret widget ke dalam bagian.
Indikator kemajuan kemudian muncul. Secara default, ini berorientasi horizontal. Tapi jangan khawatir, Anda akan melihat nanti bagaimana mengaturnya secara vertikal.
Indikator kemajuan sedang dibuat, mari lakukan modifikasi yang diperlukan untuk mendapatkan hasil yang diinginkan.
Lihat juga: Elementor: Cara membuat kartu efek dari portofolio
Edit konten pelacak kemajuan
Di sini Anda akan memilih jenis pelacak dan apa yang terkait dengannya.
Pengaturan utamanya adalah:
- pelacak khas: di sini nilai defaultnya adalah Horisontal. Namun saat menggulir ke bawah daftar, ketik bundar juga ditawarkan kepada Anda. Pertahankan defaultnya.
- Kemajuan relatif terhadap: dalam pengaturan kedua ini, pilih nilainya pemilih. Pilihan ini akan memunculkan pengaturan tambahan: pemilih.
- pemilih: Bidang ini dimaksudkan untuk menerima pengidentifikasi objek yang akan dilampirkan pelacak.
Mari kita pilih arsip publikasi karena itu adalah elemen yang dilampirkan pelacak kita.
Di panel pengaturannya, buka tab Lanjutan, lalu isi nilai di bidang ID CSS.
Selanjutnya, kembali ke panel pelacak dan lengkapi bidang Pemilih di menu isi.
Terakhir, atur orientasi indikator kemajuan ke kanan.
Ubah gaya pelacak kemajuan
Pada langkah ini, kami akan mengonfigurasi parameter indikator kemajuan serta latar belakang yang terakhir.
Mulailah dengan mengatur indikator kemajuan.
Baca juga: Elementor: Cara Membuat Galeri Gambar
- Pengaturan warna kemajuan memungkinkan Anda untuk memilih antara progresi klasik dan progresi gradien. Dalam contoh kita, pilih opsi pertama. Namun apapun pilihannya, yang muncul adalah settingnya couleur.
- Mengaturmemiliki warna menggunakan palet warna global atau pemilih warna.
- Jenis perbatasan: Anda memiliki enam proposal (tidak ada, penuh, ganda, putus-putus, putus-putus, alur). Memilih perbatasan penuh.
- lebar: Ini untuk memberi ketebalan pada batas indikator kemajuan Anda.
- radius perbatasan: Secara default, indikator kemajuan terlihat seperti persegi panjang. Dengan memodifikasi jari-jarinya, ekstremitasnya menjadi bulat.
Terakhir, atur piste pengaturan latar belakang. Anda perhatikan bahwa itu adalah pengaturan yang hampir sama yang kembali. Batasi Anda karena itu untuk yang disebutkan sebelumnya.
Ubah opsi lanjutan pelacak kemajuan
Untuk menyelesaikan pekerjaan kami, kami akan mengatur tab berikut: efek gerak, Transform, dan CSS khusus.
Mari kita mulai dengan tabnya dulu CSS khusus. Pilih, lalu masukkan kode berikut di bidang yang sesuai. Ini memungkinkan untuk menentukan lebar pelacak. Jadi, itu menetapkan lebar menjadi 50% tinggi jendela.
Selanjutnya, putar pelacak ke arah vertikal. Untuk melakukan ini, pilih submenu Transformator, aktifkan rotasi, lalu ketik 90 di bidang kosong. Ini akan memutar widget kami 90 derajat memberi Anda posisi vertikal yang diinginkan.
Untuk menyelaraskan widget kita pada level yang sama dengan posting pertama, terapkan offset 145.
Pada tingkat ini, jika kita menggulir halaman kita, Anda akan melihat bahwa indikator kemajuan kita menghilang saat kita menggulir halaman kita isi.
Untuk mengatasi masalah ini, Anda akan membuka tab Efek gerak, lalu tarik turun perintah Pin dan pilih di bawah.
Kali ini, menggulir ke bawah, kita dapat melihat pelacak kemajuan kita secara bertahap terisi saat kita menelusuri arsip posting kita.
Dapatkan Elementor Pro Sekarang!
Kesimpulan
Jadi ! Itu saja untuk artikel ini yang menunjukkan cara membuat pelacak kemajuan vertikal.
Menambahkan elemen interaktif seperti indikator kemajuan vertikal saat membuat situs web benar-benar dapat membawanya ke tingkat berikutnya dengan membuatnya lebih intuitif. Selain itu, ini dapat ditautkan ke seluruh halaman atau ke isi dari sebuah publikasi dan bahkan ke elemen spesifik lainnya dari sebuah halaman. Oleh karena itu, mengetahui cara menggunakannya akan menjadi keuntungan tambahan.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
