Providing readers with a brief description of what your blog post is about in the beginning is an excellent method of getting them curious about what they’ll get by continuing to read the article.
Of course, an article title and a good-looking feature image are always powerful in capturing users’ attention. However, a brief content preview can convince them to stick around and click on the ‘Read More’ button.
In this blog post, we want to discuss how to customize the ‘Read More’ link in the Divi Blog Module to your preferences, in order to retain more readers on your Divi website. Let’s begin.
Table of Contents
- Customizing the ‘Read More’ Link in the Divi Blog Module
- Learn More and Customize Further
- Wrapping Up
Customizing the ‘Read More’ Link in the Divi Blog Module
To start changing the appearance of the ‘Read More’ link, you need to access a Divi Blog Module while editing a page from the Divi Builder. For the purpose, you can load a ready-made layout with any blog module that you want, or just add a completely new module on your page.
Switch the ‘Read More’ Link ON
Divi’s Blog Module allows you to either show or hide the ‘Read More’ link for each of your posts. To successfully display the ‘Read More’ link for your Blog Module, open the module settings and switch on the ‘Show Read More Button’ option from the list.
Customize the Basics
Under the ‘Design’ tab of the Blog Module, you can customize the style of the ‘Read More’ text with a different Font, Underline Color, Text Color, and Letter Spacing. For example:
- Font: Roboto
- Font Weight: Bold
- Font Style: Uppercase (TT)
- Text Color: #0c71c3
- Letter Spacing: 1px
The result of this would be the following:
Align the ‘Read More’ Link
The ‘Read More’ text is now aligned to the left, as default. However, if you want to move the text to the center, or the right, you will have to use a text-align CSS property.
To achieve this, access the Blog Settings, and navigate to the ‘Advanced’ tab. Under ‘Custom CSS’, find the ‘Read More’ section, and write the following property:
This delivers the following result:
Turn the ‘Read More’ Link Into a Button
To continue styling the ‘Read More’ text for your Blog Module, you can also decide to turn the text into a button that you can customize further. Again, you will have to use a little CSS for the purpose.
Navigate to the ‘Advanced’ tab of the Blog Module Settings, and under ‘Custom CSS’, find the ‘Read More’ section, where you’ll write the following property:
Which leads to the following result:
To customize the button even further, you can decide to add advanced styles such as background color or images, as a well as hover effects when the user scrolls through the section.
Learn More and Customize Further
Now, some of you might want to change the ‘Read More’ text and turn something that is general into more specific. To make this happen, you will have to combine both CSS and jQuery.
At this point, we would like to thank Elegant Themes for the inspiration for this article and their excellent tutorial on the subject, Jason Champagne has done a brilliant job, as always.
If you’re interested in expanding your knowledge in more details about using CSS and jQuery for your ‘Read More’ link in your Divi Blog Module, we invite you to watch the MAK’s tutorial on their YouTube channel as well, enjoy:
Adding the ‘Read More’ link to the Divi Blog Module is effortless. Combining the Divi Builder with the Blog Module and the power of Divi customization, you can display your preferred blog post previews and ‘Read More’ buttons in only a few clicks.
What’s more, Divi enables you to carefully present the parts of the blog posts that will spark the users’ curiosity and inspire them to click on the ‘Read More’ link to learn more.