Cara menampilkan bilah kemajuan membaca di WordPress dengan Elementor
Diterbitkan: 2025-05-27Bilah Progress Membaca adalah indikator visual di situs web yang menunjukkan kepada pembaca seberapa jauh mereka telah menggulir halaman atau posting di layar. Ini biasanya menampilkan bilah tipis yang terisi saat pembaca berkembang, menggulir halaman. Ini adalah alat yang sederhana namun efektif untuk blog dan situs web konten-berat.
Sebuah studi baru -baru ini tentang keterlibatan pengguna menunjukkan bahwa isyarat visual dapat meningkatkan waktu yang dihabiskan pada halaman hingga 20% dengan membuat konten merasa lebih mudah dikelola . Dengan cara yang sama, bilah kemajuan dapat membantu pengguna melacak perjalanan membaca mereka, yang dapat meningkatkan kepuasan dan mendorong mereka untuk mengeksplorasi lebih banyak.
Dengan Elementor, mudah untuk menambahkan bilah kemajuan membaca ke WordPress. Jadi, dalam artikel ini, kami akan membahas panduan langkah demi langkah tentang cara menampilkan bilah kemajuan membaca di WordPress dengan Elementor.
Manfaat Menampilkan Bilah Kemajuan Pembaca di WordPress
Menambahkan bilah kemajuan membaca ke situs WordPress menawarkan beberapa manfaat. Ini tidak hanya meningkatkan pengalaman pengguna tetapi juga keterlibatan. Lihatlah beberapa manfaat utama dari menambahkan bilah kemajuan membaca di WordPress di bawah ini.
- Meningkatkan keterlibatan pengguna
Bilah kemajuan membaca dapat membuat pembaca tetap termotivasi dengan secara visual menunjukkan seberapa jauh mereka telah berkembang melalui sebuah pos. Ini mendorong pengguna untuk terus membaca, terutama untuk konten bentuk panjang. Lihatlah beberapa poin cepat tentang cara meningkatkan keterlibatan pengguna di situs web Anda.
- Meningkatkan Kejelasan Navigasi
Untuk artikel atau tutorial yang panjang, bilah kemajuan memberikan indikasi yang jelas tentang berapa banyak konten yang tersisa. Ini membantu pengguna menebak apakah mereka punya waktu untuk menyelesaikan atau tidak.
- Mengurangi tingkat pentalan
Dengan menawarkan isyarat visual yang memecah konten menjadi perjalanan yang dapat dilacak, bilah kemajuan dapat membuat posting panjang tampak kurang berlebihan. Ini bisa sangat menurunkan tingkat pentalan. Berikut adalah panduan tentang cara mengurangi tingkat pentalan pada WordPress.
- Meningkatkan daya tarik estetika
Bilah kemajuan yang dirancang dengan baik menambah daya tarik modern ke situs Anda. Anda dapat menyesuaikan penampilan Baca Progress Bar agar sesuai dengan branding situs Anda untuk membuat tampilan yang dipoles.
- Mendukung kegunaan seluler
Pada perangkat seluler, di mana pengguliran dapat terasa tanpa akhir, bilah kemajuan memberikan rasa kontrol dan konteks. Ini meyakinkan pengguna bahwa mereka membuat kemajuan melalui posting atau halaman.
Cara menampilkan bilah kemajuan membaca di WordPress dengan Elementor
Dalam tutorial langkah demi langkah ini, kami akan memandu Anda melalui proses menambahkan dan menyesuaikan bilah kemajuan membaca di situs WordPress Anda menggunakan Elementor dan versi gratis dari HappyAddons. Tapi Anda mungkin bertanya - mengapa happyaddons dan apa ini ?
Sebenarnya, HappyAddons adalah addon terkenal dari plugin Elementor. Muncul dengan banyak fitur dan widget yang banyak akal untuk mengatasi keterbatasan Elementor. Membaca Progress Bar adalah salah satu. Dan kabar baiknya adalah bahwa fitur bilah Progress Reading benar -benar gratis untuk digunakan.
Prasyarat untuk Menambahkan Bilah Kemajuan Membaca
- Elementor
- Happyaddons
Pastikan plugin diinstal dan diaktifkan di situs Anda. Setelah siap di situs Anda, mulailah mengikuti langkah -langkah yang dijelaskan dalam tutorial di bawah ini.
Langkah 01: Mengaktifkan fitur Bacak Progress Bar
Buka dasbor WordPress Anda dan navigasikan ke fitur HappyAddons> .

Saat Anda sampai di halaman fitur , temukan opsi bilah Progress Membaca . Aktifkan untuk mengaktifkan fitur.

Langkah 02: Buka halaman dengan Elementor
Sekarang, untuk mengonfigurasi fitur Baci Progress Bar, buka halaman dengan Elementor.

Langkah 03: Pergi ke Pengaturan Situs Elementor
Klik ikon hamburger di sudut kiri atas panel Elementor.

Buka opsi Pengaturan Situs dengan mengkliknya.

Dengan menggulir panel Elementor, cari bilah Bacaan Kemajuan dan klik .

Aktifkan untuk mengaktifkan opsi bilah progres membaca .

Langkah 04: Mengkonfigurasi opsi bilah kemajuan baca
Setelah Anda mengaktifkan opsi Baca Progress Bar, Anda akan mendapatkan banyak opsi untuk mengonfigurasi fitur.

# Pilih tempat untuk menampilkan bilah kemajuan
Anda dapat memilih untuk menampilkan bilah kemajuan di seluruh situs Anda, yang berarti di semua posting dan halaman. Atau, Anda dapat memilih untuk menampilkannya secara selektif.

Jika Anda ingin menampilkannya baik pada posting dan halaman, pilihnya di kotak di sebelahnya untuk ditampilkan.


# Pilih jenis bilah kemajuan
HappyAddons memungkinkan Anda untuk memilih dari tiga jenis bilah kemajuan - horizontal, vertikal, dan lingkaran . Jadi, pilih salah satu dari mereka, klik opsi dropdown di sebelah ketik .

Anda akan melihat opsinya. Pilih jenis yang Anda inginkan. Untuk tutorial, kami akan menggunakan tipe horizontal.

# Pilih posisi untuk bilah kemajuan
Anda dapat menampilkan bilah kemajuan baik di atas atau di bagian bawah. Jadi, pilih di mana Anda ingin menampilkannya dari opsi posisi di sebelahnya.

Karena kami telah menggulir halaman, Anda dapat melihat bilah kemajuan muncul di atas halaman.

# Stylize the Progress Bar
Dari panel Elementor yang sama, Anda dapat menyesuaikan tinggi, warna batang kemajuan, warna latar belakang, dan tooltip persentase dari fitur bilah progres.
Semoga Anda dapat melakukan kustomisasi ini sendiri.

Langkah 05: Pratinjau bilah kemajuan
Setelah selesai, buka frontend situs Anda. Periksa apakah bilah kemajuan bekerja dengan baik atau tidak dengan menggulir layar Anda.
Dengan demikian, Anda dapat dengan mudah menambahkan bilah kemajuan membaca ke WordPress menggunakan plugin Elementor dan HappyAddons.
Bagaimana Bilah Kemajuan Vertikal
Di atas, kami telah menunjukkan kepada Anda proses membuat bilah kemajuan horizontal. Dengan cara yang sama, Anda dapat mengaktifkan dan menampilkan bilah kemajuan vertikal di situs Anda. Setelah Anda mengaktifkannya, bilah kemajuan akan terlihat seperti yang ditampilkan dalam video yang terlampir di bawah ini.
Bagaimana Lingkaran Progress Bar
Di sini sekali lagi, mengikuti proses yang sama, Anda dapat menampilkan bilah Circle Progress di situs WordPress Anda, mengkonfigurasi stylization dan pengaturannya. Anda dapat menonton tampilannya di frontend dari video yang terpasang di bawah ini. Bilah Circle Progress muncul di sudut kanan atas.
Apa lagi yang bisa Anda lakukan dengan HappyAddons?
Setelah Anda memiliki HappyAddons, Anda tidak hanya dapat mengatasi kekurangan Elementor tetapi juga menikmati lebih banyak fitur dan widget yang menarik. Lihatlah apa lagi yang dapat Anda lakukan dengan plugin HappyAddons.

A. Gunakan pembangun tema
Pembuat tema HappyAddons memungkinkan Anda untuk menyesuaikan setiap aspek bagian template situs WordPress Anda, termasuk header, footer, halaman tunggal, posting tunggal, dan halaman arsip. Berita bagusnya adalah bahwa fitur pembangun tema benar -benar gratis untuk digunakan, yang merupakan fitur premium di Elementor. Periksa cara mengakses pembangun tema HappyAddons.
B. Tingkatkan situs WooCommerce
HappyAddons Pro menawarkan rangkaian widget WooCommerce yang kuat untuk meningkatkan desain dan fungsionalitas toko e -commerce Anda. Widget WooCommerce yang ditawarkan HappyAddons adalah Grid Produk, Korsel Produk, Kisi Kategori Produk, Kategori Produk, Produk, Produk Tunggal, Keranjang Mini, Keranjang, Checkout, dan Bar Pengiriman.
C. Membuat konten kreatif
HappyAddons menyediakan lebih dari 130 widget dan dua lusin fitur menarik untuk membuat situs web sangat menarik. Menggunakannya, Anda dapat menyoroti informasi berharga di situs Anda dengan cara yang sangat kreatif yang terlihat bagus dan menarik bagi pengguna.
D. Buat posting/halaman infografis
HappyAddons memungkinkan penciptaan posting dan halaman gaya infografis yang menarik secara visual menggunakan widget seperti bagan batang, bilah keterampilan, bagan interaktif, dan kisi-kisi. Akibatnya, Anda dapat menampilkan perbandingan seperti hasil penjualan atau survei dengan warna dan label yang dapat disesuaikan. Pelajari cara membuat halaman web infografis dengan Elementor.
e. Tempel salinan silang domain
Fitur Cross-Domain Copy Paste di HappyAddons Pro memungkinkan Anda menyalin widget, bagian, atau seluruh halaman dari satu domain dan menempelkannya ke yang lain, mempertahankan semua gaya dan pengaturan. Ini adalah penghemat waktu bagi pengembang atau agensi yang mengelola banyak situs.
Selain semua ini, Anda akan memiliki perpustakaan template yang banyak akal, obrolan langsung, dokumentasi yang komprehensif, dan daftar putar tutorial YouTube untuk membuat perjalanan desain web Anda dengan HappyAddons sangat menyenangkan.
Pikiran terakhir!
Semoga Anda menikmati tutorial ini. Kami telah terus menulis lebih banyak posting blog berbasis tutorial di situs web kami untuk membuat perjalanan desain web tanpa kode Anda lebih bermanfaat dan efisien. Karena Anda telah membaca seluruh posting, Anda jelas memiliki gambaran tentang apa lagi yang dapat Anda lakukan dengan plugin HappyAddons.
Jika Anda memiliki Elementor dan HappyAddons di situs Anda, Anda dapat melakukan keajaiban nyata. Anda dapat memeriksa ulasan tentang HappyAddons di WordPress.org dan situs ulasan lainnya untuk mengeksplorasi seberapa besar pengguna kami puas. Setelah semua ini, jika Anda memiliki pertanyaan dalam pikiran, Anda dapat meninggalkan komentar di bawah ini atau memberikan ketukan pada kotak obrolan dukungan kami.