Pricing Table

Estimated reading : 3 minute

Pricing table will allow you to display pricing of different products and services. This is a very useful element to communicate with users in a creative way. 

Using Pricing Table

You can customize the pricing table. It has three different options for customization – Content, Style and Advanced

Content:

The Content section allows you to customize the following options: 

  • Section Style
  • Title Section
  • Subtitle Section
  • Table :List

Section Style: Select from the wide range of styles that suits your interest the most. There are four different preset styles to choose from. One preset style is especially designed for events as well. 

Title Section: From the Title Section, you can add header to the Pricing Table. 

Subtitle Section: From the subtitle section, you can add a description below to the pricing table. And you can edit the text from here. 

Table Lists: Using the Table Lists, you can input all sorts of required information in the pricing table. You can include title, title tag, icon type, icon, icon color, background of icon to customize the pricing table.  

Along with  that you can add price, duration, item lists, button label and button URL to completely design your pricing tables. 

To write an item list, write with <b> after each item so that it appears in a proper structure. For example, 

Product Recommendations <b>

Abandoned Cart <b>

Style:

From the Style section you can change the color, typography and background of title, subtitle and button. You can also add padding using the section padding option. 

Advanced 

In the Advanced section of the tool, you will have the flexibility to add margin and padding to the element. You can also modify the Z-index to customize the element 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 website look different. 

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 element, 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 element. 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 elements 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.

Still_Stuck

Still Stuck?

We can help you. Create a Support Ticket

Was this article helpful to you? Yes No
Create Support Ticket