Equal height fix - Pricing table widget + focus hover effect

[@franktielemans6624]

/*This is the CSS (prefixed)*/ selector .elementor-widget-container, selector .elementor-widget-price-table, selector .elementor-price-table { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } selector .elementor-price-table__footer { margin-top: auto; width: 100%; } /*hover effects*/ selector .elementor-widget-price-table { -webkit-transition: all 0.3s ease-out ; -o-transition: all 0.3s ease-out ; transition: all 0.3s ease-out ; } selector .elementor-row:hover .elementor-widget-price-table { -webkit-filter: blur(4px); filter: blur(4px); -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } selector .elementor-widget-price-table:hover { -webkit-filter: blur(0px) !important; filter: blur(0px) !important; -webkit-transform: scale(1.2) !important; -ms-transform: scale(1.2) !important; transform: scale(1.2) !important; }

[@teuccio73]

Image widget

[@RomkeJellema]

Works like a charm! And with some additional (instant!) help from Frank, I ended up buying the man a beer. Cheers, Frank!

[@sashadbell]

Great video. Works brilliantly on desktop and tablet views, but doesn't seem to be working on mobile view. I wonder if there is something I need to add to make this work? Thanks again!

[@erutan108]

Great tutorial Frank thank you! Question - on mobile the price tables are one on top of the other because of the columns. Is there a way to show them on mobile in a carousel to better compare the tables?

[@franktielemans6624]

Well, you could put the price tables in a carousel to start with. First select each pricetable and save it as a global widget, I gave them the names pricetable1, pricetable2 & pricetable3. Add a section and drag in a testimonial carousel. In the slides delete the image, the name and the title and copy the shortcode of each pricetable in the content. Shortcodes can be found in the dashboard > templates ... find the global widget you need and copy the shortcode in the last column and paste it in the content. In the slides options set slides width to 100%, slides per view to whatever you want and slides to scroll to 1. In additional options uncheck autoplay and infinite loop. Add this CSS in the testimonial widget: selector .swiper-slide { padding: 0; } @media screen and (min-width: 1024px) { selector .elementor-swiper-button-prev, selector .elementor-swiper-button-next, selector .swiper-pagination { display: none; } } This will remove padding of the slides, the pagination dots and the arrows on desktop. You don't need them because on desktop all pricetables are shown on the page. The problem now is that the equal height fix of the pricetables doesn't work anymore. The only thing you can do is use a fixed height. I went for 700px, but use whatever what looks nice. Select the section with the testimonial carousel and add this CSS: selector .elementor-widget-price-table, selector .elementor-price-table { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 700px; } selector .elementor-price-table__footer { margin-top: auto; width: 100%; } This will make them equal again, 700px high. Forget the hover effects, it will cause lots of issues that can be solved I guess, but I don't think it's worth to do so in a carousel.

[@erutan108]

@@franktielemans6624 This is an amazing answer!!! detailed and precise, thank you so much for your help! I'll definitely give it a go. I gave up on the hover effect to begin with so I don't mind that, and the fixed height overcomes the height issue so that's... a non-issue... I REALLY appreciate the time you spent on this solution, and the test page shows exactly what I was looking for. No.1 support by far ;) Let me know how I can get you a beer?? 🍻 Thank you!

[@franktielemans6624]

@@erutan108 There is a donate button on my KZbin profile :-)

[@lebuss]

Great video, thank you! I have a question that is not directly related to this video. Can we add a dropdown and show different pricing tables based on the selection? I know that there is the Toggle component, but it provides only 2 options. I wonder if I can add more options by adding a dropdown (select) component in Elementor. Thank you for your amazing contribution!

[@franktielemans6624]

You need jQuery or Javascript to do this. Here is a way to do this: www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-select-box A different approach would be by using a (free) plugin. The carousel widget from Premium addons (free version). premiumaddons.com/carousel-widget-for-elementor-page-builder/ A very powerfull widget that allows you to use templates in the slides and you can even use Elementor widgets to navigate through carousel widget slides. Similar to remote carousel from the Plus addons , but totally free. Brilliant widget. premiumaddons.com/docs/how-to-use-elementor-widgets-to-navigate-through-carousel-widget-slides/ It won't be a dropdown though, but you can use images, icons, text, buttons,...

[@lebuss]

@@franktielemans6624 Thank you! I found some JQuery-based solutions, but it gets too complicated to display Elementor Saved Templates for each selection. ElementorPro Toggle is a great component, and that would be great to have a Select/Dropdown component in Elementor that allows us to display custom templates..

[@ShivaPanchakshari]

Hi Brilliant. Very useful. I am stil trying to figure out how to give custom bullets to a Woo commerce Poduct Template => Description portion ( I have listed features of the product as a list in product description ).

[@franktielemans6624]

What do you mean by custom bullets? list elements default list-style are bullets, but you can change them into squares, circles, roman numbers or lowercase letters. check here how: www.w3schools.com/cssref/pr_list-style-type.asp If you want to swap the bullets with an icon or svg you can remove the list-style completely (none) and add it via a pseudo element (:before).

[@ShivaPanchakshari]

@@franktielemans6624 Thanks Frank. That helped a lot to solve it. Works like a charm.

[@ChristinaMcKay]

Awesome! Thank you very much!

[@teuccio73]

if i want to use the same effect on a photo ?

[@franktielemans6624]

what widget are you using? image widget? gallery widget?

[@teuccio73]

@@franktielemans6624 image widget

[@franktielemans6624]

​@@teuccio73 That's easy. Simply replace the classnames Change .elementor-widget-price-table into .elementor-widget-image .elementor-widget-image is the classname of the image widget