Do you often write long-form articles on your website? If yes, you might want to add a reading progress bar to improve the user experience for your visitors. Elementor (the pro version), comes with a native widget called Progress Tracker which you can use to add a reading progress bar. Thanks to this widget, you no longer need to install an add-on to add a progress bar in Elementor. The widget started available in Elementor 3.5.
You can add a progress bar using the Progress Tracker widget to any page (or template) on your Elementor-powered WordPress website. In most websites, a progress bar is added to the header of the website. This practice allows the progress bar to appear on all pages within the website. Here is an example of the progress bar on HubSpot.
In addition to the header, you can also add the reading progress bar on the sidebar of the single post layout. This post will show you to add reading progress to the single post layout.
Adding Reading Progress to Single Post Layout in Elementor
Since we want to add the reading progress bar to the single post layout, you need to create the custom single post layout first. You can read our previous article to learn how to create a custom single post template in WordPress using Elementor. In this post, we will go straight to adding the Progress Tracker widget to an existing single post template.
Before getting started, make sure you have updated your Elementor Pro to version 3.5 in case you haven’t done so. Once you are ready, go to Templates -> Theme Builder on your WordPress dashboard to access Elementor Theme Builder screen. Click the Single Post tab on the left panel. Select the custom template you want to add the Progress Tracker widget to and click Edit to edit it.
Once the Elementor editor opens, add the Progress Tracker widget by dragging it from the widget panel to the canvas area. Place it to an area you want.
On the Progress Tracker block under the Content tab, select a tracker type on the Tracker Type option. There are two tracker types you can choose from: Horizontal and Circular. Set the direction on the Direction option. If you want to display the percentage, you can simply enable the Percentage option.
Styling Up the Progress Bar
You can style up the progress bar to make it look more appealing. For instance, you can change the color to make it fit the color scheme of your website. To style up the progress bar, you can go to the Style tab on the settings panel. From here, you can set things like progress bar color, border color, border style, tracker background, and so on.
To make advanced settings such as padding and margin, device visibility, and so on, you can switch to the Advanced tab on the settings panel.
Once you are done editing the Progress Tracker widget, you can update the template by clicking the UPDATE button on the bottom side of the settings panel.
The Bottom Line
Reading progress bar is a simple, yet useful feature to improve the user experience on your website. It allows your visitors to track how far they have been on the page they are viewing. The feature is especially useful if you often write long-form articles on your website. Since version 3.5, Elementor has had a Progress Tracker widget, a native widget that you can use to add a progress bar to your website so that you no longer need to install an add-on to add a progress bar to your website.
