CodeWatchers

How to Modify the “Read More” Button in the Divi

Rifat Divi Tutorials Mar 25, 2022

It is possible that adding "Read More" links to a blog can significantly improve the user's experience. As a result, it's critical that we understand how to correctly customize it. It is possible to change the "Read More" link in Divi's Blog Module along with many other blog content features. To give you more control over the design, we'll teach you how to tweak the "Read More" link in the Divi Blog Module.

How to Modify the “Read More” Button in the Divi

Design Preview

Here is a look at how the design will be.

Modify the “Read More” Button in the Divi

Styling The Link Text

An article's read-more link can be displayed or hidden by a Blog Module. Click on "Show Read More Button" under "List of Blog Elements You Want to Be Displayed" to "YES" to enable the read more link.

You can use any of the built-in choices to style the read more text in the design tab. Let's make a few changes to the following:

Create Amazing Websites

With the best free page builder Elementor

Start Now
  • Read More Font: Barlow
  • Read More Font Weight: Semi Bold
  • Read More Font Style: Uppercase (TT), Underline (U)
  • Read More Underline Color: #3c5bff
  • Read More Text Color: #db0eb7
  • Read More Letter Spacing: 1px

So, this will love like this.

Aligning the Read More Link

Unless you modify the text orientation of the body text, the "Read More" link will appear inline to the left as it does at the moment. To have the link appear in the post's center or to the right, use the following CSS code:

Add the following CSS to the Read More Button CSS in the advanced tab of the blog settings:

display: block;
text-align: right;

To make the link centered, simply replace right with center for the text-align property value as follows:

Creating a Simple Fullwidth Button Style

The "Read More" link will be given a fullwidth button style in this demonstration. We'll need to open the blog settings and change the Read More Text design before we add custom CSS.

  • Read More Font Style: Uppercase
  • Read More Text Color: #fff

display:block and text-align:center were used in the preceding example to make the link fill the container's width and center the text. Adding a background color and spacing with a few more CSS snippets transforms it from an icon to one.

Go to the advanced tab and make the following changes to the Read More Button CSS to create a fullwidth button style for the "Read More" link:

display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;

Advanced Button Style and Hover Effect

Adding a more elaborate backdrop and hover effect can take the button look to a whole new level.

Update the Read More Button's CSS 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;

Hovering over the Read More button, you may change the background color by pasting the following CSS code:

display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;

Change "Read More" Text

We'll need a little jQuery to change the text "read more" into something else, like "visit post." Although it is just a few lines long.

Add the following CSS class to the blog module before we begin with the jQuery coding part of the process:

  • CSS Class: et-custom-read-more-text

You can use jQuery to update the "Read More" wording by adding a code module under the blog.

Afterward, copy and paste the following jQuery code, making sure to include the essential script tags:



(function ($) {
  $(document).on("ready ajaxComplete", function () {
    $(".et-custom-read-more-text .et_pb_post a.more-link").html("View Post");
  });
})(jQuery);

As soon as the page has loaded, or as soon as the blog module's pagination has loaded more articles, this code instructs the browser to replace the word "Read More" with "View Post" (ajax).

So it looks like this.

Final Preview

The final "Read More" link (or button) variations we created are shown here.

Ending Thoughts

"Read More" links can be styled in a variety of ways by using Divi's blog module. It's possible to create even more complex layouts by playing around with a few snippets of CSS. It's hoped that this guide will help you improve your "Read More" links.

Divi WordPress Theme