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;
}