Comparison Table widget will allow you to compare different products or services on your website. You can easily build this widget with Enter Addons.

Using Comparison Table Widget :

You can see the below video to get an insight into how you can use the Comparison Table Widget, Or you can follow the documentation whichever you find convenient.

Video Here

Step1

Firstly, select the Comparison Table Widget from the menu bar on the left-hand side of your screen and drag and drop it in the selected area.

Secondly, from ‘Content‘ Tab you will get Comparison Table Heading and Comparison Table Content section respectively

Then, from Comparison Table Heading section you can add or edit ‘Heading Title List’ item, clicking with ‘ADD ITEM’ button and remove clicking with ‘X’ button.

After that, from Comparison Table Content section you can add or edit ‘Content List’ item, clicking with ‘ADD ITEM’ button and remove clicking with ‘X’ button.

Step2

From ‘Style‘ section you can find Wrapper Style, Heading Style, Badge Style, Pricing Style, Heading Image Style, Comparison Content Style, Content Icon Style, Content Image Style and Button Style respectively.

Then From ‘Wrapper Style‘ section you can add or edit width, border-type, border-radius, margin, padding, box-shadow and background-type respectively.

After that From ‘Heading Style‘ section you can edit padding, typography, text-stroke, border-type, border-radius, box-shadow, text-alignment and background-color respectively.

Moreover, from this section, you can find ‘HOVER’ view also.

Then, From ‘Badge Style‘ section you can edit typography, badge-text-color, padding, border-radius, background-type, badge-width and badge-height respectively.

After that, From ‘Pricing Style‘ section Under Pricing Area menu, you can select display, edit or add alignment, width, height, margin, padding, box-shadow and background-type.

Moreover, Under Price menu, you can add or edit price color and typography. And also, Under Currency menu, you can add or edit price currency-color, typography and vertical-alignment respectively.

Then,From ‘Heading Image Style‘ section you can edit or add image-width, image-height, margin, padding, border-type, border-radius and box-shadow receptively

After that, From ‘Comparison Content Style’ section you can add or edit typography, border-type, width, color, padding, content-alignment and color respectively in ‘NORMAL’ view.

Moreover, from this section, you can find ‘HOVER’ view also.

Then, From ‘Comparison Icon Style’ section you can add or edit icon-color, icon-size, icon-container-width, icon-container-height, margin, padding and border-type respectively in ‘NORMAL’ view.

Moreover, from this section, you can find ‘HOVER’ view also.

After that, From ‘Content Image Style’ section you can add or edit image-width, image-height, margin, padding, border-type and border-radius respectively.