{"id":103818,"date":"2024-01-02T17:03:38","date_gmt":"2024-01-02T11:33:38","guid":{"rendered":"https:\/\/theplusaddons.com\/?post_type=documents&#038;p=103818"},"modified":"2026-04-17T13:48:16","modified_gmt":"2026-04-17T08:18:16","slug":"equal-column-height-elementor","status":"publish","type":"documents","link":"https:\/\/theplusaddons.com\/docs\/equal-column-height-elementor\/","title":{"rendered":"How to Set Equal Column Height in Elementor for FREE (All Widgets)"},"content":{"rendered":"\n<p class=\"tpae_no_margin\">When you build layouts in Elementor, columns with different amounts of content rarely end up the same height. This creates an uneven appearance that is especially noticeable when your columns have a background color or border.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">The Equal Height option in The Plus Addons for Elementor fixes this without writing any CSS. It works with every Elementor widget and any third-party Elementor addon, including all 120+ widgets in The Plus Addons for Elementor.<\/p>\n\n\n\n<p class=\"tpae_no_margin\"><strong>Best Used For:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Testimonial sections where card heights differ due to varying text lengths<\/li>\n\n\n\n<li>Pricing table layouts where plans have different numbers of feature list items<\/li>\n\n\n\n<li>Blog post grids where post titles and excerpts vary in length<\/li>\n\n\n\n<li>Service or feature grids with columns of unequal content<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-buttons tpae_no_margin is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-u-002-du-002-dnxt-global-color-8-color has-u-002-du-002-dnxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/theplusaddons.com\/elementor-extras\/equal-height?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n<li>Make sure the Equal Height option is activated, to verify this visit The Plus Addons \u2192 Widgets \u2192 and Search for Equal Height and activate.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Equal Column Height in Elementor? [Video Tutorial]<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Fix Equal Column Heights for all Elementor widgets for FREE\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/SQ-_aAQ_cww?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Equal Height Elementor Extension?<\/h2>\n\n\n\n<p class=\"tpae_no_margin\">Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Addons <\/strong>\u2192<strong> Widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search<\/strong> the widget name and<strong> turn on the toggle.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"358\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/01\/equal-height-1024x358.png\" alt=\"from\" class=\"wp-image-179910\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/01\/equal-height-1024x358.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/01\/equal-height-300x105.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/01\/equal-height-768x269.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/01\/equal-height-1536x537.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/01\/equal-height-600x210.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/01\/equal-height.png 1899w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Why do you need Elementor Equal Height Options?<\/h2>\n\n\n\n<p class=\"tpae_no_margin\">When columns contain different amounts of content, the layout breaks visually. This is most noticeable when your columns have a background color or border, since one column that is taller than the others creates an immediately visible imbalance.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">Elementor does offer a Flexbox container layout option, but solving the equal height issue inside a Flexbox container is not straightforward. Targeting specific elements within your layout still requires custom CSS with Elementor Pro.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">The Equal Height option in The Plus Addons for Elementor handles this without any CSS. You apply it from the <strong>Advanced<\/strong> tab on any container or section, and it adjusts the height of your target elements automatically. Unlike other page builders such as WPBakery, which apply equal height at the row level only, The Plus Addons for Elementor lets you target specific nested elements inside columns for finer control.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Make Column Height Equal in Elementor?<\/h2>\n\n\n\n<p class=\"tpae_no_margin\">To make column heights equal in Elementor using the Equal Height option, apply the setting to the parent container that holds the columns. Select the container, go to <strong>Advanced<\/strong> &gt; <strong>Plus Extras : Equal Height<\/strong> &gt; <strong>Equal Height<\/strong> and toggle it on. This enables the Elementor container equal height and reveals the method options.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"585\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-option.png\" alt=\"equal height option\" class=\"wp-image-103821\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-option.png 299w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-option-153x300.png 153w\" sizes=\"auto, (max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">You will then see two methods for targeting which elements get equalized.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Div Level<\/strong> \u2014 You specify the nested level of your target element from its parent container. Use this when you need to target a specific element deep inside a widget&#8217;s HTML structure.<\/li>\n\n\n\n<li><strong>Unique Class<\/strong> \u2014 You target the CSS class of the element directly. This is the simpler option and works well for most use cases.<\/li>\n<\/ul>\n\n\n\n<p class=\"tpae_no_margin\"><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: Both methods require the browser Inspect Element tool to identify the correct target element or class name. Familiarity with browser dev tools is helpful.<\/em>&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<p class=\"tpae_no_margin\"><\/p>\n\n\n\n<p class=\"tpae_no_margin\">If you also want to make your containers or sections interactive after adjusting their heights, see <a href=\"https:\/\/theplusaddons.com\/docs\/make-elementor-container-clickable\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to make any Section, Column, Container Clickable in Elementor using Wrapper Link?<\/a><\/p>\n\n\n\n<p class=\"tpae_no_margin\">The following sections cover each method in detail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Method 1: Using Div Level?<\/h3>\n\n\n\n<p class=\"tpae_no_margin\">To use the Div Level method, select the main container and toggle on the Equal Height option. From the <strong>Mode Based on<\/strong> dropdown, choose <strong>Div Level<\/strong>.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">Two dropdowns appear: <strong>Select Nested Level<\/strong> and <strong>Select Sub Nested Level<\/strong>. You set a number in each based on the HTML structure around your target element.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">To find the correct numbers, open the Inspect Element tool in your browser and locate the element causing the uneven height. Move upward through the HTML until you find the div with the class <strong>elementor-widget-container<\/strong>. Count the number of parent divs between your element and that class. That count is your value for <strong>Select Nested Level<\/strong>.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">For <strong>Select Sub Nested Level<\/strong>, start at the immediate parent of your target element and count downward to the target. That count is your value for <strong>Select Sub Nested Level<\/strong>.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">For example, if three testimonials have uneven heights and the testimonial text is the cause, right-click the text and select <strong>Inspect<\/strong> (this works in most browsers).&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"917\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/inspect-div-demo.gif\" alt=\"inspect div demo\" class=\"wp-image-103822\" title=\"\"><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">From the selected element, move upward through the HTML until you find the div with the class <strong>elementor-widget-container<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-1024x469.png\" alt=\"equal height div level\" class=\"wp-image-103823\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-1024x469.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-300x137.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-768x352.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-1536x703.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-600x275.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level.png 1747w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">It is 2 levels up, so in the <strong>Select Nested Level<\/strong> dropdown select <strong>Nested Level 2<\/strong>. For <strong>Select Sub Nested Level<\/strong>, select the parent container of the target element and count downward.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"447\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-down-1024x447.png\" alt=\"equal height div level down\" class=\"wp-image-103824\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-down-1024x447.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-down-300x131.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-down-768x335.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-down-1536x670.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-down-600x262.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-down.png 1729w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">It is 1 level down, so in the <strong>Select Sub Nested Level<\/strong> dropdown select <strong>Level 1<\/strong>. The settings should look like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"670\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-settings.png\" alt=\"equal height div level settings\" class=\"wp-image-103825\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-settings.png 299w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-settings-134x300.png 134w\" sizes=\"auto, (max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">This will make all the testimonials the same height by applying a min-height to all matching elements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"445\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height-1024x445.png\" alt=\"equal height div level min height\" class=\"wp-image-103826\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height-1024x445.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height-300x130.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height-768x334.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height-1536x668.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height-600x261.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height.png 1736w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">You can follow the video tutorial on this page for a step-by-step walkthrough of the Div Level method.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Fix Equal Column Heights for all Elementor widgets for FREE\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/SQ-_aAQ_cww?start=191&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Method 2: Using Unique CSS Class?<\/h3>\n\n\n\n<p class=\"tpae_no_margin\">The Unique Class method is the simpler and more commonly used option. Select the main container, toggle on the Equal Height option, and from the <strong>Mode Based on<\/strong> dropdown choose <strong>Unique Class<\/strong>.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">Open the Inspect Element tool in your browser and locate the element causing the height difference. You can target either the element itself or its parent container. Copy the class name of the element you want to equalize.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">Go back to the Elementor editor and paste the class into the <strong>Enter Unique Class<\/strong> field. Place a dot (<strong>.<\/strong>) before the class name.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: You can add the selected element&#8217;s parent classes as well to make the selector more specific.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p class=\"tpae_no_margin\"><\/p>\n\n\n\n<p class=\"tpae_no_margin\">Using the same testimonial example with the Unique Class method:<\/p>\n\n\n\n<p class=\"tpae_no_margin\">Right-click on the testimonial text and click on Inspect and copy the class.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1919\" height=\"882\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/inspect-css-class.gif\" alt=\"inspect css class\" class=\"wp-image-103828\" title=\"\"><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">The class name is <strong>elementor-testimonial-content<\/strong>. Go back to the Elementor editor and in the <strong>Enter Unique Class<\/strong> field paste the class name with a <strong>.<\/strong> (dot) in front, like this: <strong>.elementor-testimonial-content<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"544\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-unique-class-settings.png\" alt=\"equal height unique class settings\" class=\"wp-image-103829\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-unique-class-settings.png 301w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-unique-class-settings-166x300.png 166w\" sizes=\"auto, (max-width: 301px) 100vw, 301px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">All columns will now be equal in height.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"445\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height-1024x445.png\" alt=\"equal height div level min height\" class=\"wp-image-103826\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height-1024x445.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height-300x130.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height-768x334.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height-1536x668.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height-600x261.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/equal-height-div-level-min-height.png 1736w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">You can follow the video tutorial on this page for a walkthrough of the Unique Class method.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Fix Equal Column Heights for all Elementor widgets for FREE\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/SQ-_aAQ_cww?start=649&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"tpae_no_margin\"><\/p>\n\n\n\n<p class=\"tpae_no_margin\">Both methods solve the Elementor equal column height problem. The choice depends on your familiarity with HTML structure.<\/p>\n\n\n\n<p class=\"tpae_no_margin has-medium-font-size\"><strong>Real World Use Cases for Elementor Equal Height<\/strong><\/p>\n\n\n\n<p class=\"tpae_no_margin\">The following examples show how to apply equal height to specific widget types.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">Each example uses a widget from The Plus Addons for Elementor, but the same process works with any Elementor widget.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fixing Equal Height for Elementor Infobox<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"400\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-1024x400.png\" alt=\"infobox demo\" class=\"wp-image-103831\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-1024x400.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-300x117.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-768x300.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-600x234.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo.png 1161w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">In this example, 4 Infobox widgets have uneven heights. Select the main container and go to <strong>Advanced<\/strong> &gt; <strong>Plus Extras : Equal Height<\/strong> &gt; <strong>Equal Height<\/strong> and toggle it on.<\/p>\n\n\n\n<p class=\"tpae_no_margin\"><br>From the <strong>Mode Based on<\/strong> dropdown choose <strong>Div Level<\/strong> and open the Inspect Element tool in your browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"489\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-inspect-1024x489.png\" alt=\"infobox demo inspect\" class=\"wp-image-103832\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-inspect-1024x489.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-inspect-300x143.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-inspect-768x367.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-inspect-1536x733.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-inspect-600x286.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-inspect.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">The <strong>service-center<\/strong> div needs to be targeted to make all columns equal height.<\/p>\n\n\n\n<p class=\"tpae_no_margin\"><br>Move upward from <strong>service-center<\/strong> to the class <strong>elementor-widget-container<\/strong> and count the number of divs in between.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-nested-level-1024x487.png\" alt=\"infobox demo nested level\" class=\"wp-image-103833\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-nested-level-1024x487.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-nested-level-300x143.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-nested-level-768x366.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-nested-level-1536x731.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-nested-level-600x286.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-nested-level.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">It is 6 levels up, so in the Elementor editor in the <strong>Select Nested Level<\/strong> dropdown select <strong>Nested Level 6<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-sub-nested-level-1024x487.png\" alt=\"infobox demo sub nested level\" class=\"wp-image-103834\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-sub-nested-level-1024x487.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-sub-nested-level-300x143.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-sub-nested-level-768x366.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-sub-nested-level-1536x731.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-sub-nested-level-600x286.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-sub-nested-level.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">For <strong>Select Sub Nested Level<\/strong>, select the parent container of <strong>service-center<\/strong> and count downward.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">&nbsp;<br>It is 1 level down, so in the <strong>Select Sub Nested Level<\/strong> dropdown select <strong>Level 1<\/strong>. The settings should look like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"607\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-settings.png\" alt=\"infobox demo settings\" class=\"wp-image-103835\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-settings.png 301w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-settings-149x300.png 149w\" sizes=\"auto, (max-width: 301px) 100vw, 301px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">All Infobox items will now be the same height.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/infobox-demo-final-1024x346.png\" alt=\"infobox demo final\" class=\"wp-image-103836\" title=\"\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fixing Equal Height for Elementor Process Steps<\/h2>\n\n\n\n<p class=\"tpae_no_margin\">This example shows how to apply <strong>Div Level<\/strong> to a single widget that generates multiple columns, rather than to individual widgets placed in separate columns.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">For this, we will use the Process\/Steps widget of The Plus Addons for Elementor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"474\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-1024x474.png\" alt=\"steps demo\" class=\"wp-image-103837\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-1024x474.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-300x139.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-768x355.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-600x278.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo.png 1150w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">In the example, 3 steps have different heights. Since everything is inside a single widget, select the widget itself and go to <strong>Advanced<\/strong> &gt; <strong>Plus Extras : Equal Height<\/strong> &gt; <strong>Equal Height<\/strong> and toggle it on.<\/p>\n\n\n\n<p class=\"tpae_no_margin\"><br>From the <strong>Mode Based on<\/strong> dropdown choose <strong>Div Level<\/strong> and open the Inspect Element tool in your browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"488\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-inspect-1024x488.png\" alt=\"steps demo inspect\" class=\"wp-image-103838\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-inspect-1024x488.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-inspect-300x143.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-inspect-768x366.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-inspect-1536x732.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-inspect-600x286.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-inspect.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">The content area is uneven. The div to target has a class name of <strong>tp-ps-right-content<\/strong>.<\/p>\n\n\n\n<p class=\"tpae_no_margin\"><br>Move upward to count the number of parent divs until <strong>elementor-widget-container<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-nested-level-1024x487.png\" alt=\"steps demo nested level\" class=\"wp-image-103839\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-nested-level-1024x487.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-nested-level-300x143.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-nested-level-768x366.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-nested-level-1536x731.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-nested-level-600x286.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-nested-level.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">It is 3 levels up, so in the <strong>Select Nested Level<\/strong> dropdown select <strong>Nested Level 3<\/strong>.<\/p>\n\n\n\n<p class=\"tpae_no_margin\"><br>For <strong>Select Sub Nested Level<\/strong>, select the parent container of <strong>tp-ps-right-content<\/strong> and count downward.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"489\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-sub-nested-level-1024x489.png\" alt=\"steps demo sub nested level\" class=\"wp-image-103840\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-sub-nested-level-1024x489.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-sub-nested-level-300x143.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-sub-nested-level-768x367.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-sub-nested-level-1536x734.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-sub-nested-level-600x287.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-sub-nested-level.png 1918w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">It is 2 levels down, so in the <strong>Select Sub Nested Level<\/strong> dropdown select <strong>Level 2<\/strong>. The settings should look like this, and all steps will now have equal height.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"832\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-settings.png\" alt=\"steps demo settings\" class=\"wp-image-103841\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-settings.png 302w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/steps-demo-settings-109x300.png 109w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fixing Equal Height for Elementor Blog Post Listing<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"479\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-demo-1024x479.png\" alt=\"blog demo\" class=\"wp-image-103842\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-demo-1024x479.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-demo-300x140.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-demo-768x359.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-demo-600x281.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-demo.png 1154w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">In this example, four blog posts in a grid have uneven heights. This grid was built with the Blog\/Post Listing widget of The Plus Addons for Elementor.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">Select the widget itself and go to <strong>Advanced<\/strong> &gt; <strong>Plus Extras : Equal Height<\/strong> &gt; <strong>Equal Height<\/strong> and toggle it on.<\/p>\n\n\n\n<p class=\"tpae_no_margin\"><br>From the <strong>Mode Based on<\/strong> dropdown choose <strong>Unique Class<\/strong> and open the Inspect Element tool in your browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"490\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-inspect-1024x490.png\" alt=\"blog inspect\" class=\"wp-image-103843\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-inspect-1024x490.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-inspect-300x144.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-inspect-768x368.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-inspect-1536x735.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-inspect-600x287.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-inspect.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">The post title is the visible cause of the height difference, but targeting the content area with the class <strong>post-content-bottom<\/strong> is the better approach. This ensures height stays equal even when post descriptions also vary in length.<\/p>\n\n\n\n<p class=\"tpae_no_margin\"><br>Copy the class name, go back to the Elementor editor, and paste it into the <strong>Enter Unique Class<\/strong> field with a <strong>.<\/strong> (dot) in front, like this: <strong>.post-content-bottom<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"767\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-settings.png\" alt=\"blog settings\" class=\"wp-image-103844\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-settings.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-settings-117x300.png 117w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">All blog post cards in the grid will now be the same height.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/blog-demo-final-1024x489.png\" alt=\"blog demo final\" class=\"wp-image-103845\" title=\"\"><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">To add scroll-triggered entrance animations to your blog post grid, see <a href=\"https:\/\/theplusaddons.com\/docs\/on-scroll-view-animation-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">On Scroll View Animation: Settings Overview<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fixing Equal Height for Elementor Pricing Table<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"491\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-demo-1024x491.png\" alt=\"pricing table demo\" class=\"wp-image-103846\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-demo-1024x491.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-demo-300x144.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-demo-768x368.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-demo-600x288.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-demo.png 1185w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">In this example, a pricing table with 3 plans has uneven column heights because each plan has a different number of feature list items.<\/p>\n\n\n\n<p class=\"tpae_no_margin\">Select the parent container and go to <strong>Advanced<\/strong> &gt; <strong>Plus Extras : Equal Height<\/strong> &gt; <strong>Equal Height<\/strong> and toggle it on.<\/p>\n\n\n\n<p class=\"tpae_no_margin\"><br>From the <strong>Mode Based on<\/strong> dropdown choose <strong>Unique Class<\/strong> and open the Inspect Element tool in your browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"488\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-inspect-1024x488.png\" alt=\"pricing table inspect\" class=\"wp-image-103847\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-inspect-1024x488.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-inspect-300x143.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-inspect-768x366.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-inspect-1536x732.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-inspect-600x286.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-inspect.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">The feature list has a class of <strong>plus-icon-list-items<\/strong>. This is the element causing the height difference.<\/p>\n\n\n\n<p class=\"tpae_no_margin\"><br>Copy the class name, go back to the Elementor editor, and paste it into the <strong>Enter Unique Class<\/strong> field with a <strong>.<\/strong> (dot) in front, like this: <strong>.plus-icon-list-items<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/01\/pricing-table-settings.png\" alt=\"pricing table settings\" class=\"wp-image-103848\" title=\"\"><\/figure>\n\n\n\n<p class=\"tpae_no_margin\">All pricing columns will now be the same height.<\/p>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1675168528297\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Does this Equal Height option work on all devices?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, it will work on all devices. Because The Plus Addons for Elementor Equal Height option dynamically calculates the height of your targeted element so it will be 100% responsive.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1675168547154\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How to make two columns the same height in Elementor?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>You can use the Equal Height option of The Plus Addons for Elementor to make your columns have equal height, you can either use Div Level or Unique Class method to do this.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1675168563834\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Which option is better Div Level or Unique Class?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Both options are available in the free version of The Plus Addons for Elementor. The Unique Class method is simpler for most users. The Div Level method offers more control when you need to target a specific nested element.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<p class=\"tpae_no_margin\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Unlock Advanced User Interactions &amp; Display Controls (Pro Only)<\/h2>\n\n\n\n<p>The following Pro features extend what you can do with layouts and user interactions across your Elementor site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Display Conditions<\/h3>\n\n\n\n<p>Display Conditions let you show or hide any Elementor section or widget based on visitor-specific criteria, such as login status, date and time, WooCommerce cart contents, or custom field values. Use this when you are building membership sites, time-limited promotional sections, or pages that need to show different content to different audience segments.<\/p>\n\n\n\n<p>Want to try it? Check the demos and explore the <a href=\"https:\/\/theplusaddons.com\/elementor-extras\/display-conditions\/\" target=\"_blank\" rel=\"noreferrer noopener\">features<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Event Tracker<\/h3>\n\n\n\n<p>Event Tracker sends click, form submission, download, and custom interaction data to Facebook Pixel and Google Analytics 4, directly from your Elementor widgets. Use this when you need to track user engagement without installing additional analytics plugins.<\/p>\n\n\n\n<p>Want to try it? Check the demos and explore the <a href=\"https:\/\/theplusaddons.com\/elementor-extras\/facebook-pixel-event-conversion-tracker\/\" target=\"_blank\" rel=\"noreferrer noopener\">features<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Magic Scroll<\/h3>\n\n\n\n<p>Magic Scroll adds scroll-triggered effects to widgets and sections, including parallax, reveal-on-scroll, and background transitions. Use this when you want elements to animate as users scroll through the page.<\/p>\n\n\n\n<p>Want to try it? Check the demos and explore the <a href=\"https:\/\/theplusaddons.com\/elementor-extras\/magic-scroll-integration\/\" target=\"_blank\" rel=\"noreferrer noopener\">features<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mouse Move Parallax<\/h3>\n\n\n\n<p>Mouse Move Parallax creates cursor-responsive movement on images or layers that shift based on mouse position. Use this in hero sections or feature showcases where you want elements to respond to cursor movement.<\/p>\n\n\n\n<p>Want to try it? Check the demos and explore the <a href=\"https:\/\/theplusaddons.com\/elementor-extras\/global-mouse-hover-parallax\/\" target=\"_blank\" rel=\"noreferrer noopener\">features<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sticky Column<\/h3>\n\n\n\n<p>Sticky Column pins any column or widget so it stays visible as the user scrolls down the page. Use this for sidebars, call-to-action blocks, or navigation elements that should remain in view throughout a long page.<\/p>\n\n\n\n<p>Want to try it? Check the demos and explore the <a href=\"https:\/\/theplusaddons.com\/elementor-extras\/sticky-column\/\" target=\"_blank\" rel=\"noreferrer noopener\">features<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tilt 3D Parallax<\/h3>\n\n\n\n<p>Tilt 3D Parallax adds a hover-triggered tilt effect that responds to the cursor in real time. Use this on cards, feature boxes, or image showcases to add depth to the layout.<\/p>\n\n\n\n<p>Want to try it? Check the demos and explore the <a href=\"https:\/\/theplusaddons.com\/elementor-extras\/global-mouse-hover-parallax\/#3d-effects\" target=\"_blank\" rel=\"noreferrer noopener\">features<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tooltip Widget<\/h3>\n\n\n\n<p>Tooltip Widget lets you add tooltips to images, text, buttons, or icons. Tooltip content can include HTML, images, or Lottie animations. Use this when you need to surface additional context without adding it directly to the page layout.<\/p>\n\n\n\n<p>Want to try it? Check the demos and explore the <a href=\"https:\/\/theplusaddons.com\/elementor-extras\/global-tooltips\/\" target=\"_blank\" rel=\"noreferrer noopener\">features<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why Upgrade to Pro?<\/h3>\n\n\n\n<p>Upgrading to <strong><a href=\"https:\/\/theplusaddons.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Plus Addons for Elementor Pro<\/a><\/strong> gives you access to the Pro features listed above, including conditional display logic, interaction tracking, and scroll and motion effects. These features work across all widgets and sections on your site.<\/p>\n\n\n\n<p class=\"interlink\"><em>Suggested Read: <a href=\"https:\/\/theplusaddons.com\/docs\/custom-css-in-elementor\/\">how to add custom css to Elementor column\/section or widget<\/a><\/em><\/p>\n\n\n\n<p><\/p>\n","protected":false},"author":2115,"featured_media":104356,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[542,525],"class_list":["post-103818","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-equal-height","docs-plus-extras"],"acf":[],"_links":{"self":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents\/103818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/users\/2115"}],"replies":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/comments?post=103818"}],"version-history":[{"count":0,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents\/103818\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/media\/104356"}],"wp:attachment":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/media?parent=103818"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/docs?post=103818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}