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

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.

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:

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!

[Reialesa]

An example of the CSS in the video 👇

<span style="font-size: 1rem; font-weight: normal;">starts at </span>200 $ <span style="font-size: 1rem; font-weight: normal;">/ month</span>

[Lumberzackk]

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 :)

[justincarlson]

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

[ambitionhut]

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.

[AzSoftwareHouseOfficial]

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

[m.r]

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

[nikola-micic]

Thank you very much for your great tutorial! 🍀😍 It helped me understand how this actually works and create the price tables I really wanted.

[montri]

How come I never thought about this?.... Great video! [Thanks]

[carolj.dunlop]

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

[Billy-fohq]

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.

[franktielemans]

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.

[AkanIdaresit]

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

[Requeola]

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.

[emmanuelivwighre]

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

[KaifShaikhTaufiq]

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

[Mehdikahlani]

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

[joeystux]

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?

[nikasiradze]

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

[danielw.]

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

[susheelindulkar]

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