Get My Free WordPress Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design  journey. Intermediate and advanced WordPress users have found it helpful too.

Elementor Reading Progress Tracker (Add a Circular or Horizontal Progress Tracker with EPro

Elementor-progress-tracker-widget

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)

Circular elementor reading progress tracker

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 reading progress tracker gif
Elementor reading progress tracker – horizontal

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.

Also Read. . .

Leave a Comment

Your email address will not be published.

Reccomended Tools

Get Web Hosting from the best as recommended by WordPress.org

Elementor is the WordPress most popular page builder with over 10 million active users

Featured In

Wordcamp_Logo
OneYoungWorld_white
New York Mag

Disclaimer: Some of the links on this website are affiliate links and I receive a commission if you make a purchase using them at NO extra cost to you. That way, I’m able to keep this website running

© 2022 GO Tech UG