How to Use Equal Height Feature in Elementor

When you are creating columns side by side for a website, it should have the same height, otherwise, the whole design will look odd. This can be solved with the proper HTML code. But how will a non-technical person handle this situation?

Well, HappyAddons has launched an incredible feature for non-technical Elementor users. From now, you can add and adjust the equal height in your Elementor powered websites without a single line of code. 

HappyAddons Equal Height Feature is free, and it assists the Elementor users to set up the column heights the same. So, make your website design flawless by following our step by step instructions right below. 

Is Equal Height Really That Necessary?


During design a website you may often notice that some of the columns or widgets don’t have equal height. The length basically depends on the content it contains. Have a look at the above image carefully.

At a first glance, can you like the left image? We can predict, no! And just like you, most people will feel awkward. On the other hand, the right side image looks better and pretty organized.

So you can easily understand how much important Equal height is for your website. Well, the Equal Height feature from HappyAddons can help you to manage the heights of all widgets while working inside Elementor.

How to Use HappyAddons Equal Height Feature

This new feature works seamlessly with all Elementor widgets. You can also apply this feature on other third-party addons’ widgets as well.

Let’s show you the setup process for the Elementor widget & HappyAddons widget separately.

  1. Using Equal Height with an Elementor Widget
  2. Using Equal Height with a HappyAddons Widget

Let’s dive into the details.

1- Using Equal Height with An Elementor Widget

To get this feature you need the following pre-requisites-

Here, we’ve selected the Price Table widget from Elementor to show you the whole procedure.  

select price table

Now, configure the widget according to your requirements. Add the texts, prices, ribbons, and other detailed information. Information in each section may not match and thus, you will notice that the length of the Price Table widget is not evenly in the same section. 

Customize your widget

Next, click on Edit Section from the menu bar. 

Go to The Edit Section

After that, go to the Advanced section. You will get the Equal Height option there, enable it, and see the magic. 

Enable the Option of Equal Height

Next, choose the widget from the selected section. Here, you can disable the Tablet and Mobile mode.

Disable Mobile and Tablet Modes

Finally, select the margin and you will see that the widgets now have equal heights.

Here we have chosen 100px for margins. 

Check the Height of Your Widget

Well, look carefully- we include different level of content into each column of the Price Table. But using equal height feature of HappyAddons we give it a better look by equalizing the height of all columns.

2- Using Equal Height with A HappyAddons Widget

Let’s apply this feature on a third party Elementor addons- HappyAddons widget.

Firstly, select a Happy widget from the Menu Bar. We have chosen the Card widget, to display the whole process of adjusting the height.  

Setting equal hieght feature: Step 1- Choose a Randome Widget

Now customize the widget as you need. You can add images, texts, and other designs. Data from each part may not match. That’s why you will notice that the length of the widgets is not the same in the same section. 

Step 2: Customize The Selected Widget

We will now fix the length of each section equally. For that, you have to click on Edit Section from the menu bar. 

Step 3: Fix the Length from Menu Bar

Then go to the Advanced section, you’ll find the Equal Height option there. Now just enable it. 

Step 4: Enable Equal Height Option

As we showed above from this option you can disable the tablet and mobile mode.

Setting equal hieght feature- Step 5: Disable Mobile and Tablet Modes

Tada! Select the height as per your needs and see the final output!

Step 6: The Widgets Have Equal Hieights

If you want to see the process in motion check the video below-

Have You Successfully Done It?

As you can see, the Equal Height feature can bring a sharp look to your website. It was quite hard for Elementor users to edit the heights of any design.  

If you couldn’t make the same height with this feature or it bloats your site or whatsoever, feel free to knock us in the comment section below.

Let us know what type of features you need to beautify your website. Apart from that, you can check the details of each HappyAddons widget.

Have a great day!

Powerup you Elementor website with HappyAddons

Share this post

Related Post

2 Responses

  1. Hi,
    I’m trying to get 2 buttons in adjacent columns to be the same height.
    Using the Happy Addons Equal Height switch on the containing Inner Section I can see that the Button component has expanded to match the button in the next column. I can see this by adding a border to the Button component. The button is not filling the entire space. ie. there is a gap between the button background colour and the bottom border of the button. Have you any idea how to get the Button to fill the space?
    I can’t post a screenshot here.. that would illustrate my problem very well.
    Thank you, Jerry

Leave a Reply

Your email address will not be published.