When you build layouts in Elementor, columns with different amounts of content rarely end up the same height. This creates an uneven appearance that is especially noticeable when your columns have a background color or border.
The Equal Height option in The Plus Addons for Elementor fixes this without writing any CSS. It works with every Elementor widget and any third-party Elementor addon, including all 120+ widgets in The Plus Addons for Elementor.
Best Used For:
- Testimonial sections where card heights differ due to varying text lengths
- Pricing table layouts where plans have different numbers of feature list items
- Blog post grids where post titles and excerpts vary in length
- Service or feature grids with columns of unequal content
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have The Plus Addons for Elementor plugin installed and activated.
- Make sure the Equal Height option is activated, to verify this visit The Plus Addons → Widgets → and Search for Equal Height and activate.
How to Set Equal Column Height in Elementor? [Video Tutorial]
How to Activate the Equal Height Elementor Extension?
Go to
- The Plus Addons → Widgets
- Search the widget name and turn on the toggle.
Why do you need Elementor Equal Height Options?
When columns contain different amounts of content, the layout breaks visually. This is most noticeable when your columns have a background color or border, since one column that is taller than the others creates an immediately visible imbalance.
Elementor does offer a Flexbox container layout option, but solving the equal height issue inside a Flexbox container is not straightforward. Targeting specific elements within your layout still requires custom CSS with Elementor Pro.
The Equal Height option in The Plus Addons for Elementor handles this without any CSS. You apply it from the Advanced tab on any container or section, and it adjusts the height of your target elements automatically. Unlike other page builders such as WPBakery, which apply equal height at the row level only, The Plus Addons for Elementor lets you target specific nested elements inside columns for finer control.
How to Make Column Height Equal in Elementor?
To make column heights equal in Elementor using the Equal Height option, apply the setting to the parent container that holds the columns. Select the container, go to Advanced > Plus Extras : Equal Height > Equal Height and toggle it on. This enables the Elementor container equal height and reveals the method options.
You will then see two methods for targeting which elements get equalized.
- Div Level — You specify the nested level of your target element from its parent container. Use this when you need to target a specific element deep inside a widget’s HTML structure.
- Unique Class — You target the CSS class of the element directly. This is the simpler option and works well for most use cases.
Note: Both methods require the browser Inspect Element tool to identify the correct target element or class name. Familiarity with browser dev tools is helpful.
If you also want to make your containers or sections interactive after adjusting their heights, see How to make any Section, Column, Container Clickable in Elementor using Wrapper Link?
The following sections cover each method in detail.
Method 1: Using Div Level?
To use the Div Level method, select the main container and toggle on the Equal Height option. From the Mode Based on dropdown, choose Div Level.
Two dropdowns appear: Select Nested Level and Select Sub Nested Level. You set a number in each based on the HTML structure around your target element.
To find the correct numbers, open the Inspect Element tool in your browser and locate the element causing the uneven height. Move upward through the HTML until you find the div with the class elementor-widget-container. Count the number of parent divs between your element and that class. That count is your value for Select Nested Level.
For Select Sub Nested Level, start at the immediate parent of your target element and count downward to the target. That count is your value for Select Sub Nested Level.
For example, if three testimonials have uneven heights and the testimonial text is the cause, right-click the text and select Inspect (this works in most browsers).
From the selected element, move upward through the HTML until you find the div with the class elementor-widget-container.
It is 2 levels up, so in the Select Nested Level dropdown select Nested Level 2. For Select Sub Nested Level, select the parent container of the target element and count downward.
It is 1 level down, so in the Select Sub Nested Level dropdown select Level 1. The settings should look like this.
This will make all the testimonials the same height by applying a min-height to all matching elements.
You can follow the video tutorial on this page for a step-by-step walkthrough of the Div Level method.
Method 2: Using Unique CSS Class?
The Unique Class method is the simpler and more commonly used option. Select the main container, toggle on the Equal Height option, and from the Mode Based on dropdown choose Unique Class.
Open the Inspect Element tool in your browser and locate the element causing the height difference. You can target either the element itself or its parent container. Copy the class name of the element you want to equalize.
Go back to the Elementor editor and paste the class into the Enter Unique Class field. Place a dot (.) before the class name.
Note: You can add the selected element’s parent classes as well to make the selector more specific.
Using the same testimonial example with the Unique Class method:
Right-click on the testimonial text and click on Inspect and copy the class.
The class name is elementor-testimonial-content. Go back to the Elementor editor and in the Enter Unique Class field paste the class name with a . (dot) in front, like this: .elementor-testimonial-content.
All columns will now be equal in height.
You can follow the video tutorial on this page for a walkthrough of the Unique Class method.
Both methods solve the Elementor equal column height problem. The choice depends on your familiarity with HTML structure.
Real World Use Cases for Elementor Equal Height
The following examples show how to apply equal height to specific widget types.
Each example uses a widget from The Plus Addons for Elementor, but the same process works with any Elementor widget.
Fixing Equal Height for Elementor Infobox
In this example, 4 Infobox widgets have uneven heights. Select the main container and go to Advanced > Plus Extras : Equal Height > Equal Height and toggle it on.
From the Mode Based on dropdown choose Div Level and open the Inspect Element tool in your browser.
The service-center div needs to be targeted to make all columns equal height.
Move upward from service-center to the class elementor-widget-container and count the number of divs in between.
It is 6 levels up, so in the Elementor editor in the Select Nested Level dropdown select Nested Level 6.
For Select Sub Nested Level, select the parent container of service-center and count downward.
It is 1 level down, so in the Select Sub Nested Level dropdown select Level 1. The settings should look like this.
All Infobox items will now be the same height.
Fixing Equal Height for Elementor Process Steps
This example shows how to apply Div Level to a single widget that generates multiple columns, rather than to individual widgets placed in separate columns.
For this, we will use the Process/Steps widget of The Plus Addons for Elementor.
In the example, 3 steps have different heights. Since everything is inside a single widget, select the widget itself and go to Advanced > Plus Extras : Equal Height > Equal Height and toggle it on.
From the Mode Based on dropdown choose Div Level and open the Inspect Element tool in your browser.
The content area is uneven. The div to target has a class name of tp-ps-right-content.
Move upward to count the number of parent divs until elementor-widget-container.
It is 3 levels up, so in the Select Nested Level dropdown select Nested Level 3.
For Select Sub Nested Level, select the parent container of tp-ps-right-content and count downward.
It is 2 levels down, so in the Select Sub Nested Level dropdown select Level 2. The settings should look like this, and all steps will now have equal height.
Fixing Equal Height for Elementor Blog Post Listing
In this example, four blog posts in a grid have uneven heights. This grid was built with the Blog/Post Listing widget of The Plus Addons for Elementor.
Select the widget itself and go to Advanced > Plus Extras : Equal Height > Equal Height and toggle it on.
From the Mode Based on dropdown choose Unique Class and open the Inspect Element tool in your browser.
The post title is the visible cause of the height difference, but targeting the content area with the class post-content-bottom is the better approach. This ensures height stays equal even when post descriptions also vary in length.
Copy the class name, go back to the Elementor editor, and paste it into the Enter Unique Class field with a . (dot) in front, like this: .post-content-bottom.
All blog post cards in the grid will now be the same height.
To add scroll-triggered entrance animations to your blog post grid, see On Scroll View Animation: Settings Overview.
Fixing Equal Height for Elementor Pricing Table
In this example, a pricing table with 3 plans has uneven column heights because each plan has a different number of feature list items.
Select the parent container and go to Advanced > Plus Extras : Equal Height > Equal Height and toggle it on.
From the Mode Based on dropdown choose Unique Class and open the Inspect Element tool in your browser.
The feature list has a class of plus-icon-list-items. This is the element causing the height difference.
Copy the class name, go back to the Elementor editor, and paste it into the Enter Unique Class field with a . (dot) in front, like this: .plus-icon-list-items.
All pricing columns will now be the same height.
Does this Equal Height option work on all devices?
Yes, it will work on all devices. Because The Plus Addons for Elementor Equal Height option dynamically calculates the height of your targeted element so it will be 100% responsive.
How to make two columns the same height in Elementor?
You can use the Equal Height option of The Plus Addons for Elementor to make your columns have equal height, you can either use Div Level or Unique Class method to do this.
Which option is better Div Level or Unique Class?
Both options are available in the free version of The Plus Addons for Elementor. The Unique Class method is simpler for most users. The Div Level method offers more control when you need to target a specific nested element.
Unlock Advanced User Interactions & Display Controls (Pro Only)
The following Pro features extend what you can do with layouts and user interactions across your Elementor site.
Display Conditions
Display Conditions let you show or hide any Elementor section or widget based on visitor-specific criteria, such as login status, date and time, WooCommerce cart contents, or custom field values. Use this when you are building membership sites, time-limited promotional sections, or pages that need to show different content to different audience segments.
Want to try it? Check the demos and explore the features.
Event Tracker
Event Tracker sends click, form submission, download, and custom interaction data to Facebook Pixel and Google Analytics 4, directly from your Elementor widgets. Use this when you need to track user engagement without installing additional analytics plugins.
Want to try it? Check the demos and explore the features.
Magic Scroll
Magic Scroll adds scroll-triggered effects to widgets and sections, including parallax, reveal-on-scroll, and background transitions. Use this when you want elements to animate as users scroll through the page.
Want to try it? Check the demos and explore the features.
Mouse Move Parallax
Mouse Move Parallax creates cursor-responsive movement on images or layers that shift based on mouse position. Use this in hero sections or feature showcases where you want elements to respond to cursor movement.
Want to try it? Check the demos and explore the features.
Sticky Column
Sticky Column pins any column or widget so it stays visible as the user scrolls down the page. Use this for sidebars, call-to-action blocks, or navigation elements that should remain in view throughout a long page.
Want to try it? Check the demos and explore the features.
Tilt 3D Parallax
Tilt 3D Parallax adds a hover-triggered tilt effect that responds to the cursor in real time. Use this on cards, feature boxes, or image showcases to add depth to the layout.
Want to try it? Check the demos and explore the features.
Tooltip Widget
Tooltip Widget lets you add tooltips to images, text, buttons, or icons. Tooltip content can include HTML, images, or Lottie animations. Use this when you need to surface additional context without adding it directly to the page layout.
Want to try it? Check the demos and explore the features.
Why Upgrade to Pro?
Upgrading to The Plus Addons for Elementor Pro gives you access to the Pro features listed above, including conditional display logic, interaction tracking, and scroll and motion effects. These features work across all widgets and sections on your site.
Suggested Read: how to add custom css to Elementor column/section or widget
