The Blog module doesn't include infinite scrolling functionality out of the box. In the following article, we will use the YITH Infinite Scrolling plugin to enable infinite scrolling on the Blog module.
Note: The WooCommerce plugin must also be installed for the plugin to work correctly. Ensure that WooCommerce is also installed on your website.
For this to work correctly, we must 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 9 or any other multiplier of 3. The value should not be less than
9for 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 Advanced Tab → Custom CSS → Free Form CSS and paste in this CSS snippet:
selector .et_pb_ajax_pagination_container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
selector .et_pb_ajax_pagination_container .et_pb_post {
margin-bottom: 0;
border: 1px solid #ddd;
padding: 30px;
}
selector .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) {
selector .et_pb_ajax_pagination_container {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
selector .et_pb_ajax_pagination_container .et_pb_post {
padding: 20px;
}
selector .et_pb_ajax_pagination_container .et_pb_post .entry-featured-image-url {
margin: -20px -20px 20px -20px;
}
}
@media (max-width: 767px) {
selector .et_pb_ajax_pagination_container {
grid-template-columns: repeat(1, 1fr);
gap: 30px;
}
}Go to WordPress Dashboard → YITH → Infinite Scrolling.
Set the following CSS selectors:
Navigation Selector: .divi_blog_infinite_scroll .pagination
Next Selector: .divi_blog_infinite_scroll .pagination .alignleft a
Item Selector: .divi_blog_infinite_scroll .et_pb_post
Content Selector: .divi_infinite_blog_wrapper
Important note: Since this customization is using the CSS Grid to create the grid layout for the Blog Module, some of the properties used will be displayed with CSS warnings. Those can be safely ignored. The CSS code provided is 100% valid.
The result can be seen in the GIF below:
