Describe the value of your product, services, and all additional information in an interactive price table.

Using Pricing Pro #

Make sure you have Pricing Pro widget enabled from your Dashboard > Droit Addons > Elements.  

Step 1 #

Let’s start by searching Pricing Pro from the left-hand side menu, and dragging the widget to your preferred section.

Elmentor page builder

Step 2 #

Create header title and subtitle by clicking on the top of the section. Type down your title and subtitle, and you can further style these texts with typography, shadow, text color, blend mode, and custom CSS from the style section. 

Droit Pricing Pro widget's content edit menu

You add advanced customization to these texts with advanced options such as – Margin, Padding, Droit Effect, CSS Transform, Motion Effects and more. 

Droit Pricing Pro widget's advanced menu

Step 3  #

Now create the price table, just simply click on the top left-hand side of the screen and right-click on the edit column button. Now add as many columns as you need and customize them.

Droit Pricing Pro widget's layout edit menu

From here you add style options such as background, border, typography, and custom CSS to your column section. Style option allows you to add style to individual columns one by one and can give a different look to each one.

Step 4 #

 Now start editing the content within each column. By default when you add a new column they are blank, but have the option of duplicating columns to a blank one or copy one content to another one by DL Copy/Paste. 

Elementor Column edit menu

Step 5 #

Edit each column’s content by clicking on that column and the content edit menu for that column will appear on the left-hand side. From here you can add everything you want to showcase inside your price table.

Start by editing the title and subtitle of your price table from the content menu.  

Droit Pricing Pro widget's header edit menu

Step 6 #

Add your pricing information from the Price option, you can add currency, price, sale/sale price, and period. 

Droit Pricing Pro widget's price edit menu

Step 7 #

From here you can add features of your individual products and services.

Droit Pricing Pro widget's features edit menu

You can add as many features as you want to each column. And customize them with fonts, color, typography, divider and more.

Step 8 #

 Add a short description about your product/service from here.

Droit Pricing Pro widget's description edit menu

Step 9 #

 Button; add button with custom texts and appropriate link to your product. 

Droit Pricing Pro widget's button edit menu

Step 10 #

 Show/Hide badge on your column. 

Droit Pricing Pro widget's badge edit menu

Step 11 #

 Reorder content from this section. Hide/Show any content you want.

Droit Pricing Pro widget's content order edit menu

Step 12 #

You can customize everything that you just created in the content from the style section. Style section is simple yet versatile in how it affects your content. 

Droit Pricing Pro widget's style edit menu

Step 13 #

You can add alignment, padding, border radius, background type, border type, and shadow from the General option. 

Droit Pricing Pro widget's general style edit menu

Step 14 #

 Add Different fonts, color, typography, spacing to your header title and subtitle from here.

Droit Pricing Pro widget's header style edit menu

Step 15 #

Add different font, color, spacing, for your pricing, text, and symbol from here.

Droit Pricing Pro widget's price style edit menu

Step 16 #

 Add typography, color, spacing to your Feature list from here.

Droit Pricing Pro widget's feature list style edit menu

Step 17 #

Add a custom button to your price table with the Button option from Style Tab.

Droit Pricing Pro widget's button edit menu

Step 18 #

 You can customize your Note/Description of your product/service with typography, color, and spacing.

Droit Pricing Pro widget's note style edit menu

Step 19 #

If you want to add some custom effects and style to your price table, head over to the Advanced tab.

Droit Pricing Pro widget's advanced edit menu

Live Copy & Paste #

You can follow all the steps above and create your price table, or if you’re interested in skipping some steps, you can visit Droit Pricing Pro widget’s live demo page and simply copy one of two preset styles from the Live Copy button. And paste it in your preferred section.

Elementor page builder's column edit menu

Powered by BetterDocs