Back to contents

How to add a price list to the page built with Elementor using JetElements Price list widget

This tutorial reveals the whole process of using the Pricing List widget from JetElements plugin for Elementor.

The JetElements Price List widget for Elementor provides a stylish way to display products and services with the corresponding prices. You will definitely need it if you sell anything via the Internet or want to create pricing for the specific services or projects.

Price List widget

Creating a price list with Price List widget

Step 1 — Open Elementor page builder, find the Price List widget and drop it into a new section. If you have two or three columns inside the section, you can add several pricing lists, thus you’ll be able to display more items and let the visitors compare the lists.

Price List widget

Step 2 — Navigate to the Content > General block. Here you can add as many items as you need. Fill in the Title, Price and Description fields. Upload Image and add the URL addresses if you want your visitors to get redirected every time they click an image.

General settings in Price List widget

Styling up

Step 1 — Move on to the Style > Item block. Here you are able to set the Space Between Items, the Border Type, Border Radius, Box Shadow, Padding, Alignment, Border Color and so on.

Step 2 — In case you want to change the Typography, Color and Alignment of the title, proceed to Style > Title block.

Step 3 — Go to the Style > Price block to style up the price. You are in charge of changing the Typography, Color, Background Color, Border Type settings. Here you can set the Price Minimal Width (in px).

Image settings in Price List widget

Step 4 — Go forward to the Style > Description block. Here you can personalize the description by changing the Typography settings, the Color, set the responsive margins and customize the alignment options.

Step 5 — Proceed to the Style > Separator block. This section allows you to change the Separator Type, Width, Color, Alignment and Margin.

Step 6 — Open the Style > Image block. It offers you to change the Image Offset (px), the Image Width (px), the Border Type, the Border Radius (px) and create the Box Shadow to make the image style more high-end.

The price list is finally complete. Now you can display the benefits of your services and products using the simple and stylish Price list widget.