Have you ever seen how some common websites present a studying progress bar indicator on the prime of their articles?
This little bar exhibits customers how way more of the article is left to scroll and encourages them to proceed studying. It will probably assist preserve guests in your web site studying your content material and enhance the general consumer expertise.
On this article, we’ll present you the way to add a studying progress bar in WordPress posts.
Why and When You Ought to Add Studying Progress Bar in WordPress
Customers spend solely a few seconds on a webpage earlier than deciding whether or not to remain or depart. Conserving customers engaged turns into just a little more difficult when you publish long-form articles, as they require customers to scroll down.
A studying progress bar provides just a little user-interface enhancement that encourages customers to scroll down. It additionally motivates customers to complete the article they’re studying.
Many common web sites like to make use of the studying progress indicators to interact their readers. Nevertheless, you additionally must be sure that the studying progress indicator is refined and doesn’t distract from the content material itself.
Having mentioned that, let’s see how one can simply add a studying progress indicator on your WordPress posts.
Including Studying Progress Bar in WordPress Posts
The best means of exhibiting a studying progress bar in weblog posts and pages is thru a plugin like Price The Learn.
It’s a free WordPress plugin that’s light-weight and helps add a studying progress bar to your web site. The plugin provides a number of customization choices and allows you to change its type to suit your web site theme. You possibly can even use it to indicate the studying time on your articles.
The very first thing it is advisable do is set up and activate the Price The Learn plugin. For extra particulars, see our step-by-step information on the way to set up a WordPress plugin.
Upon activation, it is advisable go to the Price The Learn Studying » Progress web page from the WordPress admin panel and go to the ‘Performance’ tab to arrange your progress bar indicator.
Subsequent, you may select whether or not to indicate the progress bar in your posts, pages, and homepage. There’s additionally an choice to show the studying bar on customized publish varieties.
In the event you scroll down, you’ll discover extra customization choices.
You possibly can embody feedback within the complete size of the progress bar by enabling the ‘Embody Feedback’ choice. If you’re together with feedback, then you too can select a distinct background shade for the feedback progress space.
The plugin additionally lets you choose the location of the studying progress bar. The default choice is on the highest which is utilized by most websites. You possibly can change it to show the progress bar on proper, left, or backside of the web page.
Aside from that, there are extra choices for customizing the studying progress bar.
For example, you may transfer the bar from proper to left, use fastened opacity, allow the progress bar for contact gadgets like mobiles and tablets, allow the debug mode, and extra.
Once you’re finished, don’t neglect to click on the ‘Save Adjustments’ button.
Subsequent, head over to the ‘Model’ tab underneath Studying Progress to edit the looks of the studying progress bar.
The plugin permits you to select the thickness of the progress bar and choose foreground and background colours to match your WordPress theme.
The background shade is used to fill the empty progress bar and the foreground shade might be used to indicate progress as a consumer scrolls down.
It even permits you to use a clear background for the progress bar. Checking this selection will override background shade choices and solely the foreground shade might be displayed as customers scroll down an article.
After enhancing the type, don’t neglect to avoid wasting the adjustments to retailer your settings.
Now you can go to any weblog publish or touchdown web page in your web site to see the progress bar in motion.
We hope this text helped you add a studying progress bar in WordPress. You might also need to see our checklist of finest WooCommerce plugins and how to decide on the very best net design software program.
The publish The right way to Add a Studying Progress Bar in WordPress Posts first appeared on WPBeginner.