{"id":113386189,"date":"2024-05-14T19:33:12","date_gmt":"2024-05-14T16:33:12","guid":{"rendered":"https:\/\/thrivethemes.com\/?p=113386189"},"modified":"2024-05-14T19:33:23","modified_gmt":"2024-05-14T16:33:23","slug":"reading-progress-indicators","status":"publish","type":"post","link":"https:\/\/thrivethemes.com\/reading-progress-indicators\/","title":{"rendered":"How to Add a Reading Progress Bar to Boost Engagement"},"content":{"rendered":"<p><em>\u201cHow long is this gonna take to read?!\u201d<\/em><\/p>\n<p>That\u2019s the subconscious question every online visitor asks themselves before reading anything you, me, or <em>anyone<\/em> has ever published.<\/p>\n<p>And can you blame them?<\/p>\n<p>With so many blog posts, books, news feeds, Netflix shows and YouTube channels out there vying for our <em>precious <\/em>attention, ain\u2019t nobody got time to do it all.<\/p>\n<p>That\u2019s why most online content just gets ignored (including yours).<\/p>\n<p>So other than putting the extra effort in to write catchy titles, make your headings skim friendly &amp; create eye-popping visuals for your posts, are there any easy buttons you can press <em>RIGHT NOW<\/em> to help break through the noise and get visitors to keep reading right down to your comments section?<\/p>\n<p>Keep scrolling to learn how you can boost your reader engagement by <em>quickly<\/em> adding <strong><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466499\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\">Reading Progress Indicators<\/span><\/span><\/strong> to your blog posts if you happen to using a dedicated <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466474\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466474\" data-dropdown-placement-param=\"top\" data-term-id=\"307466474\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466455\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466455\" data-dropdown-placement-param=\"top\" data-term-id=\"307466455\">Reading Progress Bar<\/span><\/span><\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466474\" data-dropdown-placement-param=\"top\" data-term-id=\"307466474\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466474\"> <\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466474\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466474\" data-dropdown-placement-param=\"top\" data-term-id=\"307466474\">plugin<\/span><\/span><\/span><\/span><em>or <\/em> the most powerful theme builder for <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466453\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\">WordPress<\/span><\/span>&#8230;<\/p>\n<h2>Why Are Progress Indicators So Darn Engaging?<\/h2>\n<p><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466499\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\">Reading progress indicators<\/span><\/span> are typically displayed on sites that publish <strong>long form content<\/strong>.<\/p>\n<p>It\u2019s become one of the best ways to inform readers just how much time they\u2019ll need to complete a given article \u2014 finishing it right then and there if it\u2019s short, or setting aside an appropriate amount of time to read it later if it\u2019s too lengthy for the moment.<\/p>\n<p>Defining <em>up front<\/em> what\u2019s required to consume your content provides potential readers with a finite framework from which to make a necessary time commitment. As Marina Konnikova states in her New Yorker article about <a href=\"https:\/\/www.newyorker.com\/tech\/annals-of-technology\/a-list-of-reasons-why-our-brains-love-lists\">why people love listicles<\/a> (based on <a href=\"https:\/\/www.sciencedirect.com\/science\/article\/abs\/pii\/S1057740810001312\">supporting<\/a><a href=\"https:\/\/link.springer.com\/article\/10.1007%2FBF00122575\">evidence<\/a>): <em>\u201cThe more we know about something\u2014including precisely how much time it will consume\u2014the greater the chance we will commit to it.\u201d<\/em><\/p>\n<p>So when it comes to boosting engagement on your blog, displaying <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466499\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\">reading progress indicators<\/span><\/span> is a simple &amp; easy way to encourage online visitors to:<\/p>\n<ul>\n<li>Start reading your posts (because they indicate the time required up front).<\/li>\n<li>Feel less overwhelmed by your long articles (because it helps people feel oriented within lengthy content).<\/li>\n<li>Complete an article once started (because the finish line remains in constant sight).<\/li>\n<\/ul>\n<p>And given how search engines like Google interpret lower <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466475\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466475\" data-dropdown-placement-param=\"top\" data-term-id=\"307466475\">bounce rates<\/span><\/span> &amp; longer session times as positive signals that content is good, <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466499\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\">Reading Progress Indicators<\/span><\/span> could have a meaningful impact on your site&#8217;s search engine rankings too!<\/p>\n<p>So now that we&#8217;ve covered the WHY behind <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466499\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\">reading progress indicators<\/span><\/span>, let\u2019s now discuss HOW you can deploy them on your own site using one of two options \u2014 with a standalone <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">plugin<\/span><\/span>, or with Thrive Theme Builder&#8230;<\/p>\n<h2>Option 1: Add a <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466494\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466494\" data-dropdown-placement-param=\"top\" data-term-id=\"307466494\">Reading Position Indicator<\/span><\/span> Using a Separate <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466458\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466458\" data-dropdown-placement-param=\"top\" data-term-id=\"307466458\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466453\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\">WordPress<\/span><\/span><\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466458\" data-dropdown-placement-param=\"top\" data-term-id=\"307466458\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466458\"> <\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466458\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466458\" data-dropdown-placement-param=\"top\" data-term-id=\"307466458\">Plugin<\/span><\/span><\/span><\/span><\/h2>\n<p>If you&#8217;re looking for a straightforward way to add a progress bar to your <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466471\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466471\" data-dropdown-placement-param=\"top\" data-term-id=\"307466471\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466453\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\">WordPress<\/span><\/span><\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466471\" data-dropdown-placement-param=\"top\" data-term-id=\"307466471\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466471\"> posts<\/span><\/span> or page, using a dedicated <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">plugin<\/span><\/span> is a great option. One highly recommended <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">plugin<\/span><\/span> for this purpose is <strong><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466467\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466467\" data-dropdown-placement-param=\"top\" data-term-id=\"307466467\">Worth the Read<\/span><\/span><\/strong>. This <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">plugin<\/span><\/span> is specifically designed to add a <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466455\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466455\" data-dropdown-placement-param=\"top\" data-term-id=\"307466455\">reading progress bar<\/span><\/span> to your posts and pages, enhancing the <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466465\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466465\" data-dropdown-placement-param=\"top\" data-term-id=\"307466465\">user experience<\/span><\/span> by visually indicating how much content remains.<\/p>\n<h3><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466473\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466473\" data-dropdown-placement-param=\"top\" data-term-id=\"307466473\">Step-by-Step<\/span><\/span> Guide to Adding a Progress Bar with <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466467\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466467\" data-dropdown-placement-param=\"top\" data-term-id=\"307466467\">Worth the Read<\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">Plugin<\/span><\/span><\/h3>\n<p>Follow these steps to add a progress bar to your <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466453\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\">WordPress<\/span><\/span> page using the <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466467\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466467\" data-dropdown-placement-param=\"top\" data-term-id=\"307466467\">Worth the Read<\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">plugin<\/span><\/span>:<\/p>\n<h3><strong>Step 1: Install and Activate the <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">Plugin<\/span><\/span><\/strong><\/h3>\n<p>1. <strong>Navigate to <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">Plugins<\/span><\/span><\/strong>: Go to your <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466497\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466497\" data-dropdown-placement-param=\"top\" data-term-id=\"307466497\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466453\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\">WordPress<\/span><\/span><\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466497\" data-dropdown-placement-param=\"top\" data-term-id=\"307466497\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466497\"> dashboard<\/span><\/span> and click on <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">Plugins<\/span><\/span> &gt; Add New.<\/p>\n<p><span><img fetchpriority=\"high\" decoding=\"async\" alt=\"\" data-id=\"113477064\" width=\"442\" data-init-width=\"442\" height=\"136\" data-init-height=\"136\" title=\"7 Add a plugin\" loading=\"lazy\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/05\/7-Add-a-plugin.png\" data-width=\"442\" data-height=\"136\" style=\"aspect-ratio: auto 442 \/ 136;\"><\/span><\/p>\n<p>2. <strong>Search for the <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">Plugin<\/span><\/span><\/strong>: In the search bar, type &#8220;<span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466467\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466467\" data-dropdown-placement-param=\"top\" data-term-id=\"307466467\">Worth the Read<\/span><\/span>&#8221; and hit enter.<\/p>\n<p>3.<strong> Install the <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">Plugin<\/span><\/span><\/strong>: Find the <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466467\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466467\" data-dropdown-placement-param=\"top\" data-term-id=\"307466467\">Worth the Read<\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">plugin<\/span><\/span> in the search results and click Install Now.<\/p>\n<p>4.<strong> Activate the <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">Plugin<\/span><\/span><\/strong>: Once the <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">plugin<\/span><\/span> is installed, click the Activate button.<\/p>\n<p><span><img fetchpriority=\"high\" decoding=\"async\" alt=\"\" data-id=\"113477065\" width=\"741\" data-init-width=\"1686\" height=\"245\" data-init-height=\"557\" title=\"8 Add Worth the Read\" loading=\"lazy\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/05\/8-Add-Worth-the-Read.png\" data-width=\"741\" data-height=\"245\" style=\"aspect-ratio: auto 1686 \/ 557;\"><\/span><\/p>\n<h3><strong>Step 2: Configure Your <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">Plugin<\/span><\/span>\u2019s Settings<\/strong><\/h3>\n<p>Once you\u2019ve installed and activated <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466467\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466467\" data-dropdown-placement-param=\"top\" data-term-id=\"307466467\">Worth the Read<\/span><\/span>, find the <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">plugin<\/span><\/span> in the <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466497\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466497\" data-dropdown-placement-param=\"top\" data-term-id=\"307466497\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466453\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\">WordPress<\/span><\/span><\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466497\" data-dropdown-placement-param=\"top\" data-term-id=\"307466497\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466497\"> dashboard<\/span><\/span> left sidebar and select \u201cReading Progress\u201d. A screen with the <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">plugin<\/span><\/span>\u2019s settings will appear.<\/p>\n<p>In the \u201c<span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466459\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466459\" data-dropdown-placement-param=\"top\" data-term-id=\"307466459\">Functionality<\/span><\/span>\u201d tab you can configure a variety of options, including:<\/p>\n<ul>\n<li>Where to display your <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466455\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466455\" data-dropdown-placement-param=\"top\" data-term-id=\"307466455\">reading progress bar<\/span><\/span> \u2014 posts, pages, or <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466496\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466496\" data-dropdown-placement-param=\"top\" data-term-id=\"307466496\">homepage<\/span><\/span><\/li>\n<li>Whether to show the bar on <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466484\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466484\" data-dropdown-placement-param=\"top\" data-term-id=\"307466484\">custom <\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466462\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466462\" data-dropdown-placement-param=\"top\" data-term-id=\"307466462\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466484\" data-dropdown-placement-param=\"top\" data-term-id=\"307466484\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466484\">post types<\/span><\/span><\/span><\/span> (this depends on the other <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">plugins<\/span><\/span> you have installed)<\/li>\n<li>Your progress bar\u2019s placement \u2014 <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466486\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466486\" data-dropdown-placement-param=\"top\" data-term-id=\"307466486\">top of the page<\/span><\/span>, <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466500\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466500\" data-dropdown-placement-param=\"top\" data-term-id=\"307466500\">bottom of the page<\/span><\/span>, or in a sidebar<\/li>\n<li>Whether to display the bar on mobile devices or touch-screen devices<\/li>\n<\/ul>\n<p><span><img fetchpriority=\"high\" decoding=\"async\" alt=\"\" data-id=\"113477066\" width=\"741\" data-init-width=\"1391\" height=\"425\" data-init-height=\"798\" title=\"10 RPB Settings\" loading=\"lazy\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/05\/10-RPB-Settings.png\" data-width=\"741\" data-height=\"425\" style=\"aspect-ratio: auto 1391 \/ 798;\"><\/span><\/p>\n<p><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466498\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466498\" data-dropdown-placement-param=\"top\" data-term-id=\"307466498\">Save changes<\/span><\/span> once you\u2019re done and select the \u201cStyle\u201d tab. This is where you\u2019ll find an array of <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466482\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466482\" data-dropdown-placement-param=\"top\" data-term-id=\"307466482\">customization options<\/span><\/span>, including:<\/p>\n<ul>\n<li>Progress bar thickness<\/li>\n<li><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466493\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466493\" data-dropdown-placement-param=\"top\" data-term-id=\"307466493\">Foreground color<\/span><\/span> and <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466479\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466479\" data-dropdown-placement-param=\"top\" data-term-id=\"307466479\">opacity<\/span><\/span><\/li>\n<li><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466464\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466464\" data-dropdown-placement-param=\"top\" data-term-id=\"307466464\">Background color<\/span><\/span> and <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466479\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466479\" data-dropdown-placement-param=\"top\" data-term-id=\"307466479\">opacity<\/span><\/span><\/li>\n<li>Shadow settings<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"113477067\" width=\"741\" data-init-width=\"1673\" height=\"341\" data-init-height=\"771\" title=\"11\" loading=\"lazy\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/05\/11.png\" data-width=\"741\" data-height=\"341\" style=\"aspect-ratio: auto 1673 \/ 771;\"><\/span><\/p>\n<p>After editing the style options, don\u2019t forget to save the changes to store your settings.<\/p>\n<p>You can now visit any blog post or page on your <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466457\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466457\" data-dropdown-placement-param=\"top\" data-term-id=\"307466457\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466453\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\">WordPress<\/span><\/span><\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466457\" data-dropdown-placement-param=\"top\" data-term-id=\"307466457\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466457\"> website<\/span><\/span> to see the progress bar in action.<\/p>\n<h2>Option 2: How To Add <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466499\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\">Reading Progress Indicators<\/span><\/span> to Your Blog Posts Using Thrive Theme Builder<\/h2>\n<p>A super important part of engaging your audience is through <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466478\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466478\" data-dropdown-placement-param=\"top\" data-term-id=\"307466478\">web design<\/span><\/span>. Are your pages and posts designed well?<\/p>\n<p>Are your blog posts <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466470\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466470\" data-dropdown-placement-param=\"top\" data-term-id=\"307466470\">SEO<\/span><\/span>-friendly, clean and easy to read?<\/p>\n<p>Do your posts load quickly?<\/p>\n<p>Do your images and videos fit on your page, or do they always look like they&#8217;re clashing with your text?<\/p>\n<p>If you\u2019re unsure of the answer&#8230; a <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466485\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466485\" data-dropdown-placement-param=\"top\" data-term-id=\"307466485\">scroll progress bar<\/span><\/span> will do little to improve your posts\u2019 engagement. You need to revise your current website\u2019s appearance and determine whether your current <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466463\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466463\" data-dropdown-placement-param=\"top\" data-term-id=\"307466463\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466453\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\">WordPress<\/span><\/span><\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466463\" data-dropdown-placement-param=\"top\" data-term-id=\"307466463\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466463\"> theme<\/span><\/span> is helping or hurting your website.<\/p>\n<p>If the answer is the latter&#8230; you need <a href=\"https:\/\/thrivethemes.com\/themebuilder\/\" target=\"_blank\" rel=\"noopener\">Thrive Theme Builder<\/a>.<\/p>\n<p><span><a href=\"https:\/\/thrivethemes.com\/themebuilder\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"\" data-id=\"113445110\" width=\"741\" data-init-width=\"1780\" height=\"440\" data-init-height=\"1058\" title=\"01 theme-builder\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/08\/01-theme-builder.jpg\" data-width=\"741\" data-height=\"440\" data-link-wrap=\"true\" loading=\"lazy\" style=\"aspect-ratio: auto 1780 \/ 1058;\"><\/a><\/span><\/p>\n<p>Thrive Theme Builder is theme builder that&#8217;s designed to help you create <a href=\"https:\/\/thrivethemes.com\/website-from-scratch\/\" style=\"outline: none;\">a clean, conversion-focused website.<\/a><\/p>\n<p>You can use this <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466454\" data-dropdown-placement-param=\"top\" data-term-id=\"307466454\">plugin<\/span><\/span> to create your website&#8217;s structure, and set up <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466461\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\">templates<\/span><\/span> for all your site&#8217;s important pages. And you can do this without needing to know how <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466480\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466480\" data-dropdown-placement-param=\"top\" data-term-id=\"307466480\">HTML<\/span><\/span>, CSS, or <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466481\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466481\" data-dropdown-placement-param=\"top\" data-term-id=\"307466481\">Javascript<\/span><\/span> \u2014 or spend hours in the <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466453\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\">WordPress<\/span><\/span> Block Editor (<span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466501\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466501\" data-dropdown-placement-param=\"top\" data-term-id=\"307466501\">Gutenberg<\/span><\/span>)! It\u2019s a smooth option for <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466468\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466468\" data-dropdown-placement-param=\"top\" data-term-id=\"307466468\">beginners<\/span><\/span> and the ultimate convenient tool for advanced <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466453\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\">WordPress<\/span><\/span> users and <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466483\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466483\" data-dropdown-placement-param=\"top\" data-term-id=\"307466483\">bloggers<\/span><\/span> who want to build good-looking websites fast.<\/p>\n<h3 id=\"t-1691754658943\"><a href=\"https:\/\/thrivethemes.com\/themebuilder\/\" target=\"_blank\" style=\"outline: none;\" rel=\"noopener\">First, Install Thrive Theme Builder<\/a><\/h3>\n<p>The easiest way to add <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466499\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\">Reading Progress Indicators<\/span><\/span> to your <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466466\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466466\" data-dropdown-placement-param=\"top\" data-term-id=\"307466466\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466453\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\">WordPress<\/span><\/span><\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466466\" data-dropdown-placement-param=\"top\" data-term-id=\"307466466\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466466\"> site<\/span><\/span> is by modifying your Post theme <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466461\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\">templates<\/span><\/span> within <a href=\"https:\/\/thrivethemes.com\/themebuilder\">Thrive Theme Builder<\/a>.<\/p>\n<p>When you use Thrive Theme Builder to create your blog post <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466461\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\">template<\/span><\/span>, you can include <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466499\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\">Reading Progress Indicators<\/span><\/span> like <strong><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466477\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466477\" data-dropdown-placement-param=\"top\" data-term-id=\"307466477\">Estimated <\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466460\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466460\" data-dropdown-placement-param=\"top\" data-term-id=\"307466460\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466477\" data-dropdown-placement-param=\"top\" data-term-id=\"307466477\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466477\">Reading Times<\/span><\/span><\/span><\/span> <\/strong>in your above-the-fold Top Sections, <strong>Auto-Updating <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466460\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466460\" data-dropdown-placement-param=\"top\" data-term-id=\"307466460\">Reading Time<\/span><\/span> Remaining <\/strong>indicators in your Sticky Sidebars, and <strong>Horizontal Progress Bars<\/strong> at the top of your articles.<\/p>\n<p>Once you&#8217;ve installed Thrive Theme Builder, you&#8217;ll need to navigate to the <em><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466461\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\">Templates<\/span><\/span><\/em> area of your Thrive Theme Builder dashboard, and opening the visual editor for the <em>Default Post<\/em><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466461\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\">template<\/span><\/span> you\u2019re going to modify:<\/p>\n<p><span><img decoding=\"async\" alt=\"Thrive Theme Builder dashboard\" data-id=\"113386254\" width=\"769\" data-init-width=\"3584\" height=\"437\" data-init-height=\"2036\" title=\"6. Thrive-Themes-Dashboard-Edit-Default-Post\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/12\/6.-Thrive-Themes-Dashboard-Edit-Default-Post.jpg\" data-width=\"769\" data-height=\"437\" loading=\"lazy\" style=\"aspect-ratio: auto 3584 \/ 2036;\"><\/span><\/p>\n<p>Navigate to the Thrive Theme Builder dashboard\u2019s&nbsp;Templates section and select a Post template to customize.<\/p>\n<p>If you haven&#8217;t configured your website&#8217;s <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466461\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\">templates<\/span><\/span>, then <a href=\"https:\/\/help.thrivethemes.com\/en\/articles\/4426147-how-to-use-the-thrive-theme-builder-site-wizard\" style=\"outline: none;\">you&#8217;ll need to go through the Thrive Theme Builder Setup Wizard, first.<\/a><\/p>\n<p>Once the Thrive Theme Builder visual editor is locked &amp; loaded, use the following instructions to deploy one (or even all!) of the <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466499\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\">reading progress indicators<\/span><\/span> described below&#8230;<\/p>\n<h3 id=\"t-1607513435511\">Adding Horizontal Progress Bars<\/h3>\n<p>Start by highlighting the \u201cTheme Template Name\u201d breadcrumb and opening the Main Options tab in the left sidebar.<\/p>\n<p>From there, simply toggle ON the \u201cReading progress indicator\u201d option and choose which \u201cProgress indicator location\u201d you want to use (in the dropdown box that appears).<\/p>\n<p>You have 2 options&#8230;<\/p>\n<h4 id=\"t-1607513435512\">Option 1: Top of viewport<\/h4>\n<p>Use this horizontal progress bar option with fixed headers (that disappear as you scroll down the page):<\/p>\n<p><span><img decoding=\"async\" alt=\"&quot;Top of viewport&quot; horizontal progress bar option\" data-id=\"113386255\" width=\"769\" data-init-width=\"3584\" height=\"437\" data-init-height=\"2036\" title=\"7. Top-of-viewport-progress-bar\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/12\/7.-Top-of-viewport-progress-bar.jpg\" data-width=\"769\" data-height=\"437\" loading=\"lazy\" style=\"aspect-ratio: auto 3584 \/ 2036;\"><\/span><\/p>\n<p>The \u201cTop of viewport\u201d horizontal progress bar option.<\/p>\n<h4 id=\"t-1607513435513\">Option 2: Underneath the header<\/h4>\n<p>Use this horizontal progress bar option with your Sticky Headers or even <a href=\"https:\/\/thrivethemes.com\/sticky-transition-wordpress-headers\/\" style=\"outline: none;\">Sticky Transition Headers<\/a>:<\/p>\n<p><span><img decoding=\"async\" alt=\"&quot;Underneath the header&quot; horizontal progress bar option\" data-id=\"113386256\" width=\"769\" data-init-width=\"3584\" height=\"437\" data-init-height=\"2036\" title=\"8. Underneath-the-header-progress-bar\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/12\/8.-Underneath-the-header-progress-bar.jpg\" data-width=\"769\" data-height=\"437\" loading=\"lazy\" style=\"aspect-ratio: auto 3584 \/ 2036;\"><\/span><\/p>\n<p>The \u201cUnderneath the header\u201d horizontal progress bar option.&nbsp;<b>Note:<\/b>&nbsp;this option can only be used with Headers using the&nbsp;Sticky scroll behaviour option.<\/p>\n<p>Once you select your progress indicator location, just assign it a color (your Thrive Theme Builder brand color is recommended) and modify its pixel height as you like:<\/p>\n<p><span><img decoding=\"async\" alt=\"Set your Horizontal Progress Bar color &amp; pixel height\" data-id=\"113386257\" width=\"769\" data-init-width=\"3584\" height=\"437\" data-init-height=\"2036\" title=\"9. Set-Progress-Bar-Color-and-Height\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/12\/9.-Set-Progress-Bar-Color-and-Height.jpg\" data-width=\"769\" data-height=\"437\" loading=\"lazy\" style=\"aspect-ratio: auto 3584 \/ 2036;\"><\/span><\/p>\n<p>You can also change the color and pixel height of your horizontal progress bar.<\/p>\n<h4 id=\"tab-con-10\" style=\"text-align: center;\" data-hide=\"true\">&#8220;Underneath the Header&#8221; Progress Bar Pro Tip<\/h4>\n<p>If you choose the \u201cUnderneath the header\u201d progress indicator location, then you\u2019ll need to make your header \u201cSticky\u201d.<\/p>\n<p>You can do this by highlighting your&nbsp;Header&nbsp;breadcrumb, entering the \u201cEditing Header\u201d mode, opening the&nbsp;Scroll Behavior&nbsp;tab in the visual editor\u2019s left sidebar, and setting the \u201cBehavior on Scroll\u201d option to&nbsp;Sticky:<\/p>\n<p><span><img decoding=\"async\" alt=\"Make your Header design Sticky\" data-id=\"113386258\" width=\"729\" data-init-width=\"3584\" height=\"414\" data-init-height=\"2036\" title=\"10. How-To-Make-your-Header-Sticky\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/12\/10.-How-To-Make-your-Header-Sticky.jpg\" data-width=\"729\" data-height=\"414\" loading=\"lazy\" style=\"aspect-ratio: auto 3584 \/ 2036;\"><\/span><\/p>\n<p>When using the \u201cUnderneath the header\u201d horizontal progress bar option, make sure to change your Header\u2019s scroll behaviour to&nbsp;Sticky.<\/p>\n<p>And that\u2019s it!<\/p>\n<p>Save your work and you\u2019ll have a <b>Horizontal Progress Bar <\/b>visually working to inform your readers just how much article they have left to cover when scrolling down your blog posts.<\/p>\n<h3 id=\"t-1607513435514\">Adding Estimated Reading Time Indicators<\/h3>\n<p>To display Estimated Reading Times at the top of your blog posts, you\u2019ll need to drag &amp; drop any design element that uses text into the Top Section of your Default Post template so you can use it to show a particular dynamic text feature.<\/p>\n<p>To do this, first highlight the default text you dropped onto the page and then click on the \u201cstacked pancakes\u201d looking icon in the text editor floating bar. From there, select the \u201cContent\u201d option from the first dropdown box, and then the \u201cReading time remaining (in minutes)\u201d option in the second dropdown box:<\/p>\n<p><span><img decoding=\"async\" alt=\"Add &quot;Reading time remaining (in minutes)&quot; dynamic text\" data-id=\"113386259\" width=\"769\" data-init-width=\"3584\" height=\"437\" data-init-height=\"2036\" title=\"11. Add-Estimated-Reading-Time-to-Post-Template\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/12\/11.-Add-Estimated-Reading-Time-to-Post-Template.jpg\" data-width=\"769\" data-height=\"437\" loading=\"lazy\" style=\"aspect-ratio: auto 3584 \/ 2036;\"><\/span><\/p>\n<p>To dynamically display an estimated reading time in the above-the-fold Top Section of your blog posts, set a&nbsp;Text&nbsp;element to the following&nbsp;Dynamic Text options: 1) \u201cContent\u201d &amp; 2) \u201cReading time remaining (in minutes)\u201d.<\/p>\n<p>Once applied, the amount of time needed to read an article (in minutes) will replace the default text PLUS the words \u201cminutes remaining\u201d. Just modify this auto-generated suffix to say whatever you want (like \u201c# Minute Read\u201d instead).<\/p>\n<p>Once you save your work, readers will be able to see exactly how long one of your articles takes to read \u2014 as soon as a post loads!<\/p>\n<h3 id=\"t-1607513435515\">Adding Auto-Updating Reading Time Remaining Indicators<\/h3>\n<p>This last Reading Time Indicator feature is an adaptation of the Estimated Reading Time indicator discussed above.<\/p>\n<p>Just like the previous indicator feature, first set your text to dynamically display the \u201cReading time remaining (in minutes)\u201d option.<\/p>\n<p>However, now you\u2019ll make sure this dynamic text lives in a <b>floating element<\/b> (like a Sticky Sidebar) instead of a fixed, above-the-fold Top Section:<\/p>\n<p><span><img decoding=\"async\" alt=\"Reading Time Remaining example in a Sticky Sidebar\" data-id=\"113386261\" width=\"769\" data-init-width=\"1612\" height=\"437\" data-init-height=\"916\" title=\"12. Remaining-Reading-Time-Indicator\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/12\/12.-Remaining-Reading-Time-Indicator.gif\" data-width=\"769\" data-height=\"437\" loading=\"lazy\" style=\"aspect-ratio: auto 1612 \/ 916;\"><\/span><\/p>\n<p>To dynamically display an auto-updating reading time remaining indicator throughout your post, add a&nbsp;Text&nbsp;element to a floating element (like a Sticky Sidebar) and set its&nbsp;Dynamic Text options to: 1) \u201cContent\u201d &amp; 2) \u201cReading time remaining (in minutes)\u201d.<\/p>\n<p>Because the \u201cReading time remaining (in minutes)\u201d dynamic text feature auto-updates itself as you scroll down the page, it\u2019s perfect for showing readers how much time is left to finish a given article \u2014 no matter where they currently are within the text.<\/p>\n<p>To get started deploying this feature, make sure the design element you\u2019re adding the dynamic text to is \u201cSticky\u201d (so it\u2019ll remain visible as your readers scroll). Sticky Sidebars are great candidates for this job!<\/p>\n<p>If adding this feature to a Sticky Sidebar, just highlight the Sidebar Section breadcrumb in your visual editor window, open its Scroll Behaviour tab in the visual editor\u2019s left sidebar, and toggle ON the \u201cEnable sticky sidebar\u201d option:<\/p>\n<p><span><img decoding=\"async\" alt=\"Make your Sidebar Sticky\" data-id=\"113386263\" width=\"769\" data-init-width=\"3584\" height=\"437\" data-init-height=\"2036\" title=\"13. Set-Template-Sidebar-to-Sticky\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/12\/13.-Set-Template-Sidebar-to-Sticky.jpg\" data-width=\"769\" data-height=\"437\" loading=\"lazy\" style=\"aspect-ratio: auto 3584 \/ 2036;\"><\/span><\/p>\n<p>Make sure your Sidebar Section\u2019s scroll behaviour is set to \u201cSticky\u201d.<\/p>\n<p>Now you\u2019re ready to add a Text element to the Sidebar Section. It\u2019s best to do this in the <b>middle <\/b>of the Sidebar Section so it remains visible as readers scroll up or down a page:<\/p>\n<p><span><img decoding=\"async\" alt=\"Add your Remaining Reading Time indicator to the middle of your Sticky Sidebar\" data-id=\"113386264\" width=\"769\" data-init-width=\"3584\" height=\"437\" data-init-height=\"2036\" title=\"14. Add-Reading-Time-Remaining-to-Sticky-Sidebar\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/12\/14.-Add-Reading-Time-Remaining-to-Sticky-Sidebar.jpg\" data-width=\"769\" data-height=\"437\" style=\"aspect-ratio: auto 3584 \/ 2036;\" loading=\"lazy\"><\/span><\/p>\n<p>Add a&nbsp;Text element to the middle of your Sidebar Section (so it remains visible for readers when scrolling up and down) and apply the same Dynamic text settings: 1) \u201cContent\u201d &amp; 2) \u201cReading time remaining (in minutes)\u201d. Adjust the prefix and suffix text as needed.<\/p>\n<p>Just add or modify any prefix and\/or suffix text you need to complement the \u201cReading time remaining (in minutes)\u201d dynamic text to suit your Sticky Sidebar. Then save your work.<\/p>\n<p>Now when your readers scroll through your articles, the time remaining<b> <\/b>will always be visible.<\/p>\n<h2 id=\"t-1607513435516\">Where Should You Use Reading Progress Indicators?<\/h2>\n<p>It\u2019s true that these Reading Progress Indicator features are pretty awesome and super easy to deploy on ANY of your theme templates inside <a href=\"https:\/\/thrivethemes.com\/themebuilder\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">Thrive Theme Builder<\/a>\u2026<\/p>\n<p>&#8230;but should you use them across every single post and page of your website?<\/p>\n<p>Definitely not.<\/p>\n<p>Here\u2019s some important suggestions about WHERE and WHERE NOT to use Reading Progress Indicators on your site to maximize their retention boosting potential:<\/p>\n<h3 style=\"font-size: 20px !important;\" id=\"t-1607513435518\" data-hide=\"true\">DO Use Reading Progress Indicators on:<\/h3>\n<ul>\n<li style=\"\"><span style=\"\">Short posts that require some scrolling (knowing the time commitment is short will get more readers to stick around)&nbsp;<\/span><\/li>\n<li style=\"\"><span style=\"\">Long form posts or articles<\/span><\/li>\n<li style=\"\"><span style=\"\">Review posts<\/span><\/li>\n<li style=\"\"><span style=\"\">News articles<\/span><\/li>\n<li><span>Stories or book chapters (if you publish \/ preview \/ tease your work online\u2026 Amazon Kindles do this to boost reading times, so why shouldn\u2019t you?)<\/span><\/li>\n<\/ul>\n<h3 style=\"font-size: 20px !important;\" id=\"t-1607513435519\" data-hide=\"true\">DON\u2019T Use Reading Progress Indicators on:<\/h3>\n<ul>\n<li style=\"\"><span style=\"\">Short, daily, bite-sized style, non-scrollable posts<\/span><\/li>\n<li style=\"\"><span style=\"\">Infographic posts or pages<\/span><\/li>\n<li style=\"\"><span style=\"\">Sales pages<\/span><\/li>\n<li style=\"\"><span style=\"\">Product description pages<\/span><\/li>\n<li><span>Landing pages<\/span><\/li>\n<li><span>Lead generation pages<\/span><\/li>\n<\/ul>\n<h2 id=\"t-1607513435517\">How Long Does It Take to Read Your Posts?<\/h2>\n<p>Would your content benefit from more readers making it to the comments section?<\/p>\n<p>Of course it would, so take a few minutes right now to add (at least) a <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466489\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466489\" data-dropdown-placement-param=\"top\" data-term-id=\"307466489\">read meter<\/span><\/span> to your \u201cDefault Post\u201d <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466461\" data-dropdown-placement-param=\"top\" data-term-id=\"307466461\">template<\/span><\/span> inside Thrive Theme Builder.<\/p>\n<p>And if you need additional <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466472\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466472\" data-dropdown-placement-param=\"top\" data-term-id=\"307466472\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466453\" data-dropdown-placement-param=\"top\" data-term-id=\"307466453\">WordPress<\/span><\/span><\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466472\" data-dropdown-placement-param=\"top\" data-term-id=\"307466472\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466472\"> <\/span><\/span><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466456\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466456\" data-dropdown-placement-param=\"top\" data-term-id=\"307466456\"><span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466472\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466472\" data-dropdown-placement-param=\"top\" data-term-id=\"307466472\">tutorials<\/span><\/span><\/span><\/span> to improve your website, check out these ones:<\/p>\n<ul>\n<li><a href=\"https:\/\/thrivethemes.com\/seo-friendly-blog-posts\/\">How to Create <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466470\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466470\" data-dropdown-placement-param=\"top\" data-term-id=\"307466470\">SEO<\/span><\/span>-Friendly Blog Posts Users and Bots Will Love (14 Tips)<\/a><\/li>\n<li><a href=\"https:\/\/thrivethemes.com\/what-makes-a-good-website\/\">Back to Basics: What Makes a Good Website?<\/a><\/li>\n<li><a href=\"https:\/\/thrivethemes.com\/copywriting-tips-for-beginners\/\">13 Copywriting Tips for <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466468\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466468\" data-dropdown-placement-param=\"top\" data-term-id=\"307466468\">Beginners<\/span><\/span> (How to Write Like a Pro)<\/a><\/li>\n<\/ul>\n<p><strong>By the way, did you know you can get Thrive Theme Builder <em>PLUS<\/em> our entire DIY solopreneur toolkit of conversion focused WordPress plugins by getting<\/strong><strong><span>Thrive Suite?<\/span><\/strong><\/p>\n<p>We\u2019re constantly adding awesome new features AND professionally designed templates to all our products to make it easier, faster, and even <em>fun<\/em> to run a successful online business.<\/p>\n<p>Or <a href=\"https:\/\/thrivethemes.com\/themebuilder\/\">Start with Thrive Theme Builder, instead.<\/a><\/p>\n<p>Still have any questions about <span data-action=\"click-dropdown#toggle\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\"><span data-action=\"click-dropdown#toggle\" data-dropdown-menu-id-param=\"menu_term_307466499\" data-dropdown-placement-param=\"top\" data-term-id=\"307466499\">Reading Progress Indicators<\/span><\/span> or how to customize them to suit your website? Please share them in the comments section below!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u201cHow long is this gonna take to read?!\u201d That\u2019s the subconscious question every online visitor asks themselves before reading anything you, me, or anyone has ever published. And can you blame them? With so many blog posts, books, news feeds, Netflix shows and YouTube channels out there vying for our precious attention, ain\u2019t nobody got [&hellip;]<\/p>\n","protected":false},"author":232182,"featured_media":113477069,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[25572],"tags":[94,25351,26380,23443,14039],"class_list":["post-113386189","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-build-your-funnels","tag-blogging","tag-silo3-cro","tag-thrive-theme-builder","tag-ttb","tag-web-design","post-wrapper","thrv_wrapper"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/posts\/113386189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/users\/232182"}],"replies":[{"embeddable":true,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/comments?post=113386189"}],"version-history":[{"count":0,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/posts\/113386189\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/media\/113477069"}],"wp:attachment":[{"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/media?parent=113386189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/categories?post=113386189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/tags?post=113386189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}