How to Show Post Approximated Checking Out Time and Word Count in Divi (with ReadingTime.js)

How to Show Post Approximated Checking Out Time and Word Count in Divi (with ReadingTime

Some individuals (including me) value a little direct on the length of a post or, more significantly, just how much time is it going to require to check out. A terrific method to do this is to show an approximated reading time and/or word count at the top of your article. You see this function on popular blog sites like medium.com. It does not need to be invasive or sidetrack the user from engaging with the material. It can include a great UX increase for those who invest a lot of time feasting on material on the web.

In this tutorial, we are going to reveal you a simple and fast method to include an approximated reading time and word count to your Divi article. The readingTime.js library we are going to utilize is easy, light-weight, and simple to carry out on your Divi website. Plus you can have more control over the design and positioning of the reading time and word count positioning. All this without needing to count on another plugin!

We’ll be including the approximated reading time and word count to a post design template utilizing the Divi Style Home Builder. Once it is included to the design template, the reading time and word count will show perfectly on all your posts throughout your website.

Let’s begin.

Preview

Here is a glance at the reading time and word count we’ll be contributing to a post design template in Divi.

post estimated reading time and word count

post estimated reading time and word count

post estimated reading time and word count

< img loading= "lazy" src =" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-2.jpg" alt =" post approximated reading time and word count" width=" 880 "height =" 403" class= "aligncenter size-full wp-image-139368 "srcset= "https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-2.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-18.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-19.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-20.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" >< img loading=" lazy" class=" with-border aligncenter size-full wp-image-139328" src=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-3.jpg" alt=" post approximated reading time and word count" width=" 880" height srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-3.jpg 1241w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-21.jpg 252w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-22.jpg 859w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-23.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-24.jpg 610w" sizes=" (max-width: 1241px )100vw, 1241px "> Download the Design totally free To lay your hands on the styles from this tutorial, you will initially require to download it utilizing the button listed below. To get to the download you will require to register for our Divi Daily e-mail list by utilizing the kind listed below. As a brand-new customer, you will get a lot more Divi goodness and a complimentary Divi Design pack every Monday! Just enter your e-mail address listed below and click download if you’re currently on the list. You will not be” resubscribed”

or get additional e-mails.< div class=" et_bloom_locked_container et_bloom_optin_1 "data-page_id=" 139323" data-optin_id=" optin_1" data-list_id=

” mailchimp_c886a2fc0a” data-current_optin_id=” optin_1″ > Download the Files < div class= "et_bloom_form_container with_edge carrot_edge et_bloom_border_solid et_bloom_rounded et_bloom_form_text_light et_bloom_form_bottom et_bloom_inline_1_field" > You have actually effectively subscribed. Please inspect your e-mail address to validate your membership and get

blog post template for Divi's Copywriter Layout Pack

access to complimentary weekly Divi design loads! How to Submit The Design template Go to Divi Style Contractor To publish the design template, browse to the Divi Style Home builder in the backend of your

blog post template for Divi's Copywriter Layout Pack

WordPress site.< img loading=" lazy" class =" with-border

aligncenter wp-image-126950 size-full “src =” https://www.elegantthemes.com/blog/wp-content/uploads/2020/04/alchf1.jpg” alt =” article design template for Divi’s Copywriter Design Load” width =” 880″ height=” 731″ srcset =” https://www.elegantthemes.com/blog/wp-content/uploads/2020/04/alchf1.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/04/alchf1-300×249.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/04/alchf1-768×638.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/04/alchf1-610×507.jpg 610w” sizes=”( max-width: 880px )100vw, 880px” > Upload Site Design Template In the leading right corner, you’ll see

divi Copywriter blog post template

an icon with two arrows2 Click the icon.< img loading=" lazy" class=" with-border aligncenter wp-image-126951 size-full

” src =” https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-5.jpg “alt=” post design template for Divi’s Copywriter Design Load “width=” 880″ height =” 720 “srcset=”

https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-5.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-27.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-28.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-29.jpg 610w “sizes=

“( max-width: 880px) 100vw, 880px” > Browse to the import tab, submit the JSON file which you had the ability to download in this post, and click ‘Import Divi Style Home Builder Templates ‘.

  • < img loading =" lazy "class =" with-border aligncenter wp-image-126952 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-6.jpg" alt=" article design template for Divi’s Copywriter Design Load” width=” 880″ height=” 553″ srcset=” https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-6.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-30.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-31.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-32.jpg 610w” sizes=”( max-width: 880px) 100vw, 880px” > Conserve Divi Style Home Builder Modifications You’ll see a brand-new design template with a brand-new body location that has actually been appointed to All Posts as soon as you have actually submitted the file. Conserve the Divi Style Home builder alters as

    quickly as you desire the design template to be triggered.

    post estimated reading time and word count

    < img loading =" lazy" class =" with-border aligncenter size-full wp-image-128349 "src =" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-7.jpg" alt=" divi Copywriter article design template "width= "880 "height =" 661" srcset=

    post estimated reading time and word count

    ” https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-7.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-33.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-34.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-35.jpg 610w “sizes=”( max-width: 880px )100vw, 880px” > Let’s get to the tutorial so we can discover to construct this thing from scratch, shall we

    post estimated reading time and word count

    ? How to Show Post Approximated Checking Out Time and Word

    post estimated reading time and word count

    Count in Divi What You Required to Start To start, you will require to do the following: Browse to the Divi Style Home Builder Click the mobility icon at the

     Including the Text/HTML to the Post Design template To modify the post design template, click the edit icon on the custom-made body location.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-139339" src=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-9.jpg" alt=" post approximated reading time and word count" width=" 874" height=" 525" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-9.jpg 874w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-39.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-40.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-41.jpg 610w" sizes="( max-width: 874px) 100vw, 874px" > In the post design editor, include a brand-new one-column row under the row including the post meta information in the leading area of the design.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-139338" src=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-10.jpg" alt=" post approximated reading time and word count" width=" 880" height=" 429" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-10.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-42.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-43.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-44.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > When done, include a text module to the brand-new row.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-139337" src="
    

    https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-11.jpg" alt =" post approximated reading time and word count" width= "880" height=" 469" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-11.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-45.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-46.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-show-post-approximated-checking-out-time-and-word-count-in-divi-with-readingtime-js-47.jpg 610w" sizes ="( max-width: 880px) 100vw, 880px" > In the text module settings, paste the following HTML inside the body (utilizing the text

    post estimated reading time and word count

    tab):< p > Reading Time:< period

    design =" color: #edbb 5f;" class =" eta ">( Word Count:

  • Leave a Reply

    Your email address will not be published. Required fields are marked *