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.
▶️ Please watch the video above to get all the exciting details! 👆
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.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about 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.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<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>
Thanks so much for this – worked great except I have a home page where there are 3 feeds for the most recent 1) blog post 2) event post 3) video post, I’d like to customize text for each one, I tried giving each blog module its own id but it only changed all three of them to the same one. Is there away to make them different?
Hi Audrey,
What you described is unusual, so this tutorial would not do that. You could try targeting each button with a different nth-child class, and updating the jQuery snippet 3 times for each class – that seems like it could work, but not sure!
Hi Nelson,
I just used the last snippet to change the ‘read more’ buttom to show a dutch word instead. This is working fine and now I have two questions:
1 Is it normal that I have to change this myself or should it change automtically in dutch when my site language is set to Dutch?
2 The goal is to translate this website also to French, so how can I show a French word on the French version of the site and the Dutch word on the Dutch site?
Thank you so much!
Lien
Hi Lien!
The text translation will be depend on the translation plugin. However, you can manually translate the text using Say what plugin or custom JS.
Thank you Nelson….I have multiple post type (blog, sermon, and job board). Is there a way to do this only for the job board…..everything else can be read more…but I want the job board to read “Sign me up”.
Thanks!
Mark
Hey Mark,
You can use a different blog module for just the Job Board and then change the Read More text to Sign me up for that module button and see if that helps.
Let me know how it goes.