An example of the CSS in the video 👇 starts at 200 $ / month If you want a more thorough explanation, check out this video: th-cam.com/video/N-pyHxTKzQ4/w-d-xo.html&ab_channel=Reialesa
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 :)
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. 🙌
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! 🙌🙏
Thanks for this. It's funny that this is so niche considering that it's so important to know to become a good marketer. I suppose the fact it's for "elementor" makes it more niche, but still. Crazy to think that most elementor users are not going this deep.
Could you possibly attach an export of the page? such that we can use it as a template? instead of redoing everything you've allready done? thanks in advance.
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.
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.
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?
I'm very happy to hear that it was helpful! When it comes to making the table horizontally scrollable, one option would be to use the carousel widget. Otherwise, it would require either custom code or an external plugin. I would suggest trying the carousel widget first and, if needed, adapting your table design slightly so it fits into what that widget is capable of. That's the easiest solution. Let me know how it goes! 💪
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.
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! 💪
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.
@@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
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.
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. 💪
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: th-cam.com/video/XrKhwaODj0Y/w-d-xo.html
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!
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. 🙌🙏
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! 💪
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! 💪
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? 🙏
That's technically true, but it's a little bit more complicated than that. To create complex tables in Elementor you either need an additional plugin, which I do my very best to avoid for several reasons, one of them being the website speed. Or you need to create them with HTML and CSS, but since this video is about a no-code solution, that was not an option. Creating advanced tables with containers is the easiest option for most users, in my opinion. 😁
I don't see how using global widgets would be helpful in this case. As far as I'm aware, containers can't be used as global widgets. And using other widgets as global widgets, such as headings, means that they all have the same content. Which definitely isn't what I want when I'm building a pricing table like this. Plus, copy-pasting styles doesn't take a lot of time, so I usually just do that instead of creating global widgets. Using them can definitely be a faster way to build things sometimes, but it's not something I usually prefer.
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;
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! 🙌
An example of the CSS in the video 👇
starts at 200 $ / month
If you want a more thorough explanation, check out this video: th-cam.com/video/N-pyHxTKzQ4/w-d-xo.html&ab_channel=Reialesa
Hi. Thanks man.
Happy to help! 🙌
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 :)
That was the comment, I was looking for. Thanks buddy!
@@DerPyronatika You bet!
You are a g thanks bro
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. 🙌
Thank you for this, was a great tutorial project on containers and now I am never going back to sections! just awesome!
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! 🙌🙏
Thank you very much for your great tutorial! 🍀😍 It helped me understand how this actually works and create the price tables I really wanted.
You need to enable nested Elements in Elementor settings after that you can drag container in tabs. although Thank you so much for giving good content
Thanks for this. It's funny that this is so niche considering that it's so important to know to become a good marketer. I suppose the fact it's for "elementor" makes it more niche, but still. Crazy to think that most elementor users are not going this deep.
Could you possibly attach an export of the page? such that we can use it as a template? instead of redoing everything you've allready done? thanks in advance.
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.
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.
@dragtille Are you talking to me or to Reialesa?
Yes, where is your tutorial? I'd like to visit your channel.
You are a lifesaver! Thank You so much, the way you explained was soo easy to understand.
I'm very happy to hear that! Thank you so much for your support, I really appreciate it. 🙏
How come I never thought about this?.... Great video! [Thanks]
Totally LOVE this and it was EXACTLY what I was looking for. Thank you!
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?
I'm very happy to hear that it was helpful! When it comes to making the table horizontally scrollable, one option would be to use the carousel widget. Otherwise, it would require either custom code or an external plugin. I would suggest trying the carousel widget first and, if needed, adapting your table design slightly so it fits into what that widget is capable of. That's the easiest solution. Let me know how it goes! 💪
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.
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! 💪
Pls what plugin did you use to style the tab? It looks amazing.
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.
@@Reialesa I did that but for some reason that style tab doesn't pull up
@@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
How you’re gonna give it table schema? it’s important for SEO
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.
1:17 what application you are using for the measurement?
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. 💪
The Tabs Widget changed, so this is no solution anymore. Any idea how this works with the new Tabs Widget?
Yes, I see they changed, I found out you can go to setting > Features > then change to active in Nested Elements.
Is it the free or paid version of elementor?
Pls, Where can i find tabs with CSS id and icon inside it, I have tabs but only with Paragraph
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: th-cam.com/video/XrKhwaODj0Y/w-d-xo.html
@@Reialesa Thank you so much
I'm happy to help! 🙌
You're the best. This is what I was looking for
Awesome, I'm happy to hear that the video was helpful! Thank you for your support. 🙌
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!
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. 🙌🙏
@sebastianhich4861: You need to activate nested element feature in Elementor setting to see those option. @@Reialesa
You SAVED my DAYSSSSSS!
Reialesa to the rescue! 🦸😁 I'm happy to hear that, thank you for your support!
Awesome! thanks
So this is elementor pro version right? Container option is not available in the free one.
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! 💪
@@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. 🙏
That's awesome! I'm happy to help, thank you for your kind words. 🙌
How to add tab button like desktop in mobile and tablet device
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! 💪
Hii bro I need your help
Hi! What do you need help with?
@@Reialesa I need price according to input tag changes price and tabs 3 month 6 month
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? 🙏
That is not good practice. We can use a table to make the exact same design. That will reduce the page size.
That's technically true, but it's a little bit more complicated than that. To create complex tables in Elementor you either need an additional plugin, which I do my very best to avoid for several reasons, one of them being the website speed. Or you need to create them with HTML and CSS, but since this video is about a no-code solution, that was not an option.
Creating advanced tables with containers is the easiest option for most users, in my opinion. 😁
Should have just set globals instead of tinkering with boxes individually like a lunatic lmao
I don't see how using global widgets would be helpful in this case. As far as I'm aware, containers can't be used as global widgets. And using other widgets as global widgets, such as headings, means that they all have the same content. Which definitely isn't what I want when I'm building a pricing table like this.
Plus, copy-pasting styles doesn't take a lot of time, so I usually just do that instead of creating global widgets. Using them can definitely be a faster way to build things sometimes, but it's not something I usually prefer.
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;
}
}
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! 🙌