How to customize the Divi Blog “Read More” text

The Divi Blog module allows you to list all of your blog posts anywhere on your website.

In the modules element settings, there is an option to enable a “Read More” text link that can be clicked to take users to the full blog post.

If you want to customize the read more text link, you will need to add some custom CSS or code to your Divi website.

Two of the most popular Divi Blog module customization requests are to;

• Change the “Read More” text to different text
• Change the “Read More” link into a button
• Change the Blog module pagination text

This article will show you how to change the text in the Read More anchor link and to change the text into a button with your custom text.

You will need to enable the Read More text, change the text using jquery, and style using custom CSS. Let’s get started

To change the Divi Blog module “Read More” text

Step 1 – In your WordPress dashboard go to Divi > Theme Options > Integration and ensure that the Enable header code is enabled.

Step 2 – Then add the following code into the text area labeled “Add code to the < head > of your blog”. If you want to use a different text then you can edit the “Continue Reading” text for your own custom text

<script>
jQuery(document).on('ready', function () {
//Replace read more link text
jQuery(".et_pb_post a.more-link").html(function () {
return jQuery(this).html().replace('read more', 'Continue Reading Post');
});
});
</script>

Step 3 – Click the save button and your updated text link will now show on your website

Change the Divi Blog module “Read More” anchor text into a button

In the step above we have activated the “Read More” text for blog post listings in the Divi Blog module and changed the wording to say “Continue Reading”.

To further customize the design of the “Continue Reading” text we are now going to style it into a button.

The easiest way to do this is to add custom CSS to your Divi Theme Options that will target the post link class.

You can also add it to a Divi child theme.

Step 1 – In your WordPress dashboard go to Divi > Theme Options and scroll all the way to the bottom where the Custom CSS box is located. Add the following CSS code.

/*Divi Read More style as button*/
.et_pb_post a.more-link {
transition-duration: 0.4s;
color: #C50000;
background: #FFFFFF;
border:1px solid #C50000;
padding: 5px 10px;
margin-top: 15px;
border-radius: 5px;
display: inline-block;
}
/*Divi Read More style as button - hover*/
.et_pb_post a.more-link:hover {
color: #FFFFFF;
background: #C50000;
}

Step 2 – Click the save button and your Read More text link will now show styled as a button on your website.

Customizing the Pagination text

At the bottom of your blog page, you may also want to customize the blog pagination text to match the buttons you added to the individual blog posts in the step above. To do this you will just need to add some extra custom CSS to your Divi Theme options.

In your WordPress dashboard go to Divi > Theme Options and scroll all the way to the bottom where the Custom CSS box is located. Add the following CSS code.

/* Pagination buttons */
.pagination .alignleft a,
.pagination .alignright a {
transition-duration: 0.4s;
color: #C50000;
background: #FFFFFF;
border:1px solid #C50000;
padding: 5px 10px;
margin-top: 15px;
border-radius: 5px;
display: inline-block;
}
.pagination .alignleft a:hover,
.pagination .alignright a:hover {
color: #FFFFFF;
background: #C50000;
}

Wrapping Up

The Divi Blog module allows you to list posts with a simple “Read More” text link, but many people want to change this to be more unique. Adding a button for the articles in your Divi blog module should increase the CTR (click thru rate) of your blog posts and can help create a more universal site styling.

As with everything in Divi, there are many ways to achieve similar results so you can also check out this post which shows How to add pagination to the Divi Blog module using the WP-Navi plugin.

Drop a link in the comments to show us how you customized your Divi Blog module.