How to Add a Price List to the Page with Elementor

If you have an online business, you know that monetary matters require careful and precise handling. For your site user, it is much more convenient if he/she sees all the prices organized in one place. That way there is no need for them to contact you and wait a long time for an answer. Everything is at hand.

That's why today I will help you add a price list to your site with the help of Elementor Page Builder. For this, you need to ensure that you also have JetElements plugin installed. This plugin contains a lot of useful widgets for creating and editing your website content, including the Price List widget. If you’re ready, let’s begin!

1. Open Elementor and search for the Price List widget in the Elements Panel field.
2. Grab it and drop it onto a section on the right.
3. On the left in the Content tab, you’ll see a number of items with certain settings inside.
   
   
   
4. Change the title, price, and description of each item to whatever you need.
5. You can also make it clickable if you add a URL.
6. To make it more attractive, add an image from the Media Library.
7. Note, that you can add as many items as you need with the help of the Add Item button.
8. Now move on to the Style section.
9. In the Item tab, you can increase or decrease the space between items, add the border type which will surround every item with a border, edit content vertical alignment, and change the border width and the border color specifically for the first and last items in your list.
   
   
   
10. To set a background for your price list, hover over the section, right-click and choose Edit Section.
    
    
    
11. On the left, in the Layout tab toggle Stretch Section option to “yes”. This will allow you to stretch the section to the full width.
12. Then go to the Style section, choose classic background type and add the image from the Media Library.
    
    
    
13. After that, add a background overlay.
    
    
    
14. Then go to the Advanced settings and customize padding.
    
    
    
15. Now let’s go back to the Style section and change the typography setting for the text elements in our list so they look nice on this background.
    
    
    
16. Then go to the Price tab. Here you can change the price minimal width and set the color for the price.
    
    
    
17. Also, you can add a certain border and change the border radius, add padding, and set vertical and text alignments.
18. Then move on to the Description tab and customize typography settings and the margin.
    
    
    
19. The next step is the settings of a separator which goes from the title to the price. You can change its type, color, width, alignment, and margin as you wish.
    
    
    
20. If you don’t want any separator to be visible in your price list, simply decrease the separator width to zero.
21. And if you want to add some space between the title and the separator or between the separator and the price, just increase the margin on the right and left.
22. Then move to the last tab where you can edit the parameters of your images, add the border, change its radius, and apply the box shadow.
    
    
    

Final Say

And here is your price list! As you see, with the help of JetElements plugin it is easy to create and customize it. I hope you enjoyed the process. If you have any questions, just write them in the comments below.

Read Also

How to Create Pricing Tables with Elementor Page Builder

How to Create Testimonials Using Elementor Page Builder

Elementor Tip: Pie Chart Circle Progress on WordPress with Elementor Page Builder

Elementor From A to Z: Sheer Selection Of “How To” Tutorials