Adding The Missing Read more Button To The Divi Blog Module
We are creating a great series on the Divi blog module, and before we can do some of our other tutorials we need to address the read more button. Oddly enough, this is treated as text rather than a button, so we are going to fix that and show you how to style and customize the Divi Blog module read more button and change it into a button.
Adjust The Basic Divi Design Settings
Start by styling what you can in the Divi settings. The weird thing is that they have incomplete settings, treating it like text instead of a button. Strange, but that’s why we need this tutorial and snippet.
So go ahead and start with things like the font, font weight, text size, text color, etc.
Make The Divi Blog Read More Text Link Into A Button
Now that we have some basic styles set, let’s continue by adding some CSS to make it look more like a button. We will be adding a background color, border, and hover effect.
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
/*style the Divi blog link text as a button*/
.et_pb_post a.more-link {
color: #ffffff;
background: #0071fc;
border: 2px solid #0070fc;
padding: .7em 1.3em;
margin-top: 20px;
border-radius: 50px;
text-transform: capitalize;
display: inline-block;
transition: all 0.3s ease-in-out;
}
/*style the Divi blog link text as a button on hover*/
.et_pb_post a.more-link:hover {
background: transparent;
color: #0070fc;
border: 2px solid #0070fc;
transition: all 0.3s ease-in-out;
}Add An Icon To The Divi Blog Read More Button
To add some more character to our button, let’s add an icon to it. This is especially important if you alrady use icons on your buttons across your site. This will help you be consistent and fill in a missing gap where there are missing Divi settings.
/*add an icon to the Divi blog read more button*/
.et_pb_post .more-link:after {
content: "24";
font-family: ETModules;
vertical-align: middle;
margin-left: 10px;
}The easiest way to change the icon is to go to the Elegant Themes blog post
Change The Actual Read More Text Terminology Into Something Else
A great way to customize this button is to change the words. So instead of using the default “Read More,” let’s change it to something else. In my example, I am going to change it to “View Full Post,” but of course you can make it say anything you want by replacing the words in the snippet.
If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
<script>
jQuery(document).on('ready ajaxComplete', function () {
//Replace read more link text
jQuery(".et_pb_post a.more-link").html(function () {
return jQuery(this).html().replace('read more', 'View Full Post');
});
});
</script>
Thank you so very much for this article.
I have a question, I added the .js script but it did not change the text
Hi Cletus,
Can you give me any context? Where you added it, did you clear cache, etc.
My designer wants different text for each post. We plan on reusing the same post so I pnly need to do about a dozen of them. Just change the date and content and repost. SO maybe I should be using an individual class for each? Where can I put the class in a post? Using DIVI for the content area. THanks.
Hi Jim,
I think I need some clarification. Are you talking about the blog module, or the blog posts?
Hi Nelson,
Thanks for the useful tutorial!
Is there any way to display custom fields (from the ACF plugin) on Divi Blog module in Grid mode?
Is there any plugin to inject a custom field value under the post title?
It’s possible to do it on Elementor loop using Elementor PRO and Elementor Custom Skin plugin.
Hi Senan, for that you will need the Divi Machine (my affiliate link) plugin. My friend Peter created it and I named it for him 🙂
Perfect! The js code was exactly what I needed to edit the Read More text only. Thanks Nelson:)
You’re welcome Amy! Glad this helped!
Great wee tutorial- this is exactly what I’ve been looking for, Thank you, Nelson
That’s great, Tom! So glad you found this!
This is wonderful. Can it be achieved for only selected blog modules – not all?
You can only change the text for all of them. As for styling, you could but that would be very difficult, you would need to select each one with advanced CSS.
Hi, How to solve this in the case of a multilingual website? Otherwise a perfect website!
Hi Bobo,
I’m really not sure, I’m not experience in multilingual at all. I’m sure here are ways.
Thanks you so much for the quality of your Tutorials Pee Aye Creative !
But I encounter a problem on hover effect read more button blog : I exactly follow your instructions but in hover effect I got nothing but just only the border with any text inside (it doesn’t appear). (in my case Color is #0021be)
I don’t know why it doesn’t work or what could be conflict ?
(I use the Divi builder)
Thanks for your help and your answer !
I would try adding !important to the color, that should solve it.