Would you like to add a price grid in Elementor ?
If you use your Website to sell your services or products, it is crucial to display the pricing plans you offer. Elementor, the most popular WordPress page builder plugin, comes with a widget Price Table which you can use to effortlessly add a pricing grid to a page or template. In this article, we'll show you how to use this widget.
Read also: How to create a rounded image in Elementor
The Price Table widget itself is only available on Elementor. Pro So to be able to use it you need to use Elementor Pro. In this article, we will directly add the Price Table widget to the editing area.
There are two options for adding a price grid to an Elementor page or template. First, you can use a predefined block template. Second, you can create the table yourself. From zero.
Add the price grid from a predefined template
Elementor has around 14 price grid block designs for you to choose from. Again, you need to use Elementor Pro in order to use the templates as the pricing grid is only available on Elementor Pro. To use a price grid block template, click the folder icon in the edit box to open the template library.
In the template library that appears, click the tab Pads and in categories select Pricing in the drop-down menu to filter the models. Select a model you like and click on the button INSERT to import it into the Elementor editor.
You can then go to the left panel to change the default content of the grids.
Add pricing grid from scratch
If you have your own design concept for the pricing grid you want to add, creating the tables from scratch is a great idea. To facilitate your work, you can create a table. Once you are done, you can copy it and customize the contents of the duplicate tables. It will save you a lot of time.
See also: How to create a team member section with Elementor
Start by adding a new section and select a column structure according to the number of tables you want to create and drag the widget Price Table to one of the columns.
Go to the left panel to change the default content. You can edit the content under the tab Content. There are 5 parameter blocks that you can open to edit this: Header, Pricing, Features, Footer, and Ribbon.
- Header
You can open this block to modify the contents of the table header. You can change the title right away Title and the description immediately Description. Ideally, you use the header section of the table to add the name of the package.
- Pricing
You can open this block to change the price of the package. You can activate the option Sale if the package is on sale. If you have knowledge about WordPress custom fields, you can also add a dynamic price by clicking on the database icon data on the field Price.
You can open this block to add the features you want to offer on the package. By default, you have three features. You can open an entity to edit it. To add a new feature, you can just click on the button ADD AN ELEMENT.
Read also: 7 Creative Ways To Use Elementor Popup Builder
By default, each feature has a checklist icon. To change the icon, just click on the icon. To remove it, just click on the trash can icon.
- Footer
The footer is the section where you can add a link and a call-to-action button.You can also add additional information to this section.
- Ribbon
You can add a sale tag something like "SALE", "SPECIAL", "HOT OFFER" to your table. If you want to add a sale tag, or any tag you want, you can open the block Ribbon and activate the option Display. You can add your favorite label in the field Title and set the position on the option Position.
Grid Customization
To customize the components of the label, you can switch to the tab style in the left panel. You will also see five setting blocks on this tab.
- Header : You can open this block to customize the header section of the table. You can set things like header background, typography (font family, font size, font style) of title and description, as well as title text color and of the description.
- Pricing: You can open this block to customize the pricing section. You can set things like background color, typography, text color, currency symbol and position, etc.
- : You can open this block to customize the entities section. You can set things like background, text color, typography, alignment, separator on / off, etc.
- Footer : You can open this block to customize the footer section. You can define elements such as the background, the size of the button, the color of the button, the typography of the button text, etc.
- Ribbon: This block will only appear if you activate the option Ribbon under the tab Content. You can open this block to customize the ribbon, such as color, text color, and typography.
Once you're done with the first table, you can copy it to other columns and then replace the content depending on what functionality you want to provide on each table / plan. To copy the table, right-click on the handle of the widget and select To copy, then right click on the column you want to paste it into and select Coller.
Ultimately
Elementor Pro comes with a Price Table widget to let you easily add a price grid to a page or template. Some add-ons - such as happy addons, Essential Addons and JandElements - also have the same widgets with different styling options.
Get Elementor Pro Now!!!
Conclusion
Here is ! That's it for this article which shows you how to add a price grid in Elementor. If you have any concerns on how to get there flet us know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
