Creating a visually appealing and consistent blog layout is crucial for engaging your audience and enhancing the overall user experience. With Divi, a popular WordPress theme known for its versatility and customization options, you have the power to design stunning websites effortlessly. However, one common challenge faced by Divi users is achieving blog grid equal height for blog grid elements, which can lead to a more polished and professional appearance.
Here is step-by-step to make equal height in Divi blog Grid
- Place this Javascript in your Divi>Theme Options>Integrations tab in the “Add code to the < head > of your blog” code area.
<script>
(function ($) {
var pa_equalize_button_height = "true";
if (pa_equalize_button_height == "false") {
function pa_equalize_blog_post_height(blog) {
var articles = blog.find('article');
var heights = [];
articles.each(function () {
var height = 0;
height += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
height += $(this).find('.entry-title').outerHeight(true);
height += ($(this).find('.post-meta').length != 0) ? $(this).find('.post-meta').outerHeight(true) : 0;
height += ($(this).find('.post-content').length != 0) ? $(this).find('.post-content').outerHeight(true) : 0;
heights.push(height);
});
var max_height = Math.max.apply(Math, heights);
articles.each(function () {
$(this).height(max_height);
});
}
} else {
function pa_equalize_blog_post_height(blog) {
var articles = blog.find('article');
var heights = [];
var btnheights = [];
articles.each(function () {
var height = 0;
var btnheight = 0;
var basebtnmargin = 20;
height += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
height += $(this).find('.entry-title').outerHeight(true);
height += $(this).find('.post-meta').outerHeight(true);
height += $(this).find('.post-content').outerHeight(true);
btnheight += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
btnheight += $(this).find('.entry-title').outerHeight(true);
btnheight += $(this).find('.post-meta').outerHeight(true);
btnheight += $(this).find(".post-content p").outerHeight(true);
btnheight += basebtnmargin;
heights.push(height);
btnheights.push(btnheight);
});
var max_height = Math.max.apply(Math, heights);
var max_btn_height = Math.max.apply(Math, btnheights);
articles.each(function () {
$(this).height(max_height);
var eachheight = 0;
var eachbasebtnmargin = 20;
eachheight += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
eachheight += $(this).find('.entry-title').outerHeight(true);
eachheight += $(this).find('.post-meta').outerHeight(true);
eachheight += $(this).find(".post-content p").outerHeight(true);
eachheight += eachbasebtnmargin;
var requiredbtnmargin = (max_btn_height - eachheight) + eachbasebtnmargin;
$(this).find(".more-link").css("margin-top", requiredbtnmargin + "px");
});
}
}
$(document).ready(function () {
$(window).resize(function () {
if ($(this).width() >= 768) {
$(".pa-blog-equal-height article").each(function () {
$(this).removeClass("pa-auto-height");
$(this).find(".more-link").removeClass("pa-auto-margin");
})
$('.pa-blog-equal-height').each(function () {
pa_equalize_blog_post_height($(this));
});
$('.pa-blog-equal-height').each(function () {
var pa_blog = $(this);
pa_equalize_blog_post_height(pa_blog);
var observer = new MutationObserver(function (mutations) {
pa_equalize_blog_post_height(pa_blog);
});
var config = {
subtree: true,
childList: true
};
observer.observe(pa_blog[0], config);
});
$(document).ajaxComplete(function () {
$('.pa-blog-equal-height').imagesLoaded().then(function () {
$('.pa-blog-equal-height').each(function () {
pa_equalize_blog_post_height($(this));
});
});
});
$.fn.imagesLoaded = function () {
var $imgs = this.find('img[src!=""]');
var dfds = [];
if (!$imgs.length) {
return $.Deferred().resolve().promise();
}
$imgs.each(function () {
var dfd = $.Deferred();
dfds.push(dfd);
var img = new Image();
img.onload = function () {
dfd.resolve();
};
img.onerror = function () {
dfd.resolve();
};
img.src = this.src;
});
return $.when.apply($, dfds);
}
} else {
$(".pa-blog-equal-height article").each(function () {
$(this).addClass("pa-auto-height");
$(this).find(".more-link").addClass("pa-auto-margin");
})
}
});
});
})(jQuery);
</script>
- Place this CSS in your Divi>Theme Options>Custom CSS code box
.pa-blog-equal-height .pa-auto-height {
height: auto !important;
}
.pa-blog-equal-height .pa-auto-margin {
margin-top: 20px !important;
}
- Add the class “pa-blog-equal-height” to the CSS Class input field on your Blog module. If it is not working you can input the class in Column or Row module. Go to the Blog or Roq module settings to the Advanced tab and open the CSS ID & Classes toggle.
Achieving equal height for the Divi blog grid is a simple yet effective way to enhance the visual consistency of your website and provide a better user experience for your visitors. By following the steps outlined in this guide, you can effortlessly create a polished and professional-looking blog layout that will captivate your audience and leave a lasting impression.
With Divi’s powerful customization options and intuitive interface, you have the tools at your disposal to design stunning websites that stand out from the crowd. So why wait? Implement these tips today and take your Divi-powered website to the next level!