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.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
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: "";
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>
I hope you have enjoyed learning How To Style And Customize The Divi Blog Read More Button. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
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.
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.
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.
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)
I have used change the read more script on one website and it works terrific. However, on another site, I have two blog modules with different categories and would like different text on each category but cannot see how I modify the script.
Please give different Custom Classes to each blog module by going to the Blog Module Settings > Advanced > CSS ID & Classes. For example, the classes that you have given to the blog modules are pa-blog-1 and pa-blog-2 respectively.
Now in the script, add these custom classes before .et_pb_post and this will work. So after adding the classes the script of the first blog module will become: jQuery(document).on('ready ajaxComplete', function () { jQuery(".pa-blog-1 .et_pb_post a.more-link").html(function () { return jQuery(this).html().replace('read more', 'text you want to show for blog 1'); }); });
and the second will become: jQuery(document).on('ready ajaxComplete', function () { jQuery(".pa-blog-2 .et_pb_post a.more-link").html(function () { return jQuery(this).html().replace('read more', 'text you want to show for blog 2'); }); });
Paste both of these codes in the WordPress Dashboard > Divi > Theme Options > Integrations > head panel and change the text in the script that you want to see in the button.
Thank You, your tutorials are wonderful! Have you ever added a second button to the respective blog? So if I wanted a ‘Learn More’ and an ‘Apply Here’ to display – is that possible?
This code will add the Apply Here button to each of the blog grids and you can place the URL at the place mentioned in the code. The more-link class is given to that button so the CSS snippets present in the guide can be used for styling of this button as well and one additional class is also present that is custom-link which can be used for specific customizations.
The only problem is that it cuts the buttons off where a post has a longer title as the Javascript seems to only read the length of the text and not take the button size into account.
I have tried adding margin bottom to the button, but it didn’t change the cut-off issue.
Any ideas on how I can have both buttons and a nice equal grid?
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
In this tutorial, I will show you how to create a backup of your Divi website and explain why they are so helpful and important.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
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.
Thank you, very helpful.
You’re welcome!
Thanks, Nelson brilliant as usual.
I have used change the read more script on one website and it works terrific. However, on another site, I have two blog modules with different categories and would like different text on each category but cannot see how I modify the script.
Please give different Custom Classes to each blog module by going to the Blog Module Settings > Advanced > CSS ID & Classes. For example, the classes that you have given to the blog modules are pa-blog-1 and pa-blog-2 respectively.
Now in the script, add these custom classes before .et_pb_post and this will work. So after adding the classes the script of the first blog module will become:
jQuery(document).on('ready ajaxComplete', function () { jQuery(".pa-blog-1 .et_pb_post a.more-link").html(function () { return jQuery(this).html().replace('read more', 'text you want to show for blog 1'); }); });and the second will become:
jQuery(document).on('ready ajaxComplete', function () { jQuery(".pa-blog-2 .et_pb_post a.more-link").html(function () { return jQuery(this).html().replace('read more', 'text you want to show for blog 2'); }); });Paste both of these codes in the WordPress Dashboard > Divi > Theme Options > Integrations > head panel and change the text in the script that you want to see in the button.
Please let us know if that helps. 🙂
Thank you very very much. You already answered the question I had 👍
Thank You, your tutorials are wonderful! Have you ever added a second button to the respective blog? So if I wanted a ‘Learn More’ and an ‘Apply Here’ to display – is that possible?
Hey Cammie, Could you please try placing the jQuery script inside the
Panel in Theme Options > Integrations and let me know if that helps?https://www.codepile.net/pile/Nop0zJod
This code will add the Apply Here button to each of the blog grids and you can place the URL at the place mentioned in the code. The more-link class is given to that button so the CSS snippets present in the guide can be used for styling of this button as well and one additional class is also present that is custom-link which can be used for specific customizations.
Dear Nelson, great tuto.
Unless i’m mistaken, on your snippet :
/*add an icon to the Divi blog read more button*/
.et_pb_post .more-link:after {
content: “24”;
it should be with an “\” before 24 : content: “\24”;
Best regards
Yes, it must have gotten stripped. I added it back not, thanks!
Hi Nelson
A great tutorial as always! I am trying to have have Read more as buttons in a grid portfolio, and I am using the Divi Tutorial https://intercom.help/elegantthemes/en/articles/3371227-blog-module-equal-height-grid-boxes-with-javascript to equalise blog module heights to get the boxes to line up.
The only problem is that it cuts the buttons off where a post has a longer title as the Javascript seems to only read the length of the text and not take the button size into account.
I have tried adding margin bottom to the button, but it didn’t change the cut-off issue.
Any ideas on how I can have both buttons and a nice equal grid?
Thanks
Ingrid
Hey there,
We also have a tutorial on the same and this is the URL: https://www.peeayecreative.com/how-to-make-the-divi-blog-grid-equal-height/
Please go through this guide and let us know how it goes.
Awesome! thanks so much for posting this. Very helpful.
Javier
Hi Javier,
We are glad that we could offer you some help. 🙂