How to Change the Read Mode Text to a Button in the Divi Blog Module

Sometimes you want something besides a read more text link in your blog page – perhaps a button?  I know I have… many times.  Read More – gets boring… this can spice it up a bit

Add the following to your Divi > Theme Options – Custom CSS

.yourclass a.more-link {
font-size: 14px;
color: #FFE039 !important;
margin-top: 10px;
float: none;
display: inline-block;
padding: 8px 16px;
border-radius: 20px;
background-color: #01439A;
border: 2px solid #FFE039;
}

Open the page where you have your Blog Module… then go to the section settings and then advanced.  Add in the name of the class – whatever you want to call it as long as it matches the 1st line in the css (change out .yourclass to .whateveryouwanttocallit

Click Save and update.

To break down the css so you can change it to suit your needs

.yourclass a.more-link {   //  this is where you define your class and what it is applying to - in this case the read more link
font-size: 14px;               //  sets the size of the text in the button
color: #FFE039 !important;     // this is the text color
margin-top: 10px;           //  top margin distance
text-transform:capitalize; // if you want the text in all capitals - add this
float: none;                     // sets the float
display: inline-block;      //  not quite sure but w3schools says inline-block elements are like inline elements but they can have a width and a height.
padding: 8px 16px;       // this sets the amount of padding
border-radius: 20px;     // this changes the button shape radius - the higher the number the more rounded it gets - to a point.
background-color: #01439A;   // this is the button color
border: 2px solid #FFE039;      // this sets the color, thickness and style of the border around the button
}

Should you want to change “read more” into “View Full Post” or something else add the below to Divi > Theme Options > Integration – Add code to the < head > of your blog section

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".more-link").text("View Full Post");
});
</script>

I hope this helps!