How to Make Elementor Columns Equal Height (Also Flexbox Container)

How to Make Elementor Columns Equal Height (Also Flexbox Container)

When you are creating columns side by side for a website, they must have the same height so the entire design looks good. You can do this via proper HTML code. But this is really challenging for non-technical users who don’t know coding.

No worries! HappyAddons has an incredible feature by which you can instantly make your Elementor columns equal in height. You don’t have to depend on a single line of coding. HappyAddons Equal Height Feature is free.

This article will show you how to make Elementor columns equal height, including flexbox containers. Keep reading to the end.

Is Equal Height Really That Necessary?

HappyAddons-Equal-Height-Feature

While designing 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 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 is pretty organized.

So you can easily understand how important Equal height is for your website. Well, the Equal Height feature from HappyAddons can help you 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 apply this feature to other third-party addons’ widgets as well. Make sure you have the following plugins installed and activated on your site.

After that, dive into the methods explained below.

Method 01: Use the Equal Height on Elementor Widgets

To explain this method, we have selected the Price Table widget from Elementor. We have filled it with some information.

select price table

Configure the widget according to your requirements. Add the texts, prices, ribbons, and other detailed information. Information in each section may not match. 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 levels of content in each column of the Price Table. But using the equal height feature of HappyAddons, we give it a better look by equalizing the height of all columns.

Method 02: Use the Equal Height Features on a HappyAddons Widget

Let’s apply this feature on a HappyAddons widget. Select a 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

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, and you’ll find the Equal Height option there. Now 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-

Method 03: Make Your Elementor Container Equal Height with the Feature

Earlier, the equal height feature was only applicable to column-based designs. But now, it is possible to equalize the height of vertically arranged multiple flexbox containers with this feature. You can see below we have two containers in the same section, one larger than the other in height.

Equal height feature for Elementor flexbox container

Select the entire section by clicking the six-dot icon. Go to Advanced > Equal Height. Toggle on the Enable option. Select the widget. You’ll see the containers have become equal in height.

Make Elementor flexbox container equal height

Thus, you can use this feature on any widget and content created with the Flexbox container.

Let’s Try The Equal Height Feature with Elementor

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 can’t make the same height with this feature, or it bloats your site or whatever, 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

其他最新资讯