How to Use Widget Equal Height

How to Use Widget Equal Height

As you can see in the title. You’ll get an idea of what is the documentation about. Most of the time, we are to go through the trouble of adjusting the equal height of the Widget or Column. A solution of one click is here. I’ll write about the solution below.

Note: Now, you can get equal height in terms of all of the widgets. For that, you should select the whole section and then go to the Advanced Tab > Equal Height.

Let’s dig in.

Widget Inserting and Equal Height

Here, I’ll insert a price table widget so that I can explain the whole thing. I’ll do all these things in bullets points. So, let’s start.

See the Price Table is not equal.
  • First of all, insert any widget( for example, Price Table widget) that require equal height.
  • Secondly, select the section hitting the edit section. After that, go to the Advanced Tab > Equal Height.
  • From the Equal Height section under the Advanced tab, you will find a switcher button named Enable Equal Height. Just, enable the button.
  • You can determine what things you want to bring under equal height. Simply click on the dropdown arrow from the Equal Height For and select any option.
See the Equal Height Price Table.

If you do all these things, you’re all set. Look at image above.

Equal Height: Equal Height For

Equal Height For will allow you to select what element you want to do equal height. See widget has held some contents that are in the individual div and the. In terms of that, you have to work with the widget and its child.

Note: If you want to use the Equal Height option, you will not be able to use that for multiple contents. For that, you can use the Custom Selector field.

As for example, I want to do equal height for the features list. This time widget and its child will not be perfect. So, you’ve to go for the Custom selector.

The custom selector will let you do equal height in accordance with the class name.

To select the class name, you’ve to go to the page > inspect > then select and copy the class name > finally paste in the Custom Selector field. See the image example below.

Note: I want you to share a thought. Whatever changes you do in the editor panel. No matter. Hit the preview changes and see the output.


Video Assist

Finally, if you read this doc, you can see how to use equal height. Hopefully, you are clear that two things work for equal height.

  • Widget and its child
  • Custom Selector and Class Name.

In case, you feel you need more support, you can watch the video inserted above. Thanks a lot.


About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.


Missed The Black Friday offer this year? Get up for flat 50% discount right now.