Would you like to customize the Read More link of the Blog module of Divi ? Then follow our tutorial.
A blog's "Read More" links can be a crucial part of improving the user experience. It is therefore important that we know how to customize them correctly.
In this tutorial, we will show you how to customize the “Read More” link in the Blog module. In this article, we'll show you how to:
- Customize the "Read More" link using the built-in options of Divi
- Align the "Read More" link (left, center, right)
- Turn the "Read More" link into a fullscreen button
- Create a Custom Read More Button with Hover Effects
- Replace the text "Read More" with something else (like "Read the article").
Preview
Here's a quick look at the design we'll be creating in this tutorial.
Load a Blog Module on a Page Using Divi's Theme Builder
To start customizing Read More links, you'll need access to a Blog module.
You can load a predefined layout with any Blog module of your choice or simply add a new Blog module to a page.
To start the process, we will use the blog page from the predefined layout Artificial Intelligence.
Add a new page from the WordPress Dashboard
Then, give a title to your page then click on " Use Divi Builder"
Then click on " Choose layout«
Find and choose " Vision intelligence Blog page«
Finally, choose the Blog layout and click on “ Choose layout«
Customize and align Read More link text
Each Blog module offers the option to show or hide the "Read More" link for each article in the layout. To display the “Read More” link, open the blog settings and toggle the “ Show Read More button to "YES" in the list of blog items you want to display.
Under the Style tab, you can customize the Read More text using one of the built-in options. For this example, let's update the following:
- Font Read More: Barlow
- Read more Dim Light: Semi Bold
- Read more Copy Style: Uppercase (TT), Underline (U)
- Text color Read more: #db0eb7
- Read more Underlined text Color: #3c5bff
- Letter spacing Read more: 1px
Here is the result.
Currently, the "Read More" link is placed on the left by default, unless you change the alignment. To align the link to the center or right of the post, add a CSS snippet as follows:
Under the blog settings advanced tab, add the following CSS to the Read More Button CSS:
display: block;
text-align: right;
The "display:block" will change the link to a block element that spans the full width of its container (in this case, the body of the contents of publication). Once defined as a block element, we can right align the text using “text-align:right”.
Read also: How to Create a Sticky Global Header in Divi
Here is the result.
In order to center the link, simply replace "right" with "center" for the value of the "text-align" property as follows:
Here is the result.
Customize the "Read more" link to look like a button
For this example, we'll create a simple full-width button style for the "Read More" link. Before adding the custom CSS, open the blog settings and update the "Read more" link text as follows:
- Read more Copy style: uppercase (TT)
- Text color Read more: #ffffff
In the previous example, we used “display:block” and “text-align:center” to make the link span the full width of the container and center the text.
See also: How to create a sliding and push menu in Divi
To make it look like a button, all we have to do is add some background color and spacing along with some extra CSS snippets. To do this, go to the Advanced tab and update the CSS of the "Read more" button as follows:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Result
Here is the result !
Creating an advanced button style with CSS
If you want to take the button styling to another level, we can add a background and a hover effect.
To do this, replace the CSS for the "Read More Button" with the following:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-image: linear-gradient(90deg,#01012C 50%,rgba(0,0,0,0) 50%);
background-color: #3c5bff;
transition: all 300ms;
To change the background on hover, you can paste the following CSS on "Learn More Button" when hovering the mouse cursor:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Result
Here is the result !
Change the "Read More" text to something else
In order to change the text "Read more" to something else, like "Read article", we will need a bit of jQuery. But don't worry, these are just a few lines.
Before adding our jQuery code, add a custom CSS class to the Blog module as follows:
- CSS class: et-custom-read-more-text
NOTE: Make sure the class name is correct for jQuery to work.
To add the jQuery that modifies the "Read More" text, add a Code module under the Blog module.
Then paste the following jQuery code, making sure to wrap the code with the necessary script tags:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);This code basically tells the browser to change the text of the "Read more" link to "Read the article" once the page loads.
Result
Here is the result !
Final results
Here's another look at the Read More link (or button) customizations we've done.
Download DIVI Now!!!
Conclusion
So ! That's it for this article. Divi's Blog module allows you to creatively customize the "Read More" link. And if you want to experiment with a few CSS snippets, you can create even more advanced modifications yourself.
We hope this tutorial helps you take those “Read More” links to the next level. If you have any concerns or suggestions, find us in the comments section to talk about it.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
