Pricing Table Using Containers and Tabs in Elementor - Switch / Toggle Between Different Plans

Подписаться 4 тыс.

Просмотров 14 тыс.

50% 1

Get Elementor: be.elementor.com/visit/?bta=2...
Hosting I love and recommend for most clients and for those on a budget: www.hostg.xyz/SHBd2
🧙 Wizards of Webcraft - A series where I’ll be reviewing your websites - www.reialesa.com/wow/ Apply now!
Creating a complex pricing table in Elementor is very simple with containers. The methods shown in the video can be used for any kind of purpose and any kind of project, since the main focus is on the use of containers and tabs.
The first thing we're going to do is break down what we're going to build. This will allow us to get an idea of the amount of containers we're going to need. This part is more important with containers than ever before, since sections and columns were very limited, while containers are not.
When you combine containers with the improved tabs widget, it's very simple to create a pricing table with buttons that show different content when you click on them. You can use this to show your customers different plans and different prices. A good example of that are subscription plans that show a different price when paying monthly or yearly.
And with the tabs, you can actually change out any content you need to for whichever tab is active, allowing you to create a high converting, highly customizable pricing table. Once you get used to nesting containers, which is essentially a term that describes placing one container into another, creating complex and previously difficult to achieve layouts becomes easy.
An example of the CSS I mentioned in the video is pinned 📌 to the top comment. And if you want a more thorough explanation, check out this video: • How to Style Specific ...
Chapters:
0:00:00 - Intro
0:00:27 - Planning out our layout
0:01:33 - Building the basic layout with containers
0:07:50 - Adding in and styling the containers with our features
0:18:13 - Adding in and styling the additional containers
0:20:51 - Creating and styling the tabs and placing our content in them
0:25:17 - Making everything responsive
0:32:02 - Final changes, tips and conclusion
#elementor #pricingtable #containers
Get in touch:
www.reialesa.com/youtube/
Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.
Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!

Опубликовано:

3 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 53

@Reialesa Год назад

An example of the CSS in the video 👇 starts at 200 $ / month If you want a more thorough explanation, check out this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-N-pyHxTKzQ4.html&ab_channel=Reialesa

@charts_view8435 Год назад

Hi. Thanks man.

@Reialesa Год назад

Happy to help! 🙌

@Lumberzackk 2 месяца назад

Not sure if you mentioned this but you have to enable nested elements within Elementor feature settings for this to work! Thank you for making this video - glad I don't have to mess with CSS :)

@DerPyronatika 2 месяца назад

That was the comment, I was looking for. Thanks buddy!

@Lumberzackk 2 месяца назад

@@DerPyronatika You bet!

@CJ-fu2pn Месяц назад

You are a g thanks bro

@Reialesa Месяц назад

Honestly, I'm not sure if I mentioned it either. Judging by the responses, I didn't. 😅 So thank you for pointing it out and helping others! And thank you very much for your support, I appreciate it. 🙌

@justincarlson988 9 месяцев назад

Thank you for this, was a great tutorial project on containers and now I am never going back to sections! just awesome!

@Reialesa 9 месяцев назад

Sections really do start to feel very limited once you get used to containers. There's just so much you can do with containers that you couldn't do with sections. Thank you for your kind words and for your support, I appreciate it! 🙌🙏

@carolj.dunlop5459 22 дня назад

Totally LOVE this and it was EXACTLY what I was looking for. Thank you!

@AkanIdaresit День назад

You're the best. This is what I was looking for

@m.r9064 3 месяца назад

You are a lifesaver! Thank You so much, the way you explained was soo easy to understand.

@Reialesa Месяц назад

I'm very happy to hear that! Thank you so much for your support, I really appreciate it. 🙏

@michaelyeung1656 2 месяца назад

You SAVED my DAYSSSSSS!

@Reialesa Месяц назад

Reialesa to the rescue! 🦸😁 I'm happy to hear that, thank you for your support!

@joeystux3499 4 месяца назад

I love this video, so much help given! I have one question: how can i make that table horizontally scrollable? I mean I want the user to scroll the rows horizontally... is this possible?

@franktielemans6624 Год назад

You don't need that many contaners to create that table. You can use just one per row and give each widget a custom width via the advanced tab > Layout > width > custom width. You can even use one container for the whole thing and enable Wrap in the parent container. Also you don't have to create empty containers to leave a gap in the row anymore. Just add 3 containers instead of 4 and select each one of them and go to the advanced tab > Layout > Size and set it to NONE (or SHRINK) Next, select the parent container go to the Layout- tab > items > justify content and set it to END.

@Reialesa Год назад

Great input, thank you! You're definitely right about not needing quite that many in my specific case. The reason I did it this way, though, is because I try to make my tutorials as universal as possible. Let's say you want two different widgets in one column - now you need a container to do so. The more containers you have, the more control and versatility you have. And that's really the goal here, something anyone can use and adapt. Regarding the gaps, that's an awesome tip as well. Doing it that way didn't quite align everything properly in my case but it's a valid way to achieve a similar result.

@franktielemans6624 Год назад

@dragtille Are you talking to me or to Reialesa?

@marketingmanics 9 месяцев назад

Yes, where is your tutorial? I'd like to visit your channel.

@Requeola 11 месяцев назад

Great video! Quick question, how can you make the table so that the features are collapsible? I mean so that they only show when you click on a drop down button.

@Reialesa 10 месяцев назад

Good question! Collapsible content is a bit annoying to deal with in Elementor. Or, at least it was, up until now. I haven't tested it out yet myself but their new ''nested accordion'' widget seems like it would be a great solution to your problem. You can create a simple ''read more'' button or make it look like an actual button. Just make sure the layout you're trying to achieve isn't very complex. While a complicated layout would work, it is possible it would slow down the editor and the whole process. Still, that's the easiest option, the other options are playing around with some CSS or even JavaScript or using a plugin. But, at that point, I would recommend you look into a way to get around the problem of needing collapsible content in the first place. Long story short, try doing it with the new accordion widget. Let me know how it goes! 💪

@danielw.8800 14 дней назад

The Tabs Widget changed, so this is no solution anymore. Any idea how this works with the new Tabs Widget?

@drtoxicity 6 дней назад

Yes, I see they changed, I found out you can go to setting > Features > then change to active in Nested Elements.

@emmanuelivwighre5399 Год назад

Pls what plugin did you use to style the tab? It looks amazing.

@Reialesa Год назад

No plugin needed! You just have to go under ''Elementor - Settings - Features'' and set the ''Nested Elements'' to active. Doing so will allow you to use the new and improved tabs widget.

@DailyChallengesAroundTheWorld Год назад

@@Reialesa I did that but for some reason that style tab doesn't pull up

@jimmynyasulu7933 5 месяцев назад

@@Reialesa Thanks. Had problems in adding widgets into the tabs content. It only allowed me to add paragraphs. But after adding this setting, all good. Thanks once again

@nikasiradze13 Год назад

How you’re gonna give it table schema? it’s important for SEO

@Reialesa Год назад

For SEO, you can put in any content you want, including headings with the proper HTML tags. Overall, I'd focus on optimizing the page, since that's likely going to have a much bigger impact on SEO than the actual pricing table.

@mhthewriter871 11 месяцев назад

How to add tab button like desktop in mobile and tablet device

@Reialesa 11 месяцев назад

You can do that by going into your Tabs, go under ''Content'', ''Additional Settings'' and set the ''Breakpoint'' to ''None''. That will make the tabs behave the same way on desktop, tablet and mobile. It will prevent them from turning into an accordion on tablet and mobile. This was not an option when I made the video but it is now. Let me know how it goes! 💪

@KaifShaikhTaufiq 2 месяца назад

1:17 what application you are using for the measurement?

@Reialesa Месяц назад

I'm using a ruler browser extension. They're very easy to find, just search for ''ruler browser extension'' and you'll find one for whichever browser you're using. 💪

@elkahlani Год назад

Pls, Where can i find tabs with CSS id and icon inside it, I have tabs but only with Paragraph

@Reialesa Год назад

Hi! If I understand correctly, you're still using the old tabs widget. Check out this video to learn how to enable and use the new and improved tabs widget: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XrKhwaODj0Y.html

@elkahlani Год назад

@@Reialesa Thank you so much

@Reialesa Год назад

I'm happy to help! 🙌

@sebastianhoch4861 8 месяцев назад

In my Navigator Tabs has no extra container :( It looks like: -Container ---Tabs But it was really helpfull to see how you build the table! Big THANKS!

@Reialesa 8 месяцев назад

I'm not quite sure what you mean. In my case, it's still ''Container - Tabs - Tab #1 - Container''. You can also add in your widgets directly, without that last container. Is that perhaps what you're referring to? If not, it could be either an old version of the plugin or an actual bug. Nested elements are still not fully stable or finished. If it's causing you issues, I recommend you clear every cache you have (CDN, server, plugin) and go to ''Elementor'' - ''Tools'' - ''Regenerate Files & Data''. That often fixes issues with Elementor. I'm very happy to hear that the video was helpful! Thank you for your support, I appreciate it. 🙌🙏

@p-136 8 месяцев назад

@sebastianhich4861: You need to activate nested element feature in Elementor setting to see those option. @@Reialesa

@susheelindulkar 9 месяцев назад

So this is elementor pro version right? Container option is not available in the free one.

@Reialesa 9 месяцев назад

Yes, this is Elementor Pro but the containers should be available in the free version as well. I just tested it on a website and they work even with the Pro version deactivated. You do have to activate them, though. Here's how: elementor.com/help/container-faq-and-troubleshooting/ Let me know how it goes! 💪

@susheelindulkar 9 месяцев назад

@@Reialesa Yes, it works! I also learned in your video that we can add HTML code inside the text editor itself. Thanks for your help. 🙏

@Reialesa 9 месяцев назад

That's awesome! I'm happy to help, thank you for your kind words. 🙌

@dams1983 Месяц назад

Is it the free or paid version of elementor?

@Roy_overtake Год назад

Hii bro I need your help

@Reialesa Год назад

Hi! What do you need help with?

@Roy_overtake Год назад

@@Reialesa I need price according to input tag changes price and tabs 3 month 6 month

@Reialesa 11 месяцев назад

I'm not quite sure what you mean - if you mean you need different price tags for 3 and 6 months, you could just make extra tabs to achieve that. If it isn't what you mean, could you elaborate a little further please? 🙏

@KillahManjaro 9 месяцев назад

Great videos. Sub! I found this bit of CSS code, I can't remember which tutorial it came from :( It allows you to have tabs at the top on mobile at all times. no CSS id or class name needed. just click edit on the tab widget, advance and paste in custom CSS. @media (max-width: 767px) { .e-n-tabs-mobile > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading { display: flex; flex-wrap: wrap !important;} .elementor-widget-n-tabs .e-n-tabs-content .e-collapse.e-active { display: none; } .elementor-widget-n-tabs .e-n-tabs-content .e-collapse:not(:first-child) { display: none; } div.e-collapse:nth-child(1){display: none !important;} #tabs-services { display: flex; flex-wrap: nowrap; overflow-x: auto; width: auto; } #tabs-services .tab-title { width: auto; flex: 0 0 auto; } .e-n-tab-title { flex-shrink: 0; max-width: 120px; flex-basis: auto; } }

@Reialesa 9 месяцев назад

Thank you, both for your support and for posting the CSS. 🙏 It works! With the recent Elementor versions, however, you can do the exact same thing directly in the tabs widget by simply going under ''Content'' - ''Additional Settings'' and setting the ''Breakpoint'' to ''None''. That should save you a little bit of work! 🙌