Customize Divi’s Read More Link
Divi’s is arguably the best WordPress theme for developers and first-time users alike. Its customizability and flexibility to suit a number of roles and designs is unlike any other theme that I have used. However, with smaller details it still lacks professionalism. The “read more” link present on Divi’s blog module is prime example of this. Today I am going to show you how to modify the what is displayed by the “read more” link and how to stylize the output to make it more professional. Let’s get started.
Solution #1 – Capitalizing “read more”
Many users simply just want the ‘r’ and the ‘m’ to be capitalized to promote a more professional look. I’ve got good news! This is a very simple modification. The first thing that you need to do is to go to a page on your website with a blog module and open its settings. On the “Content” tab, make sure that the read more button is enabled under the “Elements” dropdown. Then click on the “Advanced” tab and open the “Custom CSS” dropdown. Scroll down to the very last box titled “Read More Button.”
If you would like the read more button to say “Read More” enter the CSS code below into the “Read More Button” custom CSS box and then press the green button.
If you would like the read more button to say “READ MORE” enter this phrase in the “Read More Button” custom CSS box instead of the previous CSS code.
Congratulations! You have successfully changed Divi’s read more link to look that much more professional! But what if you need to change what the “read more” link says. For example, what if you needed it to say, “Learn More?”
Well, you can accomplish this too. It is a more involved process, but once you get the hang of it, it can completely change a site. Let me show you how it’s done!
Solution #2 – Changing the Phrase
The first thing that you need to do is to go to a page on your website with a blog module and open its settings. On the “Content” tab, make sure that the read more button is enabled under the “Elements” dropdown. Then click on the “Advanced” tab and open the “CSS ID & Classes” dropdown. Add the class listed below to the “CSS Class” field. Then click the green check button to save your changes.
Next, navigate to your list of pages on the backend of your Wordpress site. This can be done by clicking on “Pages” on the black admin sidebar.
Hover over the name of the page that you have your blog module on. In the bottom left of your screen you should see a URL appear when you leave you mouse hovering over the name of the page. Look for a post ID number for that page. Every page has a unique number. This will occur after your URL in a format similar to the photo below: www.yourdomain.com/wp-admin/?post=YOURNUMBERHERE. Please make note of this number as we will need it in just a second.
Now, click on Divi in the left-hand sidebar of your WordPress backend. Once the page loads, click on the “Integrations” tab.
Next, on the Integrations page, look for the section labeled “Add code to the < head > of your blog” (it is the first black box on the page). Then enter the Java Script and CSS code listed below into the box. NOTE: Replace the phrase“YOURPAGEID” with the number you just wrote down from the last step. Replace the phrase “Read More >” with whatever you would like the read more link to say. Make sure to leave the single quotation marks.
Then scroll to the bottom of the page and click “Save Changes.” Once the page refreshes, navigate back to the page that you have your blog module on. It should now whatever you entered in the code displayed instead of “read more.”
Elegant Themes, the creators of Divi, have no excuse for not already having this functionality in their settings for each blog module. It is only a matter of time before they do add this feature, but until that day here are two fairly easy work arounds.
If you have any questions or need help, please feel free to leave a comment below!
What is your biggest gripe with Divi? Let myself and other readers know below!