Martin TolovskiProviding 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
- FAQs About ‘Read More’ Links and Buttons
- Customizing the ‘Read More’ Link in the Divi Blog Module
- Learn More and Customize Further
- Wrapping Up
FAQs About ‘Read More’ Links and Buttons
What is a ‘Read More’ link/button?
A ‘Read More’ link or button is a clickable link or button that is typically placed after a brief summary or introduction of a blog post. Clicking on the link or button takes the reader to the full version of the post on a separate page.
Why are ‘Read More’ links/buttons used in blog posts?
Read More’ links/buttons are used in blog posts to improve the user experience by providing readers with a preview of the content and allowing them to choose whether to read the full post or not. This can also help to reduce page load times and improve website performance.
What are the benefits of using ‘Read More’ links/buttons in blog posts?
The benefits of using ‘Read More’ links/buttons in blog posts include:
- Improving the user experience by providing readers with a preview of the content and allowing them to choose whether to read the full post.
- Reducing page load times and improving website performance.
- Encouraging visitors to explore more content on the website by displaying previews of other posts.
Are there any downsides to using ‘Read More’ links/buttons in blog posts?
The main downside to using ‘Read More’ links/buttons in blog posts is that they may reduce the visibility and accessibility of the full post. Some readers may be deterred from clicking on the link or button and may miss out on valuable content.
Where should ‘Read More’ links/buttons be placed in a blog post?
‘Read More’ links/buttons should be placed after a brief summary or introduction of the post, typically after the first few paragraphs. This allows readers to get a sense of what the post is about and decide whether they want to continue reading.
Should ‘Read More’ links/buttons be used for every blog post?
‘Read More’ links/buttons do not need to be used for every blog post. They are most useful for longer posts or posts that contain multimedia content that may slow down page load times. For shorter posts, it may be more effective to display the full content on the page to encourage readers to engage with the content.
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 to 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 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:
Wrapping Up
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.
Try Divi Areas Pro today
Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.
Click here for more details
More Articles You Will Like
