How do I make Elementor widgets and columns the same height? This is a very common question for Elementor users while creating Elementor sections to achieve a well-balanced and good-looking design in terms of UI/UX.
Today, we’ll show how you can achieve that using Elementor Equal Height feature in Premium Addons for Elementor. It’s totally FREE and easy to use.
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 for Elementor?
Make sure that Equal Height feature is enabled by navigating to WP Dashboard -> Premium Addons for Elementor tab -> Features tab.
What Are The Options Available in Equal Height Feature?
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 Elementor Widget?
In this example, we have an Elementor section with four Elementor 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 Equal Height option.
- Apply on: Select apply on widgets option, to apply Equal Height on any Elementor widgets.
- Widgets: Select the target widgets. In our case, it’s Premium Icon Box.
- Enable Equal Height on: Select devices you want to apply Equal Height option on.
How to Apply Equal Height On CSS Selector In Elementor Widget?
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 Elementor 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 In Elementor 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. You can check out the rest of our Unique features for Elementor from here.
If you still need any further assistance, feel free to contact Premium Addons support team from here. 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.
