Dear Divi Maniacs, how are you?
Today I needed to change the text “Read more” on a website and I looked at how to do this easy thing.
I don’t want to waste your time so… here is what you have to do!
The things to do are 3:
- Add a CSS Class
- Add a few lines of jQuery
- Customize the text
Are you ready?
Let’s Go!
Before you add your jQuery code, add a custom CSS Class to the blog module as follows:
- CSS Class: et-custom-read-more-text
And now… ladies and gentlemen… The jQuery.
To add the jQuery add a code module over the blog module. The position of the “code module” is very important.
Now you have simply to copy and paste the following jQuery code making sure to wrap the code with the necessary script tags:
(function($) {
$(document).on("ready ajaxComplete", function() {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("View Post");
});
})(jQuery);
This code basically tells the browser to change the “Read More” link text to “View Post” (or the text you want) once the page loads or once more blog posts are loaded with the blog module’s pagination (ajax).
Very important… Remember to add
<script> </script>
before and at the end of the code.
Save your page and enjoy your new customization.
That’s all, folks!