A reading progress bar helps keep visitors engaged by showing them how far they’ve made it through an article. It’s a simple visual cue that can make a big difference in keeping readers on your page longer, reducing bounce rates, and encouraging them to finish the post.

In this guide, we’ll walk you through adding a reading progress bar to your Divi website using the Reading Progress Bar plugin from the WordPress directory. We’ll also cover how to set it up correctly so it works smoothly with your site’s design and layout.

Step 1: Install the “Reading Progress Bar” Plugin

• Log in to your WordPress Dashboard.
• Go to Plugins > Add New.
• Search for the “Reading Progress Bar”.

Searching the Reading Progress Bar Plugin

• Click Install Now, then Activate the plugin.

Installing and Activating the Reading Progress Bar Plugin

Step 2: Configure the Plugin Settings

Once activated, go to Settings > Reading Progress Bar and adjust the following options:

Configuring Reading Progress Bar Plugin Settings

Read More: Best Social Media Plugins for Divi

1. Customize the Appearance

Adjusting the height, colors, and position ensures it blends seamlessly with your Divi theme while remaining noticeable to readers. Let’s go over the key settings to make it both functional and visually appealing.

• Progressbar height (pixels): Set to 5px for a subtle yet visible effect.
• Foreground color: Select a color that matches your Divi theme (e.g., brand colors).
• Background color: Choose a contrasting color to ensure visibility.
• Progressbar position: Select Top (recommended) to display the bar at the top of the page.

Customizing the Reading Progress Bar Plugin

2. Select Where to Show the Progress Bar

Now that you’ve adjusted the basic settings, the next step is choosing where the progress bar should appear. This ensures it’s visible on the right pages without being intrusive. Whether you want it on blog posts, static pages, or archive sections, customizing its placement helps create a smoother reading experience for your visitors.

1. Select templates to apply progress bar:

• Blog Page – Applies the bar to the main blog page.
• Single Post / Page / Custom Post Type – Ensures the bar appears on all blog posts.
• Archives and Categories – Optional, if you want the bar on archive pages.

Choosing Where to Display the Reading Progress Bar on Website

2. Select post types to apply progress bar:

• Posts – Shows the progress bar on blog posts.
• Pages – If you want it on static pages.
• Media & Projects – Keep disabled unless needed.

After configuring these settings, click Save Changes.

Set Post Types for the Reading Progress Bar

Read More: 18 Best Free Divi Plugins

Step 3: Test the Reading Progress Bar

• Open a blog post on your Divi website.
• Scroll through the page and observe the thin progress bar at the top.
• If the bar isn’t visible or needs adjustments, go back to Settings > Reading Progress Bar and modify colors, height, or templates.

Testing the Reading Progress Bar Plugin on Your Divi Website

Final Thoughts

Adding a reading progress bar to your Divi website with the Reading Progress Bar plugin is an easy way to improve the reading experience. It provides a clear visual indicator of progress, helping visitors stay engaged and move through your content more smoothly.

Follow these steps to set it up, customize it to match your site’s design, and give your readers a better browsing experience. It’s a small change that can make a noticeable difference—try it out and see how it works for your site!

Read More: 9 WordPress Security Plugins For Divi