How to setup Equal Height in Elementor Widgets?

Equal Height, A Big pain for all those who are working with complex and high end websites. That is also a challenge for those who have clients who can not control their text and still want perfect design layout. Elementor is the platform, Who have played a crucial role in solving problems of web designers and being addon of it, We are also working to make it forward.
Let’s go straight to Equal Height option of The Plus Addons, Which is released with our version 3.2.2.

There are two ways to setup Equal Height :

Option 1 : Equal Height Based on Div Structure Selection.
In this option, You need to count the number of DIV to reach your required equal height section as well as It’s number in that selected DIV. Sounds a bit complex? It is for a nontechnical but this issue suppose to resolved by a bit technical person as It’s don’t have easy solution yet.
Step 1 : Choose Section or Column, Where you want to put those unequal widgets. And Reach to their Settings of Advanced -> Equal Height.
image1 The Plus Addons for Elementor
Step 2 : Now, First Take a look at structure of your widget by going in to your inspect element from front end and count it.
Note : You need to start counting DIV structure from div name “----” as it is the first one in elementor.

Here is the Screenshot to check how that hierarchy works.

image7 The Plus Addons for Elementor
image3 The Plus Addons for Elementor
Step 3 : Now Count Div for It’s Sub Part as show in below by following same procedure from inspect elements in Step 2.
image 2020 04 09T05 05 21 073Z The Plus Addons for Elementor
image4 The Plus Addons for Elementor
Step 4 : Select those values from respective dropdowns.
image2 The Plus Addons for Elementor
Cheers! You are good to go now.
Note : If you can’t find exact div count, You my try that by selecting different numbers up and down, Any combination might work.
We have a list of some popular widgets of Elementor, Elementor Pro & The Plus Addons attached in below table.
Widget Name Nested Level Equal Level
Info Box Style 1 7 3
Process Step Horizontal 3 2
Pricing List Modern 3 1
Number Counter Style 2 4 2
We have a list of some popular widgets of Elementor, Elementor Pro & The Plus Addons attached in below table.
You may submit more in this list, If you have something for us to add in this list. Send that on our support center using https://posimyth.ticksy.com
Option 2 : By Selecting Class, Which you want to equal. This is the simplest option.
In this option, You need to go to inspect element and find a unique class and add that in your equal height option panel. And you are good to go.
Step 1 : Choose Section or Column, Where you want to put those unequal widgets. And Reach to their Settings of Advanced -> Equal Height.
image9 The Plus Addons for Elementor
Step 2 : Now, First Take a look at structure of your widget by going in to your inspect element from front end and find the unique class.
Note : You have to find unique class as without it, It will not work as expected.

Here is the Screenshot to check how to find that unique class.

image8 The Plus Addons for Elementor
Step 3 : Add that unique class value in the option of equal height.
image6 The Plus Addons for Elementor
Cheers! You are good to go now.
Widget Name Style Class
Blockquote .plus_blockquote .quote-text
Blog Listing Style-2 Title #pt-plus-blog-post-list.blog-list.blog-style-2 .post-title
Content .blog-list.blog-style-2 .entry-content
style-3 Title .blog-list.blog-style-3 .post-title
Content .blog-list.blog-style-3 .blog-list-content .entry-content
Dynamic Listing Style-2 Title #pt-plus-dynamic-listing.dynamic-listing.dynamic-listing-style-2 .post-title
Content .dynamic-listing.dynamic-listing-style-2 .text-center .entry-content
style-3 Title .dynamic-listing.dynamic-listing-style-3 .post-title
Content .dynamic-listing.dynamic-listing-style-3 .blog-list-content .entry-content
Infobox Style-1 Title .pt_plus_info_box.info-box-style_1 .info-box-inner .service-title
Description .pt_plus_info_box.info-box-style_1 .info-box-inner .service-desc
Style-2 Title .pt_plus_info_box.info-box-style_2 .info-box-inner .service-title
Description .pt_plus_info_box.info-box-style_2 .info-box-inner .service-desc
Style-3 Title .pt_plus_info_box.info-box-style_3 .info-box-inner .service-title
Description .pt_plus_info_box.info-box-style_3 .info-box-inner .service-desc
Style-4 Title .pt_plus_info_box.info-box-style_4 .info-box-inner .service-title
Description .pt_plus_info_box.info-box-style_4 .info-box-inner .service-desc
Style-5 Title .pt_plus_info_box.info-box-style_7 .info-box-inner .service-title
Description .pt_plus_info_box.info-box-style_7 .info-box-inner .service-desc
Style-6 Title .pt_plus_info_box.info-box-style_11 .service-title
Description .pt_plus_info_box.info-box-style_11 .service-desc
Pricing List Modern Title .pt-plus-food-menu.food-menu-style-1 .food-menu-box .food-menu-title
Description .pt-plus-food-menu.food-menu-style-1 .food-menu-box .food-desc
Classic Title .pt-plus-food-menu.food-menu-style-3 .food-menu-box .food-menu-title
Description pt-plus-food-menu.food-menu-style-3 .food-menu-box .food-desc
Pricing Table Style-1,2,3 Content Style-Stylish List .pricing-content-wrap.listing-content.style-1 ul.plus-icon-list-items
Content Style-Editor .pricing-content-wrap.content-desc.style-1 .pricing-content
Process/Steps Vertical/Horizontal Title .tp-process-steps-widget .tp-pro-step-title
Description .tp-process-steps-widget .tp-pro-step-desc
Lotties Animation Heading .theplus-bodymovin-hd .theplus-bodymovin-heading
Description .theplus-bodymovin-hd .theplus-bodymovin-description
Animated Service Boxes Unique Class .pt_plus_asb_wrapper .asb-desc
We have a list of some popular widgets of Elementor, Elementor Pro & The Plus Addons attached in below table.
You may submit more in this list, If you have something for us to add in this list. Send that on our support center using https://posimyth.ticksy.com
Hope one from above two options will help you fulfil your needs. If it doesn’t help and have any confusions, Feel free to put your comments in the comment box below.

Leave Your Comment

Follow Us

Subscribe

Subscribe us for Amazing Updates and News about Elementor.

X