Improving the navigation of your blog can significantly enhance the user experience, making it easier for visitors to find and explore your content.
Changing the Blog Module’s default pagination to include page numbers provides a clearer and more structured way for users to navigate through your posts.
This article will guide you through the steps to customize the Blog Module’s pagination in Divi, transforming it from simple “Previous” and “Next” links to numbered pages for better usability.
Install and active the WP-PageNavi plugin
Go to WordPress Dashboard → Plugins → Add new plugin.
Use the Search form(in the top right corner) to search for WP-PageNavi.
Install and activate the WP-PageNavi plugin.
The pagination will look like in the screenshot below:
Customize the default styling of the WP-PageNavi pagination
Open the Blog module settings.
Go to Advanced Tab → Custom CSS → Free-Form CSS and paste this CSS code.
selector .wp-pagenavi {
text-align: center;
border-top: 1px solid #dddddd;
padding-top: 15px;
}
selector .wp-pagenavi .pages {
border: none;
}
selector .wp-pagenavi a,
selector .wp-pagenavi span.current {
border-radius: 50%;
padding: 5px 10px;
border: 1px solid #dddddd!important;
}
selector .wp-pagenavi a.last {
border: none!important;
}
Note: In the above CSS Code, we are using the keyword selector which on the front end will be automatically replaced with the correct CSS selector, targeting the PageNavi elements generated for that particular Blog module.
The links will be styled as in the screenshot below:
