With Droit Elementor Addons, you can design creative pricing layouts to communicate with your users. With the help of this widget, you can create unique and eye-catchy designs in no time. 

Video Instruction #

Using Pricing Widget #

To use the Pricing widget and design your website creatively, follow the steps mentioned below. 

Step 1  #

From the menu bar on the left-hand side, select the Pricing widget. Drag and drop the widget on the area you want it to be. 

Step 2 #

From the preset section, pick from the four different styles of pricing design. 

Step 3  #

In the Header section, you can customize the title, description, image, link of the pricing table. 

Step 4  #

From the Price option, you can determine the currency, price amount, currency format, enable/disable sale, period, position from this section. 

Step 5  #

Add the details of the pricing items from the feature option. You can add text to describe the product/service details in the pricing table easily. 

Step 6 #

If you want to highlight any specific pricing option as popular, you can highlight it from this section. 

Step 7 #

From the Button option, add the button text and include a link in the pricing table. 

You can also customize the text color, background color, padding, button type, radius and position from the STYLE function within the button section. 

Step 8   #

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
  • 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. 

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 of the widget, you can do it from here. You can also customize the size and insert shadow effects if you want to. 

Positioning #

This feature will allow you to fix the positioning of the widget. 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 widget if you toggle through the available options. However the change of the widget 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