Divi Blog module comes with excellent features and flexibility to create and design blogs of various types on your website. You can choose posts of which type you would like to display on this module, such as Posts, Pages, Media, and Projects. One of the design options that you will get here is the Read More link.
The Read More link on this module is for truncating the posts, so the post is only a part displayed. Due to the limitation of the screen size is impossible to show the full content for each post.
However, we must admit that the Read More text is not as good as the Read More button. The Read More button is more intuitive, engaging, and evocative for users to click because a button has the potential things to customize more than a link. Such as padding, background, hover style, etc. This article will show you how to turn the Read More text into a Read More button on the Divi blog module.
Steps to Turn the Read More Text into a Button on Divi Blog Module
Step 1: Enable the Read More Link
Go to your Divi editor, and we will start everything from scratch, so create a section with a single column, select the Blog module and insert that module into the column. Once you’ve added the Blog module, you must enable the Read More link. Go to the module settings, then navigate to the Design tab -> Elements. Afterward, please switch on the Show Read More Button option on the list.
Note: Once you enable the Read More link option, you can edit and customize the blog module as you prefer, except for the Read More Text Color setting. On this setting, please keep it on default. We will set the Read More Text Color later in step 2 by adding the CSS snippet.
Step 2: Add the CSS Snippet
Next, we will add simple CSS snippets to the blog module. On the module settings, go to the Advanced tab -> Custom CSS -> Read More Button. Once you enter the Read More Button block, please enable the hover option by clicking the hover icon.
Afterward, copy the two CSS snippets below and paste them into each field (Desktop and Hover).
Desktop (normal state/before hover):
padding: 0.4em 0.8em; color: green!important; line-height: 2em; background: pink; transition: all .5s; border-radius: 5px; font-weight: 500;
padding: 0.4em 0.8em; color: white!important; line-height: 2em; background: blue; transition: all .5s; border-radius: 10px; font-weight: 500;
That’s it. As you can see from the GIF above, the Read More text is turned into a button, and the hover style works properly. Don’t forget to save or publish your project. To see whether the CSS snippets you’ve added work, you can exit from the visual builder or go to your site and open your project on a new window.
Note: You can customize your Read More button by editing the values in the CSS snippets if you want to. For example, if you change the button’s background color (Desktop or Hover), you can do it by replacing the value with a new color name or adding a hex color code (see the image below).
The Bottom Line
This article shows how easily you can turn the Read More text into a Read More button on the Divi blog module. Adding the CSS snippets to the Blog module gives you a hover style on your Read More link. Customize and play around with all the properties and values in the CSS snippets until you get the best Read More button.
If you are an agency of freelancer often create WordPress websites with Divi, you can make use of Divi Cloud to save time in creating a website done. It is a service from Elegant Themes to allow you to store Divi layouts, theme builder templates, code snippets, and so on — to the cloud.