Code by Day | Explore By Weekend
How To Style And Customize The Divi Blog Read More Button Tutorial by Pee Aye Creative

How To Style And Customize The Divi Blog Read More Button

This tutorial will show you how to style and customize the Divi Blog module read more link and turn it into a button with an icon and custom text!

Adjust The Basic Divi Design Settings

Start by styling what you can in the Divi settings. The weird thing is that they have incomplete settings, treating it like text instead of a button. Strange, but that’s why we need this tutorial and snippet.

settings for the Divi Blog module read more button

So go ahead and start with things like the font, font weight, text size, text color, etc.

Make The Divi Blog Read More Text Link Into A Button

Now that we have some basic styles set, let’s continue by adding some CSS to make it look more like a button. We will be adding a background color, border, and hover effect.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*style the Divi blog link text as a button*/

.et_pb_post a.more-link {
  color: #ffffff;
	background: #0071fc;
	border: 2px solid #0070fc;
	padding: .7em 1.3em;
	margin-top: 20px;
	border-radius: 50px;
	text-transform: capitalize;
	display: inline-block;
	transition: all 0.3s ease-in-out;
}


/*style the Divi blog link text as a button on hover*/

.et_pb_post a.more-link:hover {
	background: transparent;
	color: #0070fc;
	border: 2px solid #0070fc;
	transition: all 0.3s ease-in-out;
}

Add An Icon To The Divi Blog Read More Button

To add some more character to our button, let’s add an icon to it. This is especially important if you alrady use icons on your buttons across your site. This will help you be consistent and fill in a missing gap where there are missing Divi settings.

/*add an icon to the Divi blog read more button*/

.et_pb_post .more-link:after {
	content: "24";
	font-family: ETModules;
	vertical-align: middle;
	margin-left: 10px;
}

The easiest way to change the icon is to go to the Elegant Themes blog post

Change The Actual Read More Text Terminology Into Something Else

A great way to customize this button is to change the words. So instead of using the default “Read More,” let’s change it to something else. In my example, I am going to change it to “View Full Post,” but of course you can make it say anything you want by replacing the words in the snippet.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the begginging and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code the the < head > of your blog" code area.

<script>
	jQuery(document).on('ready ajaxComplete', function () {
		//Replace read more link text
		jQuery(".et_pb_post a.more-link").html(function () {
			return jQuery(this).html().replace('read more', 'View Full Post');
		});
	}); 
</script>
0

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Cletus
Cletus
5 days ago

Thank you so very much for this article.
I have a question, I added the .js script but it did not change the text

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart