Pricing page plays a crucial role in any companies website. Using the Toggle Element, you can create pricing switcher too.
Let me introduce Elementor Pricing Table widget by Master Addons plugin. You will get 5 awesome variations for free. This plugin is compatible with any Theme.
Click on the view Pricing Table demo button and enjoy some pricing variations. I will present how to create a pricing table in Elementor page editor inside this post.
If you don’t have elementor page builder installed then just install it now. You also need Master Addons plugin to work with hover text element.
First, add a section with as much column you need for the pricing table. You can also add a single section and drag “Inner content” element to create multiple sections too. Choice is yours, but I will select 3 columns section here.
Second, scroll down in your elementor element section. You will see the “Ma Pricing Table” element. Just drag this element inside your section or inner column.
Third, after dragging you will see the default pricing table with some dummy content. Now it’s time to change the content and style the prcing table. After customizing a table you can copy and paste it to other columns too. It will save time and effort.
Pricing Table content
Fourth, each pricing table divided into 6 parts. These parts are Pricing Contents, Header, Pricing, Features, Footer, Ribbon.
From this option, you able to select the layout from 5 variations and make any table as highlight table.
Change Header BG color, Title text, Choose HTML tag for title, and write subtitle form this option.
Manage your currency symbol (Select the symbol from our list, if you don’t see the symbol then just choose custom and write it), price (Type your pricing price here), sale (If you are providing discount then type original price in sale option), Period (in this option you should type the duration like weekly, monthly, yearly, lifetime).
By default, you will see 3 feature and you can change the content. But you are free to add new features for your pricing table as much as you need. Besides normal text, you will see tooltip text option, sometimes you may need to mention tooltip inside your pricing feature. You can use this option and write tooltip then select the tooltip position.
This option allows you edit button text, button URL, additional info, and Easy Digital Download Integration. If you have EDD plugin installed then you can use this feature.
It’s necessary to showcase which plan is popular to your user and what is perfect for startup business too. Enable ribbon and type ribbon text + align where you prefer to showcase it.
Pricing Table Style
Now it’s time to navigate the style section. You will see here a total of 5 different sections Header, Pricing, Features, Footer, and Ribbon. The logic for each section is same. You can change height, width, margin, padding, color, typography using the options. There is nothing to explain in details about customization. If you face problem while working with pricing table you are free to comment here or contact us. Enjoy the following gif image and you will get a clear idea on how style works for pricing table element.
I hope that helps you to create your own pricing table using elementor page builder. As you have seen it has 5 unique variation + multiple gradient background, you are free to customize and create unique pricing table.