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.


To get Premium blocks on your WordPress website, make sure to install and activate the following plugin(s).

  • Premium Blocks for Gutenberg – The Free WordPress Plugin.
  • Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Enable Equal Height Feature?

  • Premium Blocks Plugin: Essential for accessing Global Settings features.
  • Feature Activation: Ensure theEqual Height Feature is activated in the plugin settings.
  • Post Editor: Navigate to WP Dashboard -> Premium Blocks -> Global Features tab. Activate the Equal Height feature.
Enable Equal Heights Features
Enable Equal Heights Features

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.


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.

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks