All Collections
Divi Documentation
Customizing Divi
Customize Blog Module - Read More Link Text
Customize Blog Module - Read More Link Text

Change text of the read more button. Change style and color of the read more button.

Andrei N avatar
Written by Andrei N
Updated over a week ago

Change text of the Read More Link

1) To change the text of the Read More button in a Blog module go to Divi > Theme Options > Integrations > "Add code to the < head > of your blog" and add this code:

(function($) {
$(document).ready(function() {

var custom_read_more_text = 'Custom Text';

$(".et_pb_posts .more-link, .et_pb_blog_grid .more-link").text(custom_read_more_text);
$(".pagination a").click(function(){
$(".et_pb_posts .more-link, .et_pb_blog_grid .more-link").text(custom_read_more_text);

Then change 'Custom Text' in code as you need.

2) Another way to change text is using this plugin:

  • Install and activate the plugin

  • Open Tools > Text Changes

  • Add "read more" to the Original string field

  • Add "et_builder" to the Text domain field

  • Add new text to the Replacement string field

Change style of the Read More Link

The read more button text style or color can be changed in Design settings > Read More Text:

Using this CSS code you can change other styles of the button, such as padding, background, borders, alignment etc, here is the example:

.et_pb_posts .et_pb_post .post-content .more-link, 
.et_pb_blog_grid .et_pb_post .post-content .more-link {
    border: 1px solid red !important;
    padding: 10px 20px;
    background: orange;
    display: inline-block;
    float: right;

To make it work for one blog module you can add CSS class in Advanced settings of the module:

Then add this class at the beginning of the CSS selectors, like this:

.custom_class.et_pb_posts .et_pb_post .post-content .more-link, 
.custom_class.et_pb_blog_grid .et_pb_post .post-content .more-link {
    color: red !important;
    font-size: 20px !important;

Did this answer your question?