The pro version of Elementor has a Price Table widget to allow to effortlessly add a price table block to a web page. There are four main elements contained on the Price Table widget
- Header: To add the title of a plan you offer. i.e. “Bronze”.
- Pricing: To add the price of the plan.
- Features: To add the features offered by the plan.
- Footer: To add the call-to-action button
There is also an option to show a ribbon which you can use to show the most-selling plan, currently discounted plan, and so on. One thing missed by the Price Table widget. There is no option to add an image.
Sometimes, you want to add an image like a logo, icon or other image related to the plan you offer. With a little trick, you can add an image to the Price Table widget.
First off, prepare the section — along with the columns — that you want to place the price tables to. Drag the Price Table widget to one of the existing columns.
Go to the Advanced tab on the left panel and open the Background option. Click the paintbrush icon and select an image you want to add to the table.
On the Repeat option, set to No-repeat. On the Size option, set to Contain. On the Position option, set to Custom and set the X position and the Y position.
Next, go to the Style tab and open the Pricing option. Unlink the paddings and set the top padding to about 170 (you can set to any value according to your need).
You can set other styling options under the Style tab. Like setting the text color, typography, button color, and so on. You can go to the Content tab to edit the content. To save you time, you can copy the Price Table widget you have customized and paste to the next columns and tailor the content according to other plans you want to offer.