This short tutorial has 2 pieces:
- changing the wording of the ‘read more’ link at the bottom of each blog post using the Divi Blog module
- adding a Font Awesome icon to the end of the link (in this case, the right arrow after ‘learn more’)
This tutorial by Andrew Schur gives very direct instructions on changing the ‘read more’ link to read something else. The short of it is, add the below to the Divi > Theme Options > Integrations page under the <body> section (and make sure that block is enabled).
<script type="text/javascript">
(function($) {
$(document).ready(function() {
var newVal = 'Learn More ';
$('.more-link').html( newVal );
});
})(jQuery);
</script>
You’ll notice I left a space after the word More… this is because I know I’m adding an icon just in place of adding padding-left to the :after psuedo-element I’ll be creating.
To add an arrow after the Learn More link, put the following script in the <head> section in the same page you were just in (Divi > Theme Options > Integration)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
And put the below CSS into the Divi > Theme Options page at the bottom in the Custom CSS block.
.et_pb_post .more-link:after {
content:"\f178";
font-family: FontAwesome;
display: inline-block;
}
That’s it!
Easy to change. Thanks
Thank you Torre, really makes a significant difference to offer knowledge (Learn more) instead of giving directions (Read more). Such subtle calls to action help with user retention and engagement.
Works great, thank you!
Great, thanks! What if you have a page where you want the button to say “Learn More” and another where you want the button to say “Download”? Can you do that? Or once you make this change does the button have to read “Learn More” everywhere?
Hey Amanda, This method targets the ‘read more’ button across the site. I’m sure there’s a tutorial out there to allow changes to be more targeted although we don’t have one handy. Good luck!
This worked perfectly on the first page of the blog module results, but subsequent pages still say “Read more”. Any idea what modifications would be needed to make it apply to all pages? THANK YOU!
Agree! This does not work with AJAX pagination – It only displays on the first page.
Hi 🙂 Is there a way to use that also in the comments form- to change the submit button? For example, if you are building your website in another language? Thank so much 🙂
Hey Larisa! I think for that I’d probably end up using a translation plugin like Loco Translate. Anybody else have a suggestion?
Thank you very much for your reply! Is the plugin applicable even if the website uses only one language, if it’s not a multilingual site? Thanks again 🙂
You’re very welcome. Yes it is, actually! You can use this plugin even for English sites to change the wording in plugins (by creating an ‘English’ translation and just translating the pieces you want to change and leaving the rest alone).