How To Style Customize and Change The Divi Blog Read More Button Tutorial by Pee Aye Creative

How To Style And Customize The Divi Blog Read More Button

This tutorial will show you how to style and customize the Divi Blog module read more link and turn it into a button with an icon and custom text!

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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.

settings for the Divi Blog module read more button

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>

Last updated Aug 31, 2021 @ 11:30 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally 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 :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

58 Comments

  1. Cletus

    Thank you so very much for this article.
    I have a question, I added the .js script but it did not change the text

    Reply
      • Ken Brayton

        Your instructions state we should remove the tags. In the latest version of Divi, those tags ARE required to make the jquery code work.

        Divi really should add some more customization options for this. It’s kinda lame not to allow for fine tuning the Read More options. So thanks for this article!

  2. Jim Offutt

    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.

    Reply
  3. Senan

    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.

    Reply
  4. Amy Valentine

    Perfect! The js code was exactly what I needed to edit the Read More text only. Thanks Nelson:)

    Reply
  5. Tom Wright

    Great wee tutorial- this is exactly what I’ve been looking for, Thank you, Nelson

    Reply
  6. TT619

    This is wonderful. Can it be achieved for only selected blog modules – not all?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  7. bobo bobo

    Hi, How to solve this in the case of a multilingual website? Otherwise a perfect website!

    Reply
  8. Reine-Marie

    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 !

    Reply
      • Sarah Cauble

        I’ve encountered the same issue, the hover color isn’t working even after adding !important

      • Hemant Gaba

        Hey Sarah,

        I am afraid that I am not able to spot the Read More button so could you please direct me in the right direction?

      • Alissa Cattabriga

        I’m having this issue as well. Maybe something changed in Divi but I cannot change the background color of the button on hover no matter what I do.

  9. Bertram Somaweera

    Thank you, very helpful.

    Reply
  10. Barry

    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.

    Reply
    • Hemant Gaba

      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. 🙂

      Reply
      • Arquimedes

        Thank you very very much. You already answered the question I had 👍

      • Kim

        Thank you so much, I was looking to do this for a specific blog module only. It worked beautifully!

  11. Cammie

    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?

    Reply
    • Hemant Gaba

      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.

      Reply
  12. David

    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

    Reply
  13. Ingrid Moyle

    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

    Reply
  14. javier

    Awesome! thanks so much for posting this. Very helpful.
    Javier

    Reply
    • Hemant Gaba

      Hi Javier,

      We are glad that we could offer you some help. 🙂

      Reply
  15. Vera

    Thank you very much for this tutorial! 🙂 It worked great before, but after one of the last updates (of divi/wordpress), I now get the error: “Uncaught TypeError: jQuery(…).on is not a function” for the first line of the snippet. Is the anything I can do?

    Reply
    • Hemant Gaba

      Hi Vera,

      The issue is happening because of the setting named “Defer Additional Third Party Scripts” under the Performance Tab. It is recommended to keep this setting closed as it can cause major conflicts on the website.

      Reply
  16. evert

    Thank you very much for this tutorial!

    But why is the button NOT showing on my iphone?
    It should be no?

    Thanks!

    Reply
  17. David

    It looks like this only works with the Divi Theme and not the Divi Builder used on a different theme. Is that correct? I’ve tried it a bunch of different ways and it doesn’t work. Any ideas on how to use it with the builder as opposed to the theme?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi David,
      I don’t see how that would make any difference for this particular tutorial, it is only specific to the Divi Builder (which is the same thing as part of the theme). It must be something else.

      Reply
  18. Will

    Any idea why adding “margin-top: 20px;” doesn’t actually increase the space between the post content and the read-more link? I’ve tried adding it in custom CSS in the blog module as well as in the main custom CSS like this:

    .et_pb_post a.more-link {
    margin-top: 20px !important;
    }

    Am I doing something wrong? It just doesn’t have any effect?

    Reply
    • Hemant Gaba

      Hey Will,

      The margin-top is not working because the display properly of the link is set to inline. If you want the margin to work, use display: block !important with the margin property and it will work.

      Let me know how it goes.

      Reply
  19. Linda

    How do I center the button? Right now it is left aligned.

    Reply
  20. Maia

    I’m trying to capitalize the first letter of Read more, but it only works on one of my pages as I have the blog module on multiple pages, how can I fix this?

    Right now I have this written:
    .et_pb_post a.more-link:first-letter {
    text-transform: capitalize;
    }

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      You can use text-transform: capitalize on the a.more-link and it will be fine (no need for first-letter). As for the whole site, that depends where you are putting the code.

      Reply
  21. Rick

    I saw on one of your other tutorials you have the buttons aligned to the bottom of the module. How do you accomplish that?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      That is done with jQuery in the other tutorial about equal height, and would only be relevant if the posts were equal height, otherwise they are at the bottom.

      Reply
  22. Mark Hancock

    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

    Reply
    • Hemant Gaba

      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.

      Reply
  23. Tom

    Hey, thank you so much. your article really helped me a lot. I’m just confused about where should I post this code. in blog module?
    CheesyMag

    Reply
  24. Rasmus

    Hi Nelson. I am experiencing some hiccups with the hover effect on the “read more” button, after adding additional CSS to customize the pagination buttons. This results in the pagination buttons having a hover effect but not the “read more” butten. Could there be some conflicting CSS code?

    Page Setting; Custom CSS:

    /*style the Divi blog link text as a button*/

    .et_pb_post a.more-link {
    color: #ffffff;
    background: #f79646;
    border: 2px solid #f79646;
    padding: .7em 1.3em;
    margin-top: 20px;
    border-radius: 3px;
    text-transform: capitalize;
    display: block;
    transition: all 0.3s ease-in-out;
    text-align: center
    }

    /*style the Divi blog link text as a button on hover*/

    .et_pb_post a.more-link:hover {
    background: transparent;
    color: #f79646;
    border: 2px solid #f79646;
    transition: all 0.3s ease-in-out;
    }

    /*add a neceassry position to the blog posts*/

    .et_pb_blog_grid .et_pb_post, .et_pb_posts .et_pb_post {
    position: relative;
    }

    /*make the title link spread over the entire post*/

    .et_pb_blog_grid .et_pb_post .entry-title a:after, .et_pb_posts .et_pb_post .entry-title a:after {
    position: absolute;
    display: block;
    content: “”;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    }

    /*change the mouse cursor into a pointer*/

    .et_pb_blog_grid .et_pb_post:hover, .et_pb_posts .et_pb_post:hover {
    cursor: pointer;
    }

    /*style the Divi blog pagination buttons*/

    .pagination .alignleft a,
    .pagination .alignright a {
    color: #ffffff;
    background: #f79646;
    border: 2px solid #f79646;
    padding: .7em 1.3em;
    border-radius: 50px;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
    }

    /*style the Divi blog pagination buttons on hover*/

    .pagination .alignleft a:hover,
    .pagination .alignright a:hover {
    background: transparent;
    color: #f79646;
    border: 2px solid #f79646;
    transition: all 0.3s ease-in-out;
    }

    /*style the wp-pagenavi pagination links*/

    .wp-pagenavi a,
    .wp-pagenavi span {
    color: #000000;
    background: #f1f3f5;
    font-size: 1em !important;
    line-height: 1em;
    font-weight: normal !important;
    border: none;
    padding: 0.45em 0.8em !important;
    border-radius: 100px;
    transition: all .5s;
    }

    /*style the wp-pagenavi current page number*/

    .wp-pagenavi span.current {
    color: #ffffff !important;
    background: #f79646 !important;
    border-radius: 100px;
    }

    /*style the wp-pagenavi pagination links on hover*/

    .wp-pagenavi a:hover {
    color: #ffffff!important;
    background: #f79646!important;
    }

    /*style the wp-pagenavi pages text*/

    .wp-pagenavi .pages {
    background: none;
    }

    /*remove border and center the wp-pagenavi links*/

    .wp-pagenavi {
    border-top: none;
    text-align: center;
    }

    Reply
    • Hemant Gaba

      Hey Rasmus,

      Please remove the /*make the title link spread over the entire post*/ code and this will resolve the issue.

      Reply
  25. Norm

    Hey there Mr. Nelson
    Love your tips and tricks, really helping me learn. I added this code and as expected it worked flawlessly and looks good. I then wanted to center it and nothing seems to work. I tried text-align: center; then added the !important and nothing. I can add a margin and push it over so I know I am adding CSS in the right spot, but I cannot seem to put a margin that centers it. What is this rookie missing?

    Reply
    • Hemant Gaba

      Hey Norm,

      I have checked the URL and the read more text is in the center so I guess the issue is resolved now. Please let us know if you need any other help.

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart