In this tutorial, I’ll show you how to add an elementor reading progress tracker to your Elementor website. The progress tracker can be assigned to track the progress of an entire page, an element, or a section using custom selectors.Â
To be able to do this, you need Elementor Pro as the progress tracker widget only comes in the pro version.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor Reading Progress Tracker Tutorial
If you have your Elementor Pro ready, go to Templates > Theme Builder, (01:07)
I’m going to use two blog post layouts on my own website; one with a sidebar and another without, to show you how to add your progress tracker.
To Read: How to Create a Single Elementor Blog Post Page Template
Add a Circular Progress Tracker in Elementor with Custom Selector
I’ll start off by opening up the first blog post page with Elementor and duplicating the title in the sidebar (01:39).
In the Edit Heading area on the right, give the new heading a title (Your Read). Under Alignment, select center.
Go to the Widgets area and look for the Progress Tracker widget (01:58), drag it to the sidebar.
In the Edit Progress Tracker area, change Tracker Type to circular, and set the Progress relative to; selector. The selector will track the progress of a specific element on the page; in this case the progress of the blog post widget.
Select that particular post widget and go to Advanced, under CSS Classes add ‘post-progress’ (02:22)
Tip: the CSS Class should be added WITHOUT a dot (.) and WITHOUT spacing.
Select the post tracker widget, go to Content > Selector, add ‘.post-progress’ (this time with the dot).
On the Direction option, select right, and then enable the Percentage option; to show the percentage when someone is scrolling (02:43)
Go to Style, set Size to 122, set the Color to yellow, set Width to 12, and the Background Color to red.
Under Content, set Color to blue, under Typography set the font to Montserrat, Size to 19 pixels, and Weight to 900.
Back to the Tracker option, go to Tracker Background and change Width to 10 (03:36)
To Read: How To Submit Posts from Frontend in WordPress for Free
Add a Horizontal Progress Tracker in Elementor
Opening the second blog post layout in Elementor:
Drag the post tracker widget to the section (04:08).
In the Edit Progress Tracker area, under Content set the Tracker Type to Horizontal, Progress relative to; Post Content, Direction; left, and make sure the Percentage option is disabled.
Under Style, set the Progress color to yellow, Tracker background color to red, Height to 10 pixels.
Under Padding, unlink the values then add 10 pixels on the right.
To make the horizontal progress tracker sticky:
Select it and go to Advanced > Motion Effects, under Sticky, select Top. On the Sticky on option, make sure all devices (desktop, tablet, and mobile) are included.
Now when you scroll, the progress tracker should be showing, and when you scroll to the end of the blog post, it leaves the 10 pixels space that was added via padding.
Elementor Progress Tracker Responsive Settings
Select your progress tracker and go to the Responsive Mode (05:34), select the tablet and mobile devices, and make sure the progress tracker is functioning and it should be.
Also Read: Create an Elementor Posts Loop with Custom Column Link
In conclusion
That’s how you can add a circular or horizontal progress tracker on your website/blog post using Elementor Pro.
If you have any questions or comments about this tutorial, let me know in the section below. Remember to subscribe to my newsletter and youtube channel for more tips and tutorials.
