Cara menampilkan bilah kemajuan membaca di WordPress dengan Elementor

Diterbitkan: 2025-05-27

Bilah 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> .

Go to the feature page of HappyAddons

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

Enable the reading progress bar feature

Langkah 02: Buka halaman dengan Elementor

Sekarang, untuk mengonfigurasi fitur Baci Progress Bar, buka halaman dengan Elementor.

Open a Page with Elementor

Langkah 03: Pergi ke Pengaturan Situs Elementor

Klik ikon hamburger di sudut kiri atas panel Elementor.

Go to Elementor's Site Settings

Buka opsi Pengaturan Situs dengan mengkliknya.

Go to the Site Settings option

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

Locate Reading Progress Bar

Aktifkan untuk mengaktifkan opsi bilah progres membaca .

Enable Reading Progress Bar

Langkah 04: Mengkonfigurasi opsi bilah kemajuan baca

Setelah Anda mengaktifkan opsi Baca Progress Bar, Anda akan mendapatkan banyak opsi untuk mengonfigurasi fitur.

Configure the Reading Progress Bar Option

# 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.

Select display settings for the progress bar

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

Select where you want to display the reading progress bar

# 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 .

Select a Progress Bar Type

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

Choose a progress bar type

# 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.

Select a Position for the Progress Bar

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

Progress Bar appears

# 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.

Stylize the Progress Bar

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.

happy addons

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.