Ensuring that all Divi Blurb modules have the same height is essential for creating a clean, professional, and visually appealing layout. When modules have different heights, it can disrupt the design and make your page look unbalanced. Fortunately, Divi provides an easy way to set equal heights for Blurb modules, improving alignment and overall aesthetics.
In this step-by-step guide, we will walk you through the process of making your Blurb modules the same height. Whether you’re working with a single row or applying the setting across your entire website, these simple instructions will help you achieve a consistent and polished design effortlessly.
Blurb Module Height Before Adjustment
The screenshot below shows the current blurb module sizes before implementing equal height. As you can see, the modules have varying heights, which may affect the overall design and alignment. To achieve a more balanced and visually appealing layout, we will now apply equal height to these blurb modules.
Read More: Divi Modules Ultimate List (with Documentation)
Setting the Blurb Module Height
First, select one of the blurb modules and set its height according to your website’s requirements. In our case, we selected the blurb module with more content, as its size is larger than the other two.
- Click on the Gear Icon of the selected blurb module.
- Navigate to the Design tab.
- Click on the Sizing option.
Learn More: Divi Blog Grid Equal Height – How to Equalize the Posts’ Height
Now, set the blurb module size according to your design preferences. In our case, we have set it to 488px, but this may vary based on your website layout. To ensure flexibility, set it as the Minimum Height to maintain consistency across modules.
Equalize Blurb Module Heights in a Row
Once you have set the height for one module, it’s time to apply the same height to all modules in the row. Whether you have two or more modules, you can easily ensure they maintain equal height.
- Click on the Extended Blurb Style as shown in the screenshot below.
- Set the Throughout option to Row if you want to apply it to a single row’s modules.
- Click on the Extend button, as demonstrated in the screenshot.
Final Result
The screenshot below showcases the final outcome after applying all the changes. As you can see, the modules now have equal height, ensuring a clean and well-aligned layout.
Note: In this tutorial, we have set the equal height for a single row’s Blurb module. However, as we applied this setting to the row in the previous steps, you can also extend it across the entire page or a specific section by changing the Throughout option accordingly, as shown in the screenshot below.
Conclusion
By following this tutorial, you have successfully set equal heights for your Divi Blurb modules, ensuring a uniform and visually appealing layout. This method not only enhances the readability and structure of your content but also improves the user experience by maintaining a well-balanced design. If you need to apply this setting beyond a single row, you can easily extend it to a section or even the entire page by adjusting the Throughout option. Implementing equal heights across your modules will create a more cohesive and professional look, making your Divi website stand out.
Learn More: How to Equalize Column Heights in Divi
0 Comments