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

Опубликовано: 22 Сентябрь 2024
на канале: Reialesa

18k

398

Get Elementor:

Hosting I love and recommend for most clients and for those on a budget:

Wizards of Webcraft – A series where I’ll be reviewing your websites - 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:

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

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!