How To Edit Divi Blog Read More Button Style

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.

Two of the most popular Divi Blog module customization requests are to change the "Read More" text to say something else and to make the "Read More" link into a button.

This article will show you how you can customize your Read More text into a button with your own text. You will need to enable the Read More text, change the text using jquery, and style using custom CSS.

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

enable Divi code integration in Theme Options

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>

change Divi read more blog text

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

Divi blog mode read more text changed

2. Make the Divi Blog module "Read More" text link into a button

IIn 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 some custom CSS to your Divi Theme Options to target the post link class.

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.

Wrapping Up

The Divi Blog module allows you to lists 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 CTR to your blog posts and can help create a more universal site styling. It is relatively quick and easy to do so why not give it a try.

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