When creating a post for your blog’s page, the Read More button can be a crucial element for having a better user experience. Not only does it make your site’s user experience better, but it also adds more style to your blog page, so it appeals to the visitor.
…To do that, we must know how to customize the button properly!
But where can you customize the blog post’s Read More button? Easy!… The Read More button can be customized within Divi’s Blog Module.
Hello everyone! In this blog, I’ll show you how to customize the Read More button in the Blog Module of Divi!
Without wasting any time, let’s get into it!
Creating a Blog Page (for those who doesn’t have a blog page yet)
If you don’t have one, click Add New, and title your new page as blog. After creating your blog page, you will need a blog layout.
Importing Page Layout
After downloading the blog layout that I provided you… While you’re in the blog’s backend builder, click the Portability icon! After clicking the portability icon, click Import, and select the JSON file you download.
Once the JSON file is loaded, click Import Divi Builder Layout. After that, update your blog page – then visit the blog page after updating it, and click Enable Visual Builder once you’re on the blog page.
Customizing the Read More Button
After enabling the page builder, hover over the blog module and click the cog icon.
After clicking the cog icon – underneath Content, click Element. Under the element settings, switch ON Show Read More Button.
Then navigate to Design, scroll down, and click Read More Text. After that, change the Read More Font to Roboto, the Read More Font Style to TT (meaning all caps letters), the Read More Text Color to White #ffffff, and the Read More Font Size to 15.
Once all the changes are made, navigate to Advanced! Click Custom CSS, and scroll down till you see Read More Button.
In the empty box, highlight the code, and copy/paste it!
display: block;
text-align: center;
border-radius: 100px;
background-color: #645aff;
padding: 0.3em 1em;
margin-top: 20px;
margin-bottom: 10px;
To Copy
Windows: Ctrl + C
Mac: Cmd + C
To Paste
Windows: Ctrl + V
Mac: Cmd + V
TADAAA… Instead of text, you have a nice button that stands out! If you want to change the color of the button – simply click the colored circle that’s next to the hashtag of the hex code background-color: #645aff;
And that’s it!
Conclusion
Now that you know how to make your blog post button stand out, your blog looks better and has gained a good user experience for you and your visitors. Hope this helped, and if it did, feel free to share it with your family and friends!
