Divi Builder, a famous and powerful WordPress website builder, has many customization possibilities, allowing us to construct visually appealing websites easily. However, the Blog module can make it difficult to center the Read More button, as it is initially positioned to the left of the blog post’s content. We recognize the importance of keeping a consistent and aesthetically beautiful design for your website’s professionalism and user experience, so we have put up this detailed step-by-step tutorial.
In this article, we’ll look at different ways and CSS strategies for repositioning the “Read More” button in the Divi Blog module at the center of your blog posts’ featured images or excerpts.
Steps to Position Read More Button to Center in Divi Blog Module
Step 1: Turn the Read More Text into a Button
The goal of this tutorial is to position the Read More button to the center in the Divi Blog module and display it looks like a button (see the top image above).
First, we begin by turning the Read More text into a button. For a step-by-step tutorial about creating that, you can visit our previous article (How to Turn the Read More Text into a Button on Divi Blog Module).
Step 2: Place the Read More Button in the Center
As you can see from the image above, the Read More text is turned into a button but still in the default position (left). So, we need to add an extra CSS snippet to the module.
On the module settings, go to the Advanced tab -> Custom CSS -> Read More Button.
Copy and paste the simple CSS snippet below into the available Read More Button input field.
/*position read more button to center*/ display: inline-block!important; position: relative; left:50%; transform: translateX(-50%);
Combining these CSS properties, the Read More button will be positioned horizontally at the center of its parent container (blog posts). The left: 50% moves the left edge to the center, and the transform: translateX(-50%) moves it back half of its width, centering the Read More button perfectly.
That’s it. As you can see from the image above, once you add the extra CSS snippet to the module, the position of the Read More button moves to the center. Feel free to modify the property values on the CSS snippet to get the best appearance of your Read More button, such as the text color, background color, font weight, etc.
The Bottom Line
This article shows how easily you can position the Read More button to center in the Divi Blog module. Centering the Read More button in the Divi Blog module can drastically improve your website’s user experience and visual appeal. With this acquired expertise, you’ll create a great impression on your visitors and inspire them to read more of your fascinating content.
If you are an agency of freelancers who often create WordPress websites with Divi, you can use Divi Cloud to save time creating a website. It is a service from Elegant Themes to allow you to store Divi layouts, theme builder templates, code snippets, and so on — in the cloud.
