Select Page

Change Divi Blog ‘Read More’ link to say ‘Learn More’ with arrow

by | Jan 10, 2019 | Divi Theme, Wordpress Tricks

This short tutorial has 2 pieces:

  1. changing the wording of the ‘read more’ link at the bottom of each blog post using the Divi Blog module
  2. 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!

11 Comments

  1. Crystal

    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.

    Reply
  2. Su

    Works great, thank you!

    Reply
  3. Amanda

    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?

    Reply
    • Torre

      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!

      Reply
  4. Christine Scivicque

    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!

    Reply
    • Dan

      Agree! This does not work with AJAX pagination – It only displays on the first page.

      Reply
  5. Larisa

    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 🙂

    Reply
    • Torre

      Hey Larisa! I think for that I’d probably end up using a translation plugin like Loco Translate. Anybody else have a suggestion?

      Reply
      • Larisa Grabar

        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 🙂

        Reply
        • Torre

          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).

          Reply

Submit a Comment

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

how-to-choose-a-wordpress-theme-thumbnail

How To Choose A WordPress Theme For Your Website

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier. This is a 5 page guide with an approximately 4 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

where-to-host-thumbnail

Where To Host Your WordPress Website and Why It Matters

In this guide we discuss what makes 'good hosting' including security, speed, and support. We tell you who we use and why, and give you a coupon! YAY COUPONS! This is a 45 page guide with an approximately 3 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

8-next-level-plugins-cover

8 WordPress Plugins That Can Take Your Website To The Next Level

For our business clients, we install some specialized WordPress plugins. Get our list of the 8 next level plugins we love and the use case for each. 

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm

5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.