With the Divi blog module you can activate a read more link for your blog posts, but unfortunately, there is no option to transform this in a read more button. In this tutorial, we are going to change the Divi read more text link into a button. I am also covering how you can do this with the pagination buttons.
We are going to start with the read more button.
Divi Read more blog button
First, you need to enable the read more link in the Divi blog module. Open the blog module and under element, you can enable the show read more button.
To transform the read more text link into a button you can place the following CSS in Divi > Theme Options > CSS or in you Divi child theme CSS stylesheet.
/* Read more blog button */
.more-link {
background-color: #1f568e;
display: inline-block !important;
color: #fff;
padding: 5px 15px;
margin-top: 15px;
text-transform: uppercase;
}
.more-link:hover {
background-color: #3683d2;
}Refresh and clear your browser cache and your read more link looks now like this.
To change the background color you can change the color code in the CSS.
Pagination buttons
For the pagination buttons you can use the folllowing CSS code:
/* Pagination buttons */
.pagination .alignleft a,
.pagination .alignright a {
background-color: #1f568e;
display: inline-block !important;
color: #fff;
padding: 5px 15px;
text-transform: uppercase;
}
.pagination .alignleft a:hover,
.pagination .alignright a:hover {
background-color: #3683d2;
}And this is the end result:
I don’t see any css code to enter into the Divi Theme options.
Sorry they where removed after an update, I placed them back.
Worked great. Thanks so much!
Works like a charm! Thank you for sharing.
Hi!
We have taken on a client using this theme, and their theme does not have the same interface options described in this post to enable the “Read More” links. There isn’t a “Blog Settings” section or “Content” tab as shown here. The “Post Options” are located under Layout >> General Settings >> Post Info Section, but you can can only enable/disable “Author”, “Date”, Categories”, and “Comments”, there is no “Read More” link control.
Can you please let us know what we can do to get these enabled? The client’s blog currently has no visible link to click through to the posts at all:
https://neowatertreatment.com/innovative-chemistry-blog/
Thank you so much!
Hi,
Is the Divi theme up to date?
Hi!
We did not develop the site, we inherited it from another developer, so we’re not sure. Is there a way to decipher the theme version? And if it isn’t up to date, what are our options? Is there some sort of css/functions.php code we can add to the child theme to get these in place? “Read More” links are a pretty necessary function of WordPress, so it’s a bit confusing to have them hidden at default – there is currently no visible prompt for readers to actually click through to the blog posts :\.
Perfect, just what I needed! Thanks so much 🙂
This is SO helpful! Is there a way to add a rounded border also?
I added this but it didn’t work:
border-width: 2px;
border-radius: 5px !important;
border-color: #000;
Nevermind! Forgot border-style: