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