If you’re struggling to make your Divi blogs grid equal in height, you’re not alone! We’re here to address this issue in three simple ways, ensuring that your problem is resolved. Our aim is to offer clear and detailed solutions that are simple and easy to follow.

First, we will explore Divi’s built-in Equal Height setting. Next, we’ll delve into the Blog Module Settings, focusing on adjusting the Excerpt Length. Lastly, we will implement custom coding to achieve the desired effect.

Step 1: Applying Divi Equal Height Setting Option

In this first step, we will utilize Divi’s built-in Equal Height setting to achieve uniformity in your blog post columns. Here’s how to do it:

1. Hover Over the Row Settings: Hover your mouse over the row containing your blog posts, then click on the Row Settings icon (the green icon) to access the settings.
2. Access the Design Tab: Once in the Row Settings, navigate to the Design tab.
3. Locate Sizing: Scroll down to find the Sizing option and click on it. This will open the Sizing settings.
4. Enable Equal Column Heights: In the Sizing settings, look for the option labeled Equal Column Heights and toggle it to Yes. This will ensure that your blog columns are of equal height.

Result

The screenshot below demonstrates the outcome after applying Divi’s built-in module setting for equal column heights.

Read More: 7 Divi Tab Modules for Improving User Experience

Step 2: Applying Blog Module Settings for Equal Height

In this step, we will adjust the Divi Blog Module settings to achieve equal heights by modifying the Excerpt Length. Here’s how to do it:

1. Hover Over the Blog Module: Position your mouse over the blog module you wish to edit, and click on the Settings button. This will open the blog settings panel.
2. Access the Content Tab: Once the blog settings are open, navigate to the Content Tab.
3. Enable Post Excerpt: Scroll down to find the Use Post Excerpt option. Toggle it to Yes to enable excerpts for your blog posts.
4. Set Excerpt Length: Next, scroll down to the Excerpt Length setting. Adjust the word limit to a minimum of 200 words. This will help ensure that all your blog columns have equal height.

By following these steps, you should see that your blog columns are now uniform in height.

Read More: How to Feature a Blog Post in Divi

Result – Uniform Blog Column Heights Achieved

After applying the Blog Module’s Excerpt Limit, you should observe that all your blog columns now maintain the same height. The screenshot below illustrates the results, showcasing the uniformity achieved across all blog posts. 

Step 3: Adding Custom Code for Equal Heights

In this step, we will apply a custom class to the row to ensure equal heights using coding. Follow these instructions:

1. Edit the Row Settings: Click on the Settings Icon for the row you want to edit.
2. Navigate to the Advanced Tab: Once the row settings are open, go to the Advanced tab.
3. Add a Custom Class: In the CSS ID & Classes section, add a custom class named .equal-height-column
4. Save Your Changes: Click Save to apply the changes.

Refer to the screenshot below for guidance on where to input the custom class.

Step 5: Adding Custom JavaScript for Enhanced Functionality

To finalize the setup and ensure everything works seamlessly, you will now add some custom JavaScript. Follow these steps:

1. Navigate to Theme Options: From your WordPress dashboard, go to Divi > Theme Options.
2. Access the Integration Tab: Click on the Integration tab.
3. Add JavaScript Code: Scroll down to the Add code to the < head > of your blog box and insert the following JavaScript code:

<script>

(function ($) {

  $(document).ready(function () {

    // Equalize heights on window resize

    $(window).resize(function () {

      $('.equal-height-column').each(function () {

        equalise_articles($(this));

      });

    });

    // Initial equalize height on page load

    $('.equal-height-column').each(function () {

      var blog = $(this);

      equalise_articles($(this));

      var observer = new MutationObserver(function (mutations) {

        equalise_articles(blog);

      });

      var config = {

        subtree: true,

        childList: true

      };

      observer.observe(blog[0], config);

    });

    // Function to equalize heights of articles in a column

    function equalise_articles(blog) {

      var articles = blog.find('article');

      var heights = [];

      articles.each(function () {

        var height = 0;

        // Adjusting heights based on common elements (image containers, titles, meta, and content)

        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);

      // Set all articles to the tallest height

      articles.each(function () {

        $(this).height(max_height);

        // Apply your custom font color and styles here

        $(this).css({

          'color': '#333', /* Change font color here */

          'font-family': 'Arial, sans-serif', /* Change font family */

          'background-color': '#f9f9f9', /* Change background color */

          'padding': '20px', /* Optional padding */

          'border': '1px solid #ddd', /* Optional border */

          'box-shadow': '0px 4px 6px rgba(0,0,0,0.1)' /* Optional shadow */

        });

      });

    }

    // Handle dynamic content loading (e.g., AJAX)

    $(document).ajaxComplete(function () {

      $('.equal-height-column').imagesLoaded().then(function () {

        $('.equal-height-column').each(function () {

          equalise_articles($(this));

        });

      });

    });

    // Ensure images are loaded before equalizing heights

    $.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);

    }

  });

})(jQuery);

</script>

Result after applying Code

In the screenshot below, we display the final result after inserting the JavaScript code and applying a class to the row. When we increase the heading text size, the column automatically adjusts its height accordingly. Similarly, when we reduce the text size, the column height decreases as well.

Read More: Divi Custom Modules (Beginner’s Guide)

Conclusion

Achieving equal heights for your Divi blog columns helps ensure a visually balanced and professional layout. With the methods outlined in this tutorial—using Divi’s built-in settings, adjusting Blog Module options, and applying custom CSS and JavaScript—you can easily resolve uneven column heights. These steps are accessible for both beginners and experienced developers, allowing you to create a cohesive and appealing blog design without much hassle. Should you run into any issues, don’t hesitate to ask for support in the comments section.

If you encounter any difficulties or have further questions, feel free to ask in the comments.

Read More: Divi Code AI: WordPress/Divi Web Development with AI