In this tutorial, I’ll show you how to create a free Elementor pricing table with the help of the pricing table widget from the premium addons. The pricing table will have different price packs, features, icons, descriptions, and a ribbon.
In the second section of the tutorial, I’ll introduce you to more pro features like the unfold widget and toggle widget to enable you to show yearly and lifetime plans for your pricing table.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Free Elementor Pricing Table Tutorial
What you’ll Need
Premium Addons for Elementor; this is where you’ll find the premium pricing table widget that we’re going to use.
To install the premium addons plugin, go to your Plugins area on your dashboard, search for premium addons for elementor the install and activate it (04:03).
After activating your premium addons, you’ll have a new item in your dashboard menu called Premium Addons for Elementor, click on Widgets and Addons then activate the Pricing Table Widget (make sure it’s in green) (04:19).
Tip: Using the global Switch off button at the top, you can disable all the other widgets that you’re not going to use and only activate the pricing table widget.
And now let’s get started
On your WordPress dashboard go to Pages > Add New to create a new page, name it ‘Pricing’ then click the Edit with Elementor button.
In your Elementor editor, go to Settings (the gear icon) at the bottom, under Page Layout, select Elementor Canvas.
Click the (+) icon to add a new one-column section (01:22).
Select the new section and go to the Widgets area on the left, drag an inner section widget to your section (01:23), also with a single column so delete the second column.
Drag 2 Heading widgets to your section.
Select the section; under Style, set a blue for Background Color.
Select the first heading and under Style, set Text Color to white.
Under Typography; set font to Oswald, Size; 20 pixels, Transform; Uppercase, Letter spacing 1 and Word spacing 11 pixels.
Under Content > Alignment, select the center. Give it a Title; Nothing Beats Our Pricing
Under Advanced > Padding, unlink the values and add 40 pixels at the Top and Bottom.
Select the second heading, under Content > Alignment select center, and on Title give it; Our Pricing.
Under Style, set Text Color to white, Typography Oswald, Size 70pixels, Weight 900 ad Transform uppercase.
Under Advanced > Padding, give it 40pixels at the bottom (03:03).
To Read: Google My Maps Tutorial: How to Create Custom Maps (Share with Friends or Use on Websites)
Create Pricing Table in Elementor
In your Widgets area on the left, when you search for pricing you’ll realize there are 2 pricing widgets, one from Elementor which requires you to have Elementor Pro, and the free pricing widget by the Premium Addons for Elementor, we’re going to use the free pricing widget; Premium Pricing Table, drag it to your canvas (03:33)
After adding the pricing table, now we can customize it.
To do this:
Go to your first inner section, right-click and duplicate it (04:50), then delete the pricing widget that you added earlier.
Select the column and duplicate it twice (05:01)
Now you should be having 3 columns. On each column, go to your navigator on the right, CTRL/CMD+click on all the widgets you don’t need (the headings and the pricing widgets in the second and third columns), and delete them (05:21).
Select the first column, go to Advanced > Margin, unlink the values then add 5% on the right, left, and bottom.
Go to Style, under Background Type add a Color (code #004387).
Go to the Image option and insert a custom shape from your Media Library (05:56)
Under Position, select custom, set the X Position to -352pixels and Y Position to -339pixels.
Under Repeat, select no repeat.
Still under Style, go to the Hover option, set the Transition Duration to 0.7.
Under Background Overlay, go to Background Type and set it to a solid Color; dark blue, with an Opacity of 100%. Set the Transition Duration to 0.7.
Now on hover, the shape disappears (06:43)
Select the pricing widget next, under Content > Title > Text, add ‘Starter’. Under Price > Currency, set it to $ and Price 39. Leave the Divider (/) there, and add ‘year’ for the Duration.
Go to the Feature list to add the pricing feature. Delete List Items 2 and 3 then on List Item #1; add the Text of your choice, on Icon Type select Icon then insert an icon from your Icon Library (a check circle). Duplicate the feature 3 times to add the other items (07:48)
Go to Button, leave the text as ‘Get Started’, under Link Type you can set this to an external URL or to an existing page on your website, select the URL option and add a #.
On the Ribbon option, under Type select stripe, and add Text ‘Popular’.
On Display options; you can choose what to display in your pricing table, for example, if you enable the Icon option, a new feature (the icon) will be added to your table and you can use either an icon, an image, or a Lottie animation. But we’re not using an icon n this case.
Go to Style;
On the Title;
Select white for the Color. Under Typography, set Oswald, Size 35pixels, Weight 600, and the Transform; uppercase.
On the Pricing option;
We’re not running any sale or discount in this case so don’t set anything for the slashed price.
Under Currency set the Color to white, Typography; Rubik, Weight 600 and Size 30 pixels. Set 95 pixels for the Line Height and 2.1 for Letter Spacing. Under Vertical Align, set it to the Top.
Go to the Price and set the Color to white, Typography Rubik, Size 78 pixels, Weight 700. Leave everything else on default.
Under Margin; unlink the values then add -10 pixels on the left.
On the Divider option; set the Color to white Typography Open Sans, Size 25 pixels, leave everything else on default.
Under Margin, unlink the values and add -20 pixels on the left.
On the Duration option; set the Color to white, Typography Open Sans, Size 14pixels, Weight 400 and Transform; uppercase.
Under Margin, unlink the values then set -5pixels on the left.
Go to the Features option;
Set the Text Color to white, Typography Open Sans, Size 14pixels, Weight 400, and everything else on default.
On the Icon option, set Color to white, Size 18, Spacing 10, and Vertical spacing 25.
On the Container option, leave everything on default.
There’s a Tooltips option where you can add a tooltip for your features so when someone hovers over a feature they can see details. You can add that under Content > Feature List > Tooltip.
Go to the Button option;
Set the Text Color to white and Hover Text Color to yellow. Under Typography, set the font to Oswald, Weight 100, and Transform; uppercase.
Under Background Type, set a transparent color.
Under Border Type, select solid with width 2 pixels on all sides. Add Border radius of 100pixels.
Under Margin, unlink and set 40 pixels on the right and left.
Go to the Content option, under Feature List > Alignment, select the left.
Under Style, set the Text Color to white, Typography Open Sans, Weight 600, and Transform uppercase.
Under Ribbon;
Go to the Background color and set it to red (#FF0000).
Select the column and go to Advanced, under Padding unlink the values, and set it to 0pixels on all sides.
Select the pricing table; under Features > Margin, add 40 pixels on the right and left
Select the Button; on Hover, set the Margin to 40pixels on the right and left, and under Padding set 20 at the top and bottom.
Under Box Settings, set Padding of 40 pixels at the top and bottom. Do the same on the Hover option.
When you’re done click on Save Draft and then Preview (16:34)
Elementor Pricing Table Responsive Settings
Go to your Responsive mode (16:44) to make sure the ribbon is responsive on all devices.
On the Tablet;
Select the column and go to Style > Position, set X Position to -359 pixels and Y Position to -318 pixels.
On Mobile;
Select the first column and under Layout, set its Column Width to 50%, and 50% for the other column.
Under Style > Position, set X Position to -386 pixels and Y Position to -325 pixels.
When you’re done, save and preview.
Now we need to replicate this pricing table and customize it to make the next ones.
Select the column, right-click and duplicate it twice, then delete the other blank columns (18:32)
Select the first column, under Content > Ribbon, remove the Text ‘Popular’.
Select the second column;
Under Style > Background, set Color to #983F00.
Select the Pricing widget, under Content > Title, change Text to PROFESSIONAL.
Under Price, set the price to $79.
You can also make changes to the features and add whatever information you want to display.
Select the last column;
Under Style > Background, set Color to #0B4619.
Under Style > Position, set X Position to -345 pixels and Y Position to -332 pixels.
Select the Pricing widget, under Content > Title, change Text to STUDIO.
Under Price, set the price to $139.
Under Content > Ribbon, remove the Text ‘Popular’.
You can also go ahead and make changes to the features.
When you’re done, update/save draft and preview (20:22).
Select the main section;
Under Advanced > Padding, unlink the values and add 100 pixels on the top and bottom.
Under Style > Background Type, select gradient, add blue for the first Color, Location 37, and add pink for the Second Color. Set the Angle to 150.
Save draft and preview (21:00)
Our free Elementor pricing table is all done!
However, if you would like to add more advanced features to your pricing table, for example to add a content switcher or more content in your table, let’s continue.
To Read: Elementor Image Scroll Effects with Premium Addons (Showcase Mockups, Demos & Portfolios)
Adding an Unfold Widget to the Pricing Table
Back in your Elementor editor, go to the Widgets area and search for the Premium Unfold widget, this widget comes in the premium version of the Premium Addons for Elementor, so to use it you’re going to have to pay for the premium version.
Drag the Premium Unfold widget to your first column (22:11)
Select the pricing widget;
Under Style > Box Settings, set the bottom Padding to 0 pixels.
Select the column, under Style > Background Type, copy the color code then select the unfold widget, under Style > Box Settings > Background Type, paste the color code.
With the unfold widget selected, go to Content, disable the Title option, on the Content to show option select Text editor, then you can add in your content, for example, you can add more details about the main features in the pricing table, or you can even add more features. Under Alignment, set it to center.
Go to the Button option;
Under Unfold Text add ‘Show all features’, and under Fold Text add ‘Hide features’.
Enable the Icon option, then on the Fold icon add a hide/minus (–) icon. Then for the Unfold icon add a plus (+) icon.
On Icon position, select Before, Button Size; small and Button position; inside. Leave Alignment to center
Go to the Fade Effect option and disable it.
Under Advanced Settings, set Fold Height to percentage and give it 0.
Change the Unfold Easing option to linear, then leave everything else on default.
Under Style > Box Settings, set Border Type to solid and the Width to 1 on all sides. Set the Color to white, then Border Radius to 7 pixels.
On the Padding option, add 40 pixels to the bottom. And on the Margin option, add 30 pixels on the right and left.
Go to the Content option; set the Color to white, Typography Open Sans, Size 14pixels and Weight 400.
Under Padding, unlink the values and add 10 pixels at the bottom.
On the Button option; set the Text color to white and Icon color to white, and make the background color transparent. Do the same on the Hover option.
The hide features button is too close to the content so to rectify this;
Go back to the Content then SHIFT+ENTER to add a paragraph.
Back under Style, select the Button option > Typography, reduce the Size to 14 pixels.
When you’re done, save draft and preview.
Select the unfold widget, right-click and copy it, then paste it in the second column.
Select the column and under Style > Background Type, copy its background color code, then go to the unfold widget, under Style > Background Type, paste the color code under background color.
Select the unfold widget again, right-click and copy it, then paste it in the third column.
Select the column and under Style > Background Type, copy its background color code, then go to the unfold widget, under Style > Background Type, paste the color code under background color.
Add Lifetime Plan to your Pricing Table
In the second column, we’re going to create a lifetime pricing table that will show when someone clicks on a toggle button.
To do this:
Select the pricing table and duplicate it, right-click and save it as a template, name it ‘LT nd’, then save.
Save the first pricing table as a template too and call it ‘Yearly nd’
Select the widgets and delete them, then save as draft and update/reload the page.
Go to your widgets area and search for the Premium Content Switcher widget, this widget also comes with the pro version of the Premium Addons for Elementor. Drag it to your canvas (29:31)
In the edit section on the, under Content > Switcher, enable the Show Labels option. Add Yearly for the First Label and Lifetime for the Second Label. Under Alignment, set it to center.
Under the Content 1 option, under Content to show select Elementor Template, then select the Yearly nd template you saved earlier.
Under the Content 2 option, under Content to show select Elementor Template, then select the LT nd template you saved earlier.
Go to Display Options, set the Animation to fade.
Go to Style;
On the SWITCHER option, under Colors, set the Controller State 1 color to green and Controller State 2 color to yellow (30:51).
Go to LABELS; set the First Label color to white, Typography; Oswald, Transform; uppercase. Repeat this for the Second Label.
To change the pricing
Press CMD/CTRL+E and go to Templates > Saved Templates on your dashboard, find the Yearly nd template and edit with Elementor (31:55).
When it opens up in the Elementor editor:
Select the first widget, under Price, set the price to $139, remove the Divider, then under Duration add Lifetime.
Under Style > Price, remove the Margins on the Divider. Then for Duration add a Margin of -25 on the left.
Do the same for the last widget, then update and preview.
Go ahead and check out the responsive settings under Responsive Mode to make sure the pricing table looks good on the tablet and mobile devices. Make changes where needed.
To Read: How to Add Google Invisible reCAPTCHA in WordPress
In closing
That’s how you can go about creating a free pricing table using the Premium Addons for Elementor, and furthermore, how you can use the Pro version of Premium Addons and add flare to your pricing tables.
If you have any questions or comments about this tutorial, let me know in the section below. Remember to subscribe to my newsletter and youtube channel for more tips and tutorials.
