Making Elementor columns the same height has always been a challenge while creating Elementor pages. Having two Elementor containers next to each other with content in one container longer than the other is not the best thing in terms of UI.
Premium Addons has made this easy for you. You can now use the Equal Height feature to make your Elementor containers or columns the same height with just few clicks.
Requirements:
- You will need Premium Addons free plugin installed and activated on your website.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
How to Enable Equal Height Feature?
Make sure the feature is enabled by navigating to WP Dashboard -> Premium Addons tab -> Features tab.
What Are The Options Available?
The equal height feature in Premium Addons can be applied on:
- Widgets: Apply equal height feature on specific widgets.
- Custom Selector: Apply equal height feature on a specific CSS Class or an element inside Elementor widget.
How to Apply Equal Height on Widgets?
In this example, we have a section with four Icon Box widgets. Each widget 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 section > Advanced tab > Equal Height > Enable switcher.
- Apply on: Select apply on widgets option, to apply Equal Height on any widgets.
- Widgets: Select the target widgets. In our case, it’s Premium Icon Box widget.
- Enable Equal Height on: Select devices you want to apply Equal Height option on.
How to Apply Equal Height On CSS Selector?
Basically, custom selector option is used when you need to apply Equal Height on a specific element in your widgets. In this case, we use element CSS class 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 widget. We have Icon Box widget where we’ve three columns side-by-side. You want to make them in the same height (Equal Height).
How to Get Element CSS Class Using Browser Dev Tools?
First, we need to get the right CSS class to apply equal height. To do that, right-click anywhere on your webpage, then click “Inspect” from menu. Let’s now locate Icon Box widget text box CSS class so we can set all text boxes to have the same height which will lead to placing all Find Out More buttons in the same position and adjusting icon box widget’s height to be in the same height.
How to Apply Equal Height Using CSS Class?
Navigate to parent section > Advanced tab > Equal Height > Enable Equal Height option:
- Apply on: Select apply on Custom Selector.
- Selectors: Insert CSS selectors to apply Equal Height on. In our example, it will be premium-icon-box-content-wrap but don’t forget to add a dot (.) before it so it should be .premium-icon-box-content-wrap
- Enable Equal Height on: Select devices you want to apply Equal Height option on.
That’s it. Now you have all widgets in the same height.
We hope we were able to help you through this guide. Check the rest of the features in Premium Addons for Elementor.
If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help!
Join the Community
You’re most welcome to join our Facebook group and YoutTube channel to get updates about new features, improvements, and bug fixes.
