Select Page

How to Customize Divi Read More Button

  1. Home
  2. »
  3. Divi
  4. »
  5. How to Customize Divi Read More Button

Mozsteps content is free. When you purchase through referral links on our site, we earn a commission. Learn More

customize blog divi read more button
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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!

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.

1 – Add the Divi Blog button

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.

add blog read more button in Divi builder
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Search for and add the Divi blog module to the row you have just added.

add blog read more button in Divi builder
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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.

add blog read more button in Divi builder
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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.

add blog read more button in Divi builder
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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!

add blog read more button in Divi builder
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Turn the Divi Read More button text into a button

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.

add blog read more button in Divi builder
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr
/** 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.

add blog read more button in Divi builder
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – Add an icon to The Divi Blog module button

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.

add icons to divi read more buttons
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – It opens the page of the icon, all what we need to do is to copy the Unicode (as show below)

add icons to divi read more buttons
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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.

add icons to divi read more buttons
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

The Font Awesome library version I am using in the example above is 4.7, if you are using a different one the process remains the same.

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.

customize the divi  blog pagination
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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.

customize the divi  blog pagination
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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:

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!

0 Comments
Submit a Comment

Your email address will not be published. Required fields are marked *

Start a blog at 2.75$/mo

Categories

Pin It on Pinterest

Share This