By default, the Blog module will display Previous and Next links for its pagination. This can be changed using the WP-PageNavi plugin.
Install and active the WP-PageNavi plugin
Go to WordPress Dashboard →Plugins → Add new plugin.
Use the Search form(on the top right corner) and 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
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, which will target the PageNavi elements generated for that particular Blog module.
The links will be styled as in the screenshot below:
