Let me guess, you're creating a blog and you're stuck at customizing the Divi read more buttons? you don't find enough settings to achieve what you want?
Don't worry you're not alone!
Once you purchase Divi, it comes with a bunch of different default settings that you can play around with until you achieve what you want. However, there still some specific settings that you might need and they're missing such as the read more buttons on the blog page.
By default, when you turn on the read more button in Divi, it shows a basic link and if you look at the settings they're all related to changing things like the font, color of the text, and so on but there is no option to turn the text into an actual button.
In today's guide, we're going to show you how you can change the default linking text then customize it and easily turn it into a button using CSS.
If you're excited like I am then Let's get started!
Contents
Before You Start
There are two important points I would like to mention here:
The first one is that we're going to use some custom CSS code and add it to our theme so if you didn't deal with that before I do recommend that you take a look at our article about adding custom CSS, JS, PHP code to Divi.
The second one is that it's very recommended to have a child theme installed in case you want to be adding custom snippet codes because this will avoid the problem of losing your modifications after each and every update of Divi.
How to Add and customize The Divi Read More Buttons
Here we are in the practical part of this guide, in which we're going to learn how to enable and style the Divi read more buttons as well as other interesting tricks such as adding an icon, changing color on hover, and customizing the pagination links.
The blog read more button is built in the Divi blog module settings, you just have to turn it on. and you can do that by following these simple steps:
1 – First of all, edit the page where you want to have the blog using the Divi visual builder. Add in a regular section and a normal row.
2 – Search for and add the Divi blog module to the row you have just added.
3 – Click the “content” tab, under “elements” you can control the different elements added to the blog post layout like the author, the publish date, and categories, and most importantly turn on the read more text.
4 – Under the “design” tab, I have chosen the blog layout to be grid because I personally like that style and I use it a lot but you're welcome to use the default layout which is a list. The code we're going to add will work in both situations.
5 – Under the design tab you can also customize some basic things about the read more button text like the text color, fonts. it's up to you!
Let's customize this even futher!
To turn the boring link text into a beautiful button copy and paste the following custom CSS snippet in the style.css file of your child theme or by navigation to Divi > Theme options > Custom CSS.
/** customize the blog read more button **/
a.more-link
{
background-color: #ff0055;
color: #fff;
padding: 8px 10px;
display: block;
width: 150px;
font-weight: 600;
text-transform: capitalize;
text-align: center;
margin: 23px auto;
}
a.more-link:hover
{
background-color: #af023c;
transition: .4s ease-in-out;
}Go a head and save the changes and BOOM! you'll now get a result that looks like this.
One of the cool tricks you can do is to add icons to your Divi button which is something you can do using a library called Font Awesome. To do that kindly refer to our previous tutorial about adding Font Awesome icons to Divi.
To add icons to the Divi blog module button follow these steps:
1 – After having the icons library added to your website, we'll go to the Font Awesome official website, then choose the icon you want to add or you can search for it as well. For the purpose of this tutorial, I will be adding an arrow icon but you can choose any icon you like.
2 – It opens the page of the icon, all what we need to do is to copy the Unicode (as show below)
For example, in my case I will be using the following CSS code, if you have chosen a different icon than mine then you'll only change the “content” value by placing the Unicode of the icon right after the backslash (\).
/** add an icon to Divi read more buttons **/
a.more-link
{
background-color: #ff0055;
color: #fff;
padding: 8px 10px;
display: block;
width: 150px;
font-weight: 600;
text-transform: capitalize;
text-align: center;
margin: 23px auto;
position: relative;
}
a.more-link::after
{
content: '\f0a9';
position: absolute;
font-family: FontAwesome;
right: 15px;
top: 9px;
font-size: 18px;
}3 – Now you should have got something that looks like this.
4 – Customize the default Divi blog pagination links
When the number of blog posts published passes the number you have specified in the posts count then the pagination links we'll appear as shown below.
Of course, no one likes those ugly links so let's make them look a little bit fancy!
For that we will be using the following CSS code snippet.
/* Customize The Pagination links */
.pagination .alignleft a,
.pagination .alignright a {
background-color: #2ea3f2;
display: inline-block !important;
color: #fff;
padding: 5px 15px;
font-weight: bold;
}
.pagination .alignleft a:hover,
.pagination .alignright a:hover {
background-color: #3683d2;
}After adding the custom code the bottom will be changed completely to look like the following ones and of course, you can change the background to match your design by replacing the color code with the one used in your color scheme.
5 – Change the Divi read more link text
If you would like to change the current “read more” text to something else you need to add the following jQuery code to your Divi website.
In the example below, I have changed it to say “Learn More” so you can use the same code and replace the “Learn More” text with your custom text.
<script>
jQuery(document).on('ready ajaxComplete', function () {
//Change read more link text
jQuery("a.more-link").html(function () {
return jQuery(this).html().replace('read more', 'Learn More');
});
});
</script>Further Reading:
- How to Edit Divi Theme Footer [Easy Guide]
- Divi Logo: Change size, Customization Guide & [Expert Tips]
- Add Google Analytics to Divi theme
- Divi Facebook Pixel Guide
Roundup
To recap, the Divi theme like any other WordPress available on the market has a lot of features that are essential like displaying and controlling the styling of the elements but unfortunately, it can't provide exactly what each user is looking for therefore, you might need to do some manual changes in order to accomplish what you're looking for.
That's not really a big deal because with a simple search on the internet you'll find hundreds of tutorials explaining a myriad of Divi customizations.
I hope this article has provided any value for you, if you still have any questions in mind feel free to drop them in a comment below, I would be happy to answer each and every question. Otherwise, have a great journey (:
Cheers!
