Some websites have a reading progress bar feature to indicate how far a visitor has read an article. The bar usually lies on the top side of the website. The reading progress bar feature allows you to encourage your visitors to scroll through the entire page and continue reading your content. If you have a WordPress site and want to add this feature, there are a bunch of plugins you can use. In this post, we will show you how to add a reading progress bar in WordPress using Essential Addons.
What is Essential Addons? It is a WordPress plugin. Or more precisely, it is an Elementor add-on. Essential Addons adds extra features as well as widgets to your Elementor, including a feature to add a reading progress bar. When adding a reading progress bar with Essential Addons, you can select whether want to apply the reading progress on a specific page/post or the entire website.
In case you haven’t known about Elementor. It’s a page builder plugin for WordPress that allows you to create beautiful web pages on your WordPress site without having to deal with HTML or CSS code. Elementor and Essential Add-ons are freemium plugins, but the reading progress bar feature is only available on the paid version of Essential Addons ($29.97). No worries, there are many other advantages you will get by installing this plugin. You can read this post to learn about this plugin.
Install Elementor and Essential Addons
- Elementor
As mentioned, Elementor is a freemium WordPress plugin. You can use the free version to add a reading progress bar. The free version of Elementor is available in the official plugin repository of WordPress. To install this plugin, go to Plugins -> Add New. Type “elementor” on the search box and click the Install Now button once you found. Activate the plugin immediately once installed.
- Essential Addons
You need to use the paid version of Essential Addons to add a reading progress bar to your website. You can get it on its official website. After completing the purchase, you will have access to download the ZIP file of the plugin. Simply download the file. Once downloaded, login to your WordPress dashboard and go to Plugins -> Add New. Click the Upload Plugin button, followed by the Choose File button, to select the ZIP file of the plugin. Click the Install Now button to install it on your WordPress and activate the plugin immediately once installed.
Configure the reading progress bar
Before configuring the reading progress bar, you need to make sure it has been activated. To do so, click Essential Addons on the left panel and click the Extensions tab.
Next, create a new page or post (Pages Add New / Posts -> Add New) and edit it with Elementor.
On the Elementor editor, click the gear icon on the bottom-left corner on the left panel.
Open the EA Reading Progress Bar option and enable the progress bar.
By default, the reading progress bar is only applied to the current page (the page you are editing). To apply it to the entire website, you can enable the Enable Reading Progress Bar Globally option. You can also set the bar position by clicking the dropdown menu on the Position section.
To change the background color, you can click the color selector on the Background Color section. While to change the fill color, you can click the color selector on the Fill Color section. You can also set the height of the bar on the Height section.
Click the PUBLISH button to publish your page. This will also apply the progress bar you have just configured.
