1. Home
  2. Docs
  3. Marketing Elements
  4. Pricing Table

Pricing Table

How to Configure and Style EA Pricing Table

EA Pricing Table lets you easily design an attractive pricing list of your packages with plenty of styling options. Marketing Bundle of Essential Addon includes the Pricing Table element. With its easy interface, you can input the text first. Then sleep over it to come up with the perfect styling consistent with the other parts of your website.

Table of Contents:

  1. How to Activate Pricing Table
  2. How to Configure the Content Settings
    2.1. Settings
    2.2. Price
    2.3. Feature
    2.4. Footer
    2.5. Ribbon
  3. How to Style Pricing Table
    3.1. Pricing Table Style
    3.2. Others
  4. Final Outcome

1. How to Activate Pricing Table

To use this Essential Addons element, find the EA Pricing Tableelement from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA Pricing Table’ into the Drag widget hereor the ‘+’ section.

Pricing Table

After you are successfully done with step 1, this is how the element is going to look like.

Pricing Table

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will find the ‘Settings’ section.

2.1. Settings

From the ‘Settings’ section, you can use the drop-down menu to select your preferred ‘Pricing Style’ layout.

Pricing Table

You can use the toggle to enable or disable the ‘List Icon’ option. Besides, you can modify your ‘Title’ &’Sub Title’ and also add a ‘Header Image’ of your choosing. You will have to do this separately for each column.

Pricing Table

2.2. Price

From the ‘Price’ section, you can add  Price and use the toggle to turn on or off the ‘On Sale’ feature. If it’s enabled then you can set a ‘Sale Price’ of your choosing.

You will have the flexibility to modify ‘Price Currency’, ‘Currency Placement’ and more from this section.

Pricing Table

2.3. Feature

From the ‘Feature’ section, you can add/modify/delete your feature item for a pricing package.

You can change the ‘List Item’, ‘List Icon’ & ‘Icon Color’. Besides, you can use the toggle to enable or disable ‘Item Active’ and ‘Enable Tooltip’ options.

Pricing Table

2.4. Footer

From the Footer section, you can modify ‘Button Icon’, ‘Button Text’ and ‘Button Link’.

Pricing Table

2.5. Ribbon

You can simply enable or disable the ‘Featured’ toggle to display/hide the Ribbon. Besides, you can use the drop-down menu to change the ‘Ribbon Style’ and also have the flexibility to change the ‘Featured Tag Text’.

Pricing Table

Click to see Live Demo

3.  How to Style Pricing Table

Switch to the ‘Style’ tab to style all the features of the Pricing Table.

3.1. Pricing Table Style

From the ‘Pricing Table Style’ section, you can change the ‘Background Color’, ‘Featured Background Color’ and many more styling options. You also have the option to modify the content & button alignment.

Pricing Table

3.2. Others

You can also add styling to ‘Header’, ‘Pricing’, ‘Feature List’, ‘Ribbon’, ‘Button’ & ‘Tooltip’ by changing the color, typography & many more as per your preference.

Pricing Table

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Pricing Table as per your preference.

Pricing Table

This is how you can easily display all the pricing packages of your products using EA Pricing Table.

Getting stuck? Feel to Contact Our Support for further assistance.

Get Started Now

Tags , , , , ,

How can we help?