Out of the box, the Blog module doesn't include an infinite scrolling functionality. In the following article, we are going to use the YITH Infinite Scrolling plugin to enable infinite scrolling on the Blog module.
Preparing the layout
For this to work correctly, we need to use the Fullwidth Layout for the Blog module. The Grid layout will be recreated using custom CSS.
Install and activate the YITH Infinite Scrolling plugin.
Open the Row's settings (that contains the Blog module), go to Advanced Tab → CSS ID & Classes → CSS Class and type in:
divi_infinite_blog_wrapper
Open the Blog module settings, and in the Content Tab → Post Count, set it to be
9or any other multiplier of 3. The value should not be less than9for the Infinite Scrolling to work correctly.Go to Design Tab → Layout and choose Fullwidth.
Go to Advanced Tab → CSS ID & Classes → CSS Class and type in:
divi_blog_infinite_scroll
Go to WordPress Dashboard → YITH → Infinite Scrolling.
Set the following CSS selectors:
Navigation Selector:
.divi_blog_infinite_scroll .paginationNext Selector:
.divi_blog_infinite_scroll .pagination .alignleft aItem Selector:
.divi_blog_infinite_scroll .et_pb_postContent Selector:
.divi_infinite_blog_wrapper
In Divi → Theme Options → General Tab → Custom CSS, add this CSS code:
.divi_blog_infinite_scroll .et_pb_ajax_pagination_container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.divi_blog_infinite_scroll .et_pb_ajax_pagination_container .et_pb_post {
margin-bottom: 0;
border: 1px solid #ddd;
padding: 30px;
}
.divi_blog_infinite_scroll .et_pb_ajax_pagination_container .et_pb_post .entry-featured-image-url {
margin: -30px -30px 30px -30px;
}
@media (min-width: 768px) and (max-width: 980px) {
.divi_blog_infinite_scroll .et_pb_ajax_pagination_container {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.divi_blog_infinite_scroll .et_pb_ajax_pagination_container .et_pb_post {
padding: 20px;
}
.divi_blog_infinite_scroll .et_pb_ajax_pagination_container .et_pb_post .entry-featured-image-url {
margin: -20px -20px 20px -20px;
}
}
@media (max-width: 767px) {
.divi_blog_infinite_scroll .et_pb_ajax_pagination_container {
grid-template-columns: repeat(1, 1fr);
gap: 30px;
}
}
The result can be seen in the GIF below:
