Search
Close this search box.

How to Turn the Read More Text into a Button on Divi Blog Module

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 Content 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.

Read More Text Color should be in a default setting.

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;

Hover:

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 background color of the Read More button on Desktop mode is changed from pink to violet.

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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Save your Divi assets to the cloud and access them from anywhere.
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.