Pricing With Switch

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

Using Pricing With Switch #

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

Step 1 #

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

Step 2 #

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

Step 3 #

Now create the price table, just simply click on the top right side of the section and left click on the edit button. Now add as many columns as you need from the column menu option.

From here you edit the layout, pricing, style and more. 

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’s content to another one by DL Copy/Paste. 

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.  

Step 6 #

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

Step 7 #

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

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.

Step 9 #

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

Step 10 #

 Show/Hide badge on your column. 

You customize this badge from the style option. 

Step 11 #

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

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. 

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.

Advanced Options #

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

In the advanced section of the widget, you will have the flexibility to add margin and padding to the widget. You can also modify the Z-index to customize the widget more.

You will also get the chance to edit and customize the following options: 

  • Motion Effects
  • Droit Effect
  • CSS Transform 
  • Background 
  • Border 
  • Positioning 
  • Responsive 
  • Attributes 
  • Custom CSS

Motion Effects

From the Motion Effects option you can add different effects such as fading, zooming, bouncing, sliding, rotating, attention seeking motion, lightspeed and more effects to make your price table look attractive.

Droit Effect #

From the Droit Effect option you can create custom floating effects with translate, Rotate, and Scale. 

CSS transform #

The CSS transform option applies transformation to an element with rotate, scale, skew, translate. 

Background #

If you want to customize the background with specific color, gradient or images, you can do that from the advanced settings as well. You can pick background type, color, gradient, gradient type and more.

Border #

If you want to add any line, box, dots and other design variations as borders, you can do it from here. You can also customize the size and insert shadow if you want to.

Positioning #

This feature will allow you to fix the positioning of the columns. From the width section you can select if the position will be full width, inline or customized. And you can set the position as absolute or fixed as well from these settings.

Responsive

You can check the responsiveness of the table if you toggle through the available options. However the change of the table will be only visible on the live page or preview, not in the Elementor.

Attributes #

With Attributes you can add custom HTML attributes to any elements. However, this feature is only available with the pro version of the Droit Elementor Addons.

Custom CSS #

Custom CSS lets you add CSS code to any widget, and see it render live right in the editor. However, this feature is only available with the pro version of the Droit Elementor Addons.

Powered by BetterDocs