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

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:

<script>
(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(){
$(document).ajaxSuccess(function(){
$(".et_pb_posts .more-link, .et_pb_blog_grid .more-link").text(custom_read_more_text);
});
})
});
})(jQuery)
</script> 


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

Change style of the Read More Link

To change color of the read more button, add this code to the Divi > Theme Options > General > Custom CSS box:

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


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?