Creating a visually appealing and organized blog layout can greatly enhance the user experience on your website.
A masonry layout arranges your blog posts in a dynamic grid, optimizing space and improving readability. Using the Isotope JS library, you can effortlessly achieve this stylish and functional design.
This article will guide you through the steps to implement a masonry blog layout using the Isotope JS library, helping you create a captivating and well-organized blog section.
For this customization to work properly, we need to use the Blog module with the Fullwidth layout. The Grid will be created using the Isotope JS library.
Add the Blog module to the Page
Open the Blog module's settings and go to Design Tab → Layout
Choose Fullwidth
In Advanced Tab → CSS ID & Classes → CSS Class, type in divi_isotope_blog
In the Blog module's → Advanced Tab → Custom CSS → Free Form CSS, add this CSS code:
selector .et_pb_post {
width: calc((100% / 3) - 20px);
margin-bottom: 20px;
border: 1px solid #d8d8d8;
padding: 20px;
}
selector .et_pb_post .entry-featured-image-url {
margin: -20px -20px 30px -20px;
}
@media (max-width: 980px) and (min-width: 768px) {
selector .et_pb_post {
width: calc((100% / 2) - 20px);
}
}
@media (max-width: 767px) {
selector .et_pb_post {
width: calc(100% - 20px);
}
}In Divi → Theme Option → Integration tab > Header, add this Js Code:
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script id="masonry-blog-layout">
(function ($) {
$(document).ready(function () {
var gutter = Number($('.divi_isotope_blog').css('--space-between-each-post').replace('px', ''));
function initIsotope() {
var $container = $('.divi_isotope_blog .et_pb_ajax_pagination_container');
// Check if Isotope has already been initialized
if (!$container.data('isotope-initialized')) {
$container.isotope({
itemSelector: '.divi_isotope_blog .et_pb_post',
percentPosition: true,
masonry: {
gutter: gutter,
columnWidth: '.divi_isotope_blog .et_pb_post'
},
});
// Set a flag to indicate that Isotope has been initialized
$container.data('isotope-initialized', true);
} else {
// If already initialized, just reload Isotope
$container.isotope('layout');
}
var wrapperHeight = $container.css('height');
$('.et_pb_ajax_pagination_container > div').css({ 'top': wrapperHeight, 'position': 'relative' });
}
initIsotope();
$(document).ajaxComplete(function () {
setTimeout(initIsotope, 250);
});
});
})(jQuery);
</script>
The result of the above CSS and JS code can be seen in the GIF below:
