Gutenberg Equal Height Feature

Dive into the world of sophisticated web design with the Gutenberg Equal Height Feature, a standout functionality within Premium Blocks for Gutenberg. This guide is your comprehensive resource for mastering equal height blocks, a key to achieving a polished and cohesive UI/UX design on your WordPress site. Whether you’re harmonizing the look of icon boxes or ensuring consistency across various block elements for Gutenberg editor, the Equal Height Feature introduces a new level of professionalism to your site’s layout. With easy-to-follow steps, you’ll learn how to apply this feature across different devices, ensuring your content always looks its best. Join us as we explore how to leverage this powerful tool to create responsive blocks, and visually balanced designs that captivate and engage your audience.

Today, we’ll show how you can achieve that using Gutenberg Equal Height feature in Premium Blocks for Gutenberg. It’s FREE and easy to use.

Requirements:

• You will need Premium Blocks free plugin installed and activated on your website.
• Also, make sure that this Feature is enabled in Premium Blocks Settings.

How to Enable Gutenberg Equal Height Feature?

Go to WP Dashboard -> Premium Blocks -> Features tab.

What Are The Options Available in Gutenberg Equal Height Feature?

Gutenberg equal height feature in Premium Addons can be applied on:

• Blocks: Apply an equal height feature on specific blocks.
• Block Elements: Apply an equal height feature on a specific element inside Gutenberg Block.

How to Apply Gutenberg Equal Height?

In this example, we have Premium Blocks for Gutenberg Container with four Premium Icon Box Blocks. Each block is in a different column, each column has a different height. Now, all you need to do to make the columns have the same height is to navigate to the parent container > Advanced tab > Equal Height > Enable Equal Height option to have responsive blocks.

• Blocks: Select the target Blocks. In our case, it’s Premium Icon Box.
• Enable Equal Height on: Select the devices you want to apply the Equal Height option on.

How to Apply Gutenberg Equal Height On Gutenberg Block Elements?

Basically, the blocks elements option is used when you need to apply Equal Height on a specific element in your block. In this case, we use the blocks elements option to apply the equal height feature on it. For more clarification please check the below example.

Suppose, we need to apply the equal height option on a specific element inside our block. We have a Gutenberg Icon Box block where we’ve three columns side-by-side. You want to make them at the same height (Equal Height).

How to Apply Gutenberg Equal Height Using Blocks Elements option?

Navigate to parent container > Advanced tab > Equal Height > Enable Equal Height option:

• Blocks: Select the target Blocks. In our case, it’s Premium Icon Box.
• Blocks Elements: select the element to apply Equal Height on it.
• Enable Equal Height on: Select the devices you want to apply the Equal Height option on.

---

Conclusion

Wrapping up our guide on the Gutenberg Equal Height Feature, it’s evident that this functionality is a game-changer for anyone looking to elevate their website’s aesthetic and usability. Through Premium Blocks for Gutenberg, users gain access to a versatile tool that simplifies achieving a unified look across various block elements, enhancing the overall UI/UX design with the responsive blocks. The step-by-step instructions provided ensure that even those new to web design can easily implement equal height blocks, making their content more appealing and accessible across all devices. As you move forward, remember that this feature is not just about visual harmony; it’s about crafting user experiences that are both engaging and seamless. With the Gutenberg Equal Height Feature, your website will not only look professional but also offer a user-friendly interface that stands out in the digital landscape.