How To Use The Equal Height Extension By Atomic Addons

The Equal Height extension in Atomic Addons allows you to keep multiple Elementor elements at a consistent height, even when their content varies. It helps create cleaner and more balanced layouts for cards, columns, feature sections, pricing tables, and other content blocks. With simple configuration and flexible controls, you can align elements evenly and maintain a polished appearance across different screen sizes without adding custom CSS. This documentation will guide you through how to use and configure the Equal Height extension in Atomic Addons.

Enable the Equal Height Extension

(Open the full-size image in a new tab)

To use the Equal Height Extension from Atomic Addons, first, you have to enable the extension.

1. 1

   Go to WordPress dashboard → Atomic Addons Plugin dashboard.

2. 2

   Then, Click the Extensions Tab.

3. 3

   Search for the Equal Height Extension.

4. 4

   Enable the Equal Height Extension.

5. 5

   Hit the Save Settings Button.

Primary Setup for Equal Height Extension

(Open the full-size image in a new tab)

To begin using this feature, first select an existing widget or section from your page layout. For demonstration purposes, we are using a designed section with the Advanced Icon Box widget to showcase how the Widget Equal Height feature works. Please note that this feature does not function inside Elementor Editor Mode. To see the final result properly, you need to preview the page on the frontend.

Place To Find The Equal Height Extension

(Open the full-size image in a new tab)

To find the Equal Height Extension, you must need to select the container where you have used the elements. Let’s see the steps below –

1. 1

   Click to any container to select the full container along with its elements.

2. 2

   Now move to the Advanced tab to customizing the container

3. 3

   Here you will found the Equal Height extension visible. You can click on it and enable it to apply the equal height functionality to the elements.

Enabling & Using the Equal Height Extension

(Open the full-size image in a new tab)

1. 1

   Enable Equal Height: Enable the switcher to make your widgets & columns equal height with this option.

2. 2

   Equal Height For: You can choose the elements where you want to apply the Equal Height. The available options are columns, widgets, Widgets > Child, Widgets > Child > child, Widget > Child > Child > Child & Custom Selector. Let’s have a look how each option works –

• Columns – Makes all selected columns the same height, regardless of the amount of content inside them.
• Widgets – Applies equal height to all widgets within the selected section or column.
• Widgets > Child – Targets the direct child elements inside widgets and makes their heights equal.
• Widgets > Child > Child – Applies equal height to the second-level child elements inside widgets for deeper layout structures.
• Widgets > Child > Child > Child – Extends equal height control to third-level nested child elements for complex layouts.
• Custom Selector – Allows you to define your own CSS selector to apply equal height to specific elements manually.

Final Preview

(Open the full-size image in a new tab)

After publish the page, now you can see the changes that you have made by the Equal Height extension.

All done, You have successfully customized the Equal Height Extension on your website.

Thanks for being with us.