Code by Day | Explore By Weekend

How To Style And Customize The Divi Blog Pagination Tutorial by Pee Aye Creative

How To Style And Customize The Divi Blog Pagination

Learn how to add some beautiful and functional pagination to the Divi Blog module as well as customize and style it with CSS!

Adjust The Divi Pagination Design Settings

You can start by adjusting some of the basic settings that are included in the Blog module design tab under the Pagination Text toggle. It is very strange, but they treat these links as text rather than links, just like the Divi Blog read more text tutorial. This is why you need this tutorial and snippet.

Divi blog module pagination settings

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

Change The Divi Blog Pagination Text Links Into Buttons

Now that we have some basic design styles set, let’s continue by adding some CSS to make the pagination links look more like buttons. We are 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 pagination buttons*/

.pagination .alignleft a,
.pagination .alignright a {
  color: #ffffff;
	background: #0071fc;
	border: 2px solid #0070fc;
	padding: .7em 1.3em;
	border-radius: 50px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

/*style the Divi blog pagination buttons on hover*/

.pagination .alignleft a:hover,
.pagination .alignright a:hover {
	background: transparent;
  color: #0070fc;
	border: 2px solid #0070fc;
	transition: all 0.3s ease-in-out;
}

Add Advanced Pagination Page Numbers With The WP-PageNavi Plugin

On our main blog page and most of the websites I design, I like to use the plugin called WP-PageNavi. This plugin adds advanced pagination to the Divi Blog module. Just by installing and activating the plugin, it replaces the old ← Older posts | Newer posts → links with numbered page links. I really like this and think its a great addition to every blog.

Add pagination to the Divi blog with the WP PageNavi plugin

Once you install and activate the plugin, the pagination automatically appears in the blog module. There are no other settings, so all you have to do now is style the pagination. I don’t like how it looks by default, here is a screenshot:

Divi blog pagination with the WP PageNavi plugin

We can improve this quite a lot with some CSS! We go over all the details in the video, so be sure to always watch those since they accompany the blog posts. 

You can add the code to your website by copying and pasting the entire snippet below. 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. 

/*style the wp-pagenavi pagination links*/

.wp-pagenavi a,
.wp-pagenavi span {
	color: #000000;
	background: #f1f3f5;
	font-size: 1em !important;
	line-height: 1em;
	font-weight: bold !important;
	padding: 0.45em 0.8em !important;
	border-radius: 100px;
	transition: all .5s;
}


/*style the wp-pagenavi current page number*/

.wp-pagenavi span.current {
	color: #ffffff !important;
	background: #0070fc !important;
	border-radius: 100px;
}


/*style the wp-pagenavi pagination links on hover*/

.wp-pagenavi a:hover {
	color: #ffffff!important;
	background: #0070fc!important;
}


/*style the wp-pagenavi pages text*/

.wp-pagenavi .pages {
	background: none;
}


/*remove border and center the wp-pagenavi links*/

.wp-pagenavi {
	border-top: none;
	text-align: center;
}

Try to read what each of the parts are doing. The first part styles the numbers, the next one styles the current page number, the next one styls the numbers when hovering, the nexts one hides teh background around the pages, and the last one removes the border and centers the entire pagination. Again, we go over all of this in the video, so if you are serious about learning, be sure to watch that.

Here’s the final result using the WP-PageNavi plugin and CSS to add and style our Divi Blog module pagination:

Divi blog pagination with the WP PageNavi plugin after adding the CSS customization
11
Last updated Jan 3, 2021 @ 12:48 pm

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.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ben Wilson
Ben Wilson
5 months ago

I’d like to recommend that you dock the settings block so that you display the entire builder.when you are teaching.

2020-08-16_8-24-01.png
Aidan
3 months ago

Excellent tutorial, thank you

Thomas Minnefor
3 months ago

Is there a way to add pagination to a specific post?

eric
eric
2 months ago

hey Nelson, yet again another awesome and useful tut! (Reading PA area here btw) Is there a way to use jquery with the pagenavi plugin to customize the pagination text like you did with the read more button? thanks in advance

Maria Rolstad-Martinez
1 month ago

Hi, followed the tutorial “How To Style And Customize The Divi Blog Pagination” from youtube, but when I try to see the page in safari or firefox, pagination does not appear. Only in chrome, what can this be? see my site, thanx a lot for any help! Living my site here so you can take a look.

Hendrik
6 days ago

Nelson, your are great. You always have the best solutions!

Last edited 6 days ago by Hendrik

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart